首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 30, 2020

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

登入后：

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

登入前：

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

登录框:

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

注册框：

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: "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实现用户评论、登录、注册、及修改信息功能

- Author -

codingNoob

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
javascript preload&amp;lazy load
May 13 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
微信小程序实现星级评价
Nov 20 Javascript
Vue.js tab实现选项卡切换
May 16 #Javascript
Vue.js手风琴菜单组件开发实例
May 16 #Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
axios(1) 高动态范围(1) shell脚本(1) HDR(1) 数据加密(1) kafka(2) 连接器(1) 曝光融合(1) InputStream(1) Vue3(1)
You might like
php反弹shell实现代码
2009/04/22 PHP
php中大括号作用介绍
2012/03/22 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
php使用lua+redis实现限流，计数器模式，令牌桶模式
2019/04/04 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
大学本科生的个人自我评价
2013/12/09 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
80后创业总结的9条职场用人思想，记得收藏
2019/08/13 职场文书
我去timi了，一起去timi是什么意思？
2022/04/13 杂记