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

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

登入后

登入前

登录框：

注册框

超文本标记语言代码部分：

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' title index/title link rel='样式表href=' CSS/font-真棒。量滴CSS ' rel='外部nofollow'/link rel='样式表href='css/index.css' rel='外部no follow '/script type=' text/JavaScript ' src=' http 3360./lib/vue。量滴js '/script脚本类型=' text/JavaScript ' src=' http :/lib/jquery-1。11 .3 .量滴js '/脚本/头体div id=' comment '！-登录-div class=' loginbox ' v-show='登录状态' @ click=' loginbox click()' style=' display : none；div class=' box ' @ click=' stop ROP()' H3用户登录/h3表单名称='login' id='login '输入类型=“文本”占位符='请输入用户名class='username '输入类型='密码'占位符='请输入登录密码class='psw '输入类型='按钮'值='立即登录@click='login()'输入类型='按钮'值='立即注册@ click=' show register()' class=' blueBtn '/form/div/div！-登录- !-注册-div class=' loginbox register box ' v-show=' register status ' @ click=' register box click()' style=' display : none；div class=' box ' @ click=' stop ROP()' H3用户注册/h3表单名称='register' id='register '输入类型=“文本”占位符='请输入用户名class='username '输入类型='密码'占位符='请输入登录密码class='psw '输入类型='按钮'值='立即注册@click='register()'输入类型='按钮'值='立即登录@ click=' show log in()' class=' blueBtn '/form/div/div！-注册- !-评论-div class=' comment box ' div class=' userbar ' v-show=' userbarStatus ' style=' display : none；img : src=' http : ' img/' current user。用户img ' alt=' title=' class=' user img ' span class='登出登录' @ click='登出登录()'退出账号I class=' icon-style icon-注销'/I/span class=' username ' v-text=' current user。username ' I class=' icon-style icon-user-MD '/I/span PS pan class=' user word ' v-text=' current user。word ' content editable=' false '/span class=' icon-style icon-edit ' @ click=' edit user words()'/I/p/div class=' commem list ' dl-for='(值，索引)在注释中dt img : src=' http : ' img/'值。用户img“span class=”用户名“{ value。username } }/span/dt DD class=' comment words ' I class=' icon-style icon-file-alt '/I { { value。单词} }/DD DD class=' btbar ' span class=' like red ' I class=' icon-style icon-竖起大拇指/I点赞(strong @ click=' like(index)' { { value。like } }/strong)/span span class=' not like red ' I class=' icon-style icon-thumbs-down '/I点踩(strong @ click='不像(索引)' { { value。不喜欢} }/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='请输入留言/text area span @ click=' show log in()' v-show=' lrBtnStatus '登录/span span @ click=' show register()' v-show=' lrBtnStatus '注册/span输入类型='提交'值='提交@ click=' submont()'//div/div/div！-评论-/div/body/html脚本src=' http : js/index。js '/脚本CSS代码部分：

