vue.js实现用户评论、登录、注册、及修改信息功能

codingNoob 2020-05-15 我要评论

vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：

登入后：
这里写图片描述
登入前：

登录框:

注册框：

html代码部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>index</title>
  <link rel="stylesheet" href="css/font-awesome.min.css" rel="external nofollow" />
  <link rel="stylesheet" href="css/index.css" rel="external nofollow" />
  <script type="text/javascript" src="../lib/vue.min.js"></script>
  <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
</head>

<body>
  <div id="comment">
    <!--登录-->
    <div class="loginbox" v-show="loginStatus" @click="loginboxClick()" style="display:none;">
      <div class="box" @click="stopProp()">
        <h3>用户登录</h3>
        <form name="login" id="login">
          <input type="text" placeholder="请输入用户名" class="username">
          <input type="password" placeholder="请输入登录密码" class="psw">
          <input type="button" value="立即登录" @click="login()">
          <input type="button" value="立即注册" @click="showregister()" class="blueBtn">
        </form>
      </div>
    </div>
    <!--登录-->

    <!--注册-->
    <div class="loginbox registerbox" v-show="registerStatus" @click="registerboxClick()" style="display:none;">
      <div class="box" @click="stopProp()">
        <h3>用户注册</h3>
        <form name="register" id="register">
          <input type="text" placeholder="请输入用户名" class="username">
          <input type="password" placeholder="请输入登录密码" class="psw">
          <input type="button" value="立即注册" @click="register()">
          <input type="button" value="立即登录" @click="showLogin()" class="blueBtn">
        </form>
      </div>
    </div>
    <!--注册-->

    <!--评论-->
    <div class="commentbox">
      <div class="userbar" v-show="userbarStatus" style="display:none;">
        <img :src="'img/'+currentUser.userimg" alt="" title="" class="userimg">
        <span class="loginout" @click="loginout()">退出账号  <i class="icon-style icon-signout"></i></span>
        <span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md"> </i></span>
        <p><span class="userword" v-text="currentUser.words" contenteditable="false"></span><i class="icon-style icon-edit" @click="editUserWords()"></i></p>
      </div>
      <div class=" commemtlist ">
        <dl v-for="(value, index) in comments ">
          <dt>
            <img :src=" 'img/'+value.userimg ">
            <span class="username ">{{value.username}}</span>
          <https://img.qb5200.com/download-x/dt>
          <dd class="commentwords "><i class="icon-style icon-file-alt "></i>{{value.words}}<https://img.qb5200.com/download-x/dd>
          <dd class="btbar ">
            <span class="like red "><i class="icon-style icon-thumbs-up "></i>点赞(<strong @click="like(index) ">{{value.like}}</strong>)</span>
            <span class="notlike red "><i class="icon-style icon-thumbs-down "></i>点踩(<strong @click="notlike(index) ">{{value.nolike}}</strong>)</span>
            <span class="data red "><i class="icon-style icon-calendar "></i>时间<strong>{{value.time}}</strong></span>
          <https://img.qb5200.com/download-x/dd>
        <https://img.qb5200.com/download-x/dl>
        <div class="wordsbox ">
          <textarea placeholder="请输入留言 "></textarea>
          <span @click="showLogin()" v-show="lrBtnStatus">登录</span>
          <span @click="showregister()" v-show="lrBtnStatus">注册</span>
          <input type="submit" value="提交 " @click="subCommont()" />
        </div>
      </div>
    </div>
    <!--评论-->

  </div>
</body>

</html>
<script src="js/index.js "></script>

css代码部分：

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: "微软雅黑";
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#comment .loginbox {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .85);
}

#comment .icon-style {
  margin-right: 5px;
  color: #999;
}

#comment .loginbox .box {
  height: 300px;
  width: 300px;
  padding: 40px 20px 20px 20px;
  margin: 100px auto;
  background: #fff;
}

#comment .loginbox .box h3 {
  font-size: 16px;
  font-family: "微软雅黑";
  text-align: center;
}

#comment .loginbox .box input {
  height: 40px;
  width: 100%;
  border: 1px solid red;
  margin: 10px 0;
  border-radius: 2px;
}

#comment .loginbox .box input[type="button"] {
  background: red;
  color: #fff;
  font-family: "微软雅黑";
}

body #comment .loginbox .box .blueBtn {
  background: #0089FF;
  border: 1px solid #0089FF;
}

