github效果在线预览
仓库地址：
/zhongyoucong/vuejs/
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" /><link rel="stylesheet" href="css/index.css" /><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></dt><dd class="commentwords "><i class="icon-style icon-file-alt "></i>{{value.words}}</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></dd></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: "-02-17 09:15:25"}, {username: "李四",userimg: "user01.jpg",words: "吃饭去了啊。呵呵！",like: 23,nolike: 63,time: "-3-27 10:12:34"}, {username: "王五",userimg: "user03.jpg",words: "这评论可以。呵呵！",like: 27,nolike: 33,time: "-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) {ments[index].like++;},//点踩notlike: function(index) {ments[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");//将评论信息压入评论信息列表ments.push(obj);alert("评论成功！");$(".wordsbox textarea").val("");}}}}});