* { margin : 0；padd : 0；font-size : 14px字体系列： '微软雅黑；} body {-web kit-touch-callout :无；-网络工具包-用户-选择：无；-khtml-用户-选择：无；蚊子用户-选择：无；-ms-用户-选择：无；用户选择：无；} #评论loginbox { position:固定；z指数： 99999；宽度： 100%;高度： 100%;背景： rgba(0，0，0。85);} #评论。图标样式{右边距： 5pxcolor: # 999} #评论loginbox .box { height: 300px宽度： 300像素；padd : 40px 20px 20px 20px xmargin 3360 100px自动；背景# fff} #评论loginbox .H3盒子{ font-size : 16px字体系列： '微软雅黑；文本对齐：中心；} #评论loginbox .框输入{高： 40像素宽度： 100%;border: 1px纯红；边距： 10px 0；边界半径： 2px} #评论loginbox .框输入[type=' button ']{背景：红色；color: # fff字体系列： '微软雅黑；}正文#评论loginbox .盒子blueBtn {后台： # 0089 ffborder: 1px固体# 0089FF} #评论user bar { height : 200 pxpadding : 10px文本对齐：中心；} #评论。用户栏userimg { height: 100px宽度： 100像素；边界半径： 50px} #评论。用户栏。用户名{ display : block padd : 10px 0；font-size : 18px颜色：红色；字体粗细：更粗；} #评论评论框{ position:相对；top: 40px宽度： 600像素；padding: 20px 20px 30px 20px背景技术# eeemargin: 0 auto} #评论。评论框loginout { display:块；文本修饰：下划线；颜色：蓝色；光标：指针；} #评论。评论框用户词{大纲：无} #评论命令列表{ padding: 10px } #评论commem list dl { padd : 20px 0；边框-bottom: 1px实心# D2D2D2} #评论命令列表dl dt {左侧浮动：文本对齐：中心；右边距： 15px} #评论commem list dl dt img { height : 50px；宽度： 50px边框半径： 25px} #评论commem list dl DD { padding-bottom : 10px；} #评论命令列表.btbar span { margin-right : 15px；font-size : 10px} #评论命令列表.btbar .红色强烈{ color:红色；余量： 0 3pxfont-weight:正常；光标：指针；} #评论命令列表.用户名{ display : block font-size : 12px；文本对齐：中心；} #评论命令列表.wordsbox textarea { height : 100 px；宽度： 100%;边距-top : 20px；边距-底部： 10pxresize:无；} #评论命令列表.word box span { font-size : 13px；右边距： 15px文本修饰：下划线；颜色：蓝色；光标：指针；} #评论命令列表.单词框输入{右侧浮动：宽度： 80px高度： 28px文本对齐：中心；color: # fff背景：红色；border:无；边界半径： 3px}javascript代码部分

//日期格式化函数约会。原型。format=function(fmt){ var o={ ' M ' : this。getmonth()1，//月份d ': this.getDate()，//日h ': this.getHours()，//小时m ': this.getMinutes()，//分s ': this.getSeconds()，//秒q ' :数学。(这个。getmonth(3)/3)//季度S ' :毫秒()//毫秒};if (/(y )/.测试(fmt)){ fmt=fmt。替换(RegExp .$1，(this.getFullYear()' ').substr(4 - RegExp .$ 1 .长度))；} for(var k in o){ if(new RegExp('(' k ')').测试(fmt)){ fmt=fmt。替换(RegExp .$1，(RegExp .$1.length==1)？(o[k]) : (('00' o[k]).substr((' o[k]).长度)));} }返回fmt} //创建某视频剪辑软件实例var v=new Vue({ el: '#comment '，data: { //原始用户评论信息评论： [{ username: '张三，userimg: 'user02.jpg '，words: '这历史可以啊，不错不错。呵呵!',如： 87，nolike: 53，time : ' 2017-02-17 09:15:25 ' }，{ username: '李四，userimg: 'user01.jpg '，words: '吃饭去了啊。呵呵！如： 23，nolike: 63，time : ' 2017-3-27 10:12:34 ' }，{ username: '王五，userimg: 'user03.jpg '，words: '这评论可以。呵呵!',如： 27，nolike: 33，time : ' 2017-04-02 03:26:54 ' }]，//原始用户信息用户： [{ username: '张山，密码： '123456 ',用户： 'user.jpg '，单词： '世界那么大我想去看看}，{ 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:函数(){文档。getelementbyid('登录').reset()；this . loginstatus=true this . registerstatus=false }，//点击注册showregister:函数(){文档。getelementbyid(' register ').reset()；this . loginstatus=false this . registerstatus=true }，//退出登录loginout:函数(){ //清空当前用户数据这个。当前用户。用户名=' '；这个。当前用户。单词=' '；这个。当前用户。用户img=警报('退出成功！');this.userbarStatus=false//登录或注册入口显示this.lrBtnStatus=true}，//登录遮罩层点击事件登录点击：函数(){ this.loginStatus=false}，//注册遮罩层点击事件registerboxClick:函数(){ this.registerStatus=false}，//点击登录或注册框阻止事件冒泡stopProp:函数(e){ e=e | |事件；e . stopperpagation()；}, //点赞比如：函数（索引){ this.comments[index].喜欢；}, //点踩不像：函数（索引){ this.comments[index].nolike}，//登录login:函数(){ var username=$(' .loginbox ').查找('。用户名')。val()；//获取用户名var psw=$(' .loginbox ').查找('。《公共服务宪章》).val() //获取密码定义变量标志=falsefor (var i=0，len=this。用户。长度；我透镜；i ) { //判断用户名密码是否正确if (this.users[i].username===username this。用户1 .password===PSW){ flag=true；警报('登录成功！');//用户登录框消失this.loginStatus=false//用户登录信息显示this.userbarStatus=true//设置用户栏信息这个。当前用户。用户名=这个。用户.用户名；这个。当前用户。单词=这个。用户.文字；这个。当前用户。用户img=这个。用户.userimg//登录或注册入口消失this.lrBtnStatus=false打破；} } if(！标志){ alert('输入的账号或密码不正确！');document.getElementById('login ').reset()；} }, //注册注册：函数(){ var obj={ }；//创建用户账号密码容器定义变量标志=falsevar username=$(' .registerbox ').查找('。用户名')。val()；//获取用户名var psw=$(' .registerbox ').查找('。《公共服务宪章》).val() //获取密码//判断用户名是否存在对于(var i=0，len=this。用户。长度；我透镜；i ) { if (this.users[i].用户名===用户名){ flag=true警报('该用户名已经被注册！');打破；} } if(！标志){ if(用户名==' ' | | PSW==' '){ alert('账号和密码不能为空！');} else { var randomNum=math。地板(数学。random()* 5)1；//随机生成头像定义变量随机化mg='user0' randomNum ' .jpg '；obj.username=用户名；obj.password=pswobj.words='系统默认标语。