#comment .userbar {
  height: 200px;
  padding: 10px;
  text-align: center;
}

#comment .userbar .userimg {
  height: 100px;
  width: 100px;
  border-radius: 50px;
}

#comment .userbar .username {
  display: block;
  padding: 10px 0;
  font-size: 18px;
  color: red;
  font-weight: bolder;
}

#comment .commentbox {
  position: relative;
  top: 40px;
  width: 600px;
  padding: 20px 20px 30px 20px;
  background: #eee;
  margin: 0 auto;
}

#comment .commentbox .loginout {
  display: block;
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

#comment .commentbox .userword {
  outline: none;
}

#comment .commemtlist {
  padding: 10px;
}

#comment .commemtlist dl {
  padding: 20px 0;
  border-bottom: 1px solid #D2D2D2;
}

#comment .commemtlist dl dt {
  float: left;
  text-align: center;
  margin-right: 15px;
}

#comment .commemtlist dl dt img {
  height: 50px;
  width: 50px;
  border-radius: 25px;
}

#comment .commemtlist dl dd {
  padding-bottom: 10px;
}

#comment .commemtlist .btbar span {
  margin-right: 15px;
  font-size: 10px;
}

#comment .commemtlist .btbar .red strong {
  color: red;
  margin: 0 3px;
  font-weight: normal;
  cursor: pointer;
}

#comment .commemtlist .username {
  display: block;
  font-size: 12px;
  text-align: center;
}

#comment .commemtlist .wordsbox textarea {
  height: 100px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  resize: none;
}

#comment .commemtlist .wordsbox span {
  font-size: 13px;
  margin-right: 15px;
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

#comment .commemtlist .wordsbox input {
  float: right;
  width: 80px;
  height: 28px;
  text-align: center;
  color: #fff;
  background: red;
  border: none;
  border-radius: 3px;
}

javascript代码部分

//日期格式化函数
Date.prototype.format = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份 
      "d+": this.getDate(), //日 
      "h+": this.getHours(), //小时 
      "m+": this.getMinutes(), //分 
      "s+": this.getSeconds(), //秒 
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
      "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
  //创建vue实例
