vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下:
登入后:
登入前:
登录框:
注册框:
html代码部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!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代码部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | * { 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 h 3 { 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代码部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 | //日期格式化函数 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/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
联系客服