obj.userimg=随机化；//添加用户信息到用户列表这个。用户。推送(obj)；警报('注册成功!');//设置用户信息栏显示this.userbarStatus=true//设置用户栏信息这个。当前用户。用户名=obj。用户名；这个。当前用户。单词=obj。文字；这个。当前用户。用户img=obj。用户img//登录或注册入口消失this.lrBtnStatus=false//重置表单数据文件。getelementbyid(' register ').reset()；//注册框消失this.registerStatus=false} } }，//编辑用户心情编辑用户词：函数(){ var wordsObj=$(' .评论框').查找('。用户词')；var edit=WordObj。attr('内容可编辑')；//获取元素的H5可编辑属性if (edit=='false') { //打开可编辑功能wordsObj.attr('contenteditable '，' true ')；} else { for (var i=0，len=this。用户。长度；我透镜；i ) { //查找对应用户名if (this.users[i].username===这个。当前用户。用户名){//改变用户信息里面的话数据this.currentUser.words=$(' .commentbox ').查找('。用户词').text()；这个。用户1 .单词=这个。当前用户。文字；//关闭可编辑功能wordsObj.attr('contenteditable '，' false ')；警报('保存成功!');} } } }, //点击提交评论子组件：函数(){ if(！this.userbarStatus) { alert('登录之后才可以评论!');this . loginstatus=true } else { if($(').单词框文本区域')。val()=='') { alert('请先填写评论内容!');} else { var obj={ }//评论信息对象的容器物体。用户名=这个。当前用户。用户名；物体。用户img=这个。当前用户。用户imgobj.words=$(' .单词框文本区域')。val()；物体。like=0；物体。no like=0；时间=新日期()。格式(' yyyy-MM-DD hh :MM :s ')；//将评论信息压入评论信息列表这个。评论。推送(obj)；警报('评论成功!');$('.单词框文本区域')。val(" ")；} } } }});开源代码库效果在线预览

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

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