var v = new Vue({
  el: "#comment",
  data: {
    //原始用户评论信息
    comments: [{
      username: "张三",
      userimg: "user02.jpg",
      words: "这历史可以啊，不错不错。呵呵！",
      like: 87,
      nolike: 53,
      time: "2017-02-17 09:15:25"
    }, {
      username: "李四",
      userimg: "user01.jpg",
      words: "吃饭去了啊。呵呵！",
      like: 23,
      nolike: 63,
      time: "2017-3-27 10:12:34"
    }, {
      username: "王五",
      userimg: "user03.jpg",
      words: "这评论可以。呵呵！",
      like: 27,
      nolike: 33,
      time: "2017-04-02 03:26:54"
    }],
    //原始用户信息
    users: [{
      username: "zhangsan",
      password: "123456",
      userimg: "user.jpg",
      words: "世界那么大我想去看看。"
    }, {
      username: "zyc",
      password: "123456",
      userimg: "user01.jpg",
      words: "雨过天晴的美好。"
    }, {
      username: "admin",
      password: "123456",
      userimg: "user02.jpg",
      words: "下大雨了，怎么办啊。"
    }],
    //当前用户信息
    currentUser: { username: "", words: "", userimg: "" },
    //登录框显示或隐藏状态
    loginStatus: false,
    //注册框显示或隐藏状态
    registerStatus: false,
    //用户信息栏显示或隐藏状态
    userbarStatus: false,
    //登录注册入口显示或隐藏状态
    lrBtnStatus: true
  },
  methods: {
    //点击登录
    showLogin: function() {
      document.getElementById("login").reset();
      this.loginStatus = true;
      this.registerStatus = false;
    },
    //点击注册
    showregister: function() {
      document.getElementById("register").reset();
      this.loginStatus = false;
      this.registerStatus = true;
    },
    //退出登录
    loginout: function() {
      //清空当前用户数据
      this.currentUser.username = "";
      this.currentUser.words = "";
      this.currentUser.userimg = "";
      alert("退出成功！");
      this.userbarStatus = false;
      //登录或注册入口显示
      this.lrBtnStatus = true;
    },
    //登录遮罩层点击事件
    loginboxClick: function() {
      this.loginStatus = false;
    },
    //注册遮罩层点击事件
    registerboxClick: function() {
      this.registerStatus = false;
    },
    //点击登录或注册框阻止事件冒泡
    stopProp: function(e) {
      e = e || event;
      e.stopPropagation();
    },
    //点赞
    like: function(index) {
      this.comments[index].like++;
    },
    //点踩
    notlike: function(index) {
      this.comments[index].nolike++;
    },
    //登录
    login: function() {
      var username = $(".loginbox").find(".username").val(); //获取用户名
      var psw = $(".loginbox").find(".psw").val() //获取密码
      var flag = false;
      for (var i = 0, len = this.users.length; i < len; i++) {
        //判断用户名密码是否正确
        if (this.users[i].username === username && this.users[i].password === psw) {
          flag = true;
          alert("登录成功！");
          //用户登录框消失
          this.loginStatus = false;
          //用户登录信息显示
          this.userbarStatus = true;
          //设置用户栏信息
          this.currentUser.username = this.users[i].username;
          this.currentUser.words = this.users[i].words;
          this.currentUser.userimg = this.users[i].userimg;
          //登录或注册入口消失
          this.lrBtnStatus = false;
          break;
        }
      }
      if (!flag) {
        alert("输入的账号或密码不正确！");
        document.getElementById("login").reset();
      }

    },
    //注册
    register: function() {
      var obj = {}; //创建用户账号密码容器
      var flag = false;
      var username = $(".registerbox").find(".username").val(); //获取用户名
      var psw = $(".registerbox").find(".psw").val() //获取密码
        //判断用户名是否存在
      for (var i = 0, len = this.users.length; i < len; i++) {
        if (this.users[i].username === username) {
          flag = true;
          alert("该用户名已经被注册！");
          break;
        }
      }
      if (!flag) {
        if (username == "" || psw == "") {
          alert("账号和密码不能为空！");
        } else {
          var randomNum = Math.floor(Math.random() * 5) + 1;
          //随机生成头像
          var randomImg = "user0" + randomNum + ".jpg";
          obj.username = username;
          obj.password = psw;
          obj.words = "系统默认标语。"
          obj.userimg = randomImg;
          //添加用户信息到用户列表
          this.users.push(obj);
          alert("注册成功！");
          //设置用户信息栏显示
          this.userbarStatus = true;

          //设置用户栏信息
          this.currentUser.username = obj.username;
          this.currentUser.words = obj.words;
          this.currentUser.userimg = obj.userimg;
          //登录或注册入口消失
          this.lrBtnStatus = false;
          //重置表单数据
          document.getElementById("register").reset();
          //注册框消失
          this.registerStatus = false;
        }
      }
    },
    //编辑用户心情
    editUserWords: function() {

      var wordsObj = $(".commentbox").find(".userword");
      var edit = wordsObj.attr("contenteditable"); //获取元素的H5可编辑属性

      if (edit == "false") {
        //打开可编辑功能
        wordsObj.attr("contenteditable", "true");
      } else {
        for (var i = 0, len = this.users.length; i < len; i++) {

          //查找对应用户名
          if (this.users[i].username === this.currentUser.username) {
            //改变用户信息里面的words数据
            this.currentUser.words = $(".commentbox").find(".userword").text();
            this.users[i].words = this.currentUser.words;
            //关闭可编辑功能
            wordsObj.attr("contenteditable", "false");
            alert("保存成功！");
          }
        }
      }
    },
    //点击提交评论
    subCommont: function() {
      if (!this.userbarStatus) {
        alert("登录之后才可以评论！");
        this.loginStatus = true;
      } else {
        if ($(".wordsbox textarea").val() == "") {
          alert("请先填写评论内容！");
        } else {
          var obj = {}; //评论信息对象的容器
          obj.username = this.currentUser.username;
          obj.userimg = this.currentUser.userimg;
          obj.words = $(".wordsbox textarea").val();
          obj.like = 0;
          obj.nolike = 0;
          obj.time = new Date().format("yyyy-MM-dd hh:mm:ss");

          //将评论信息压入评论信息列表
          this.comments.push(obj);
          alert("评论成功！");
          $(".wordsbox textarea").val("");
        }
      }
    }
  }
});

github效果在线预览

仓库地址：https://github.com/zhongyoucong/vuejs/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue.js实现用户评论、登录、注册、及修改信息功能

相关文章

猜您喜欢

今日热门