全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

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()">退出账号&nbsp;&nbsp;<i class="icon-style icon-signout"></i></span>
    <span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md">&nbsp;</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  # 评论  # 登录  # 注册  # js实现登录与注册界面  # JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)  # JSP实现用户登录、注册和退出功能  # js实现登录注册框手机号和验证码校验（前端部分）  # 原生js验证简洁注册登录页面  # JSP+MySQL实现网站的登录与注册小案例  # 使用JSP实现简单的用户登录注册页面示例代码解析  # Servlet+JavaBean+JSP打造Java Web注册与登录功能  # node.js实现登录注册页面  # js实现本地持久化存储登录注册  # 请输入  # 微软  # 用户登录  # 去了  # 请先  # 才可以  # 雨过天晴  # 登入  # 表单  # 不正确  # 用户注册  # 大家多多  # 是否存在  # 清空  # 为空  # 用户列表  # 是否正确  # 该用  # 注册成功  # 李四 


相关文章： 做企业网站制作流程,企业网站制作基本流程有哪些？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  ,网页ppt怎么弄成自己的ppt？  建站之星好吗？新手能否轻松上手建站？  c# Task.ConfigureAwait(true) 在什么场景下是必须的  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  如何快速重置建站主机并恢复默认配置？  建站主机服务器选购指南：轻量应用与VPS配置解析  小程序网站制作需要准备什么资料,如何制作小程序？  用v-html解决Vue.js渲染中html标签不被解析的问题  外贸公司网站制作,外贸网站建设一般有哪些步骤？  如何获取上海专业网站定制建站电话？  昆明网站制作哪家好,昆明公租房申请网上登录入口？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  如何选择香港主机高效搭建外贸独立站？  如何制作网站标识牌,动态网站如何制作（教程）？  平台云上自主建站：模板化设计与智能工具打造高效网站  建站之星如何防范黑客攻击与数据泄露？  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  建站之星如何实现PC+手机+微信网站五合一建站？  如何实现建站之星域名转发设置？  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  潍坊网站制作公司有哪些,潍坊哪家招聘网站好？  如何用花生壳三步快速搭建专属网站？  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  一键网站制作软件,义乌购一件代发流程？  建站之星导航配置指南：自助建站与SEO优化全解析  公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  小型网站建站如何选择虚拟主机？  网站制作的步骤包括,正确网址格式怎么写？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  实例解析angularjs的filter过滤器  如何在景安服务器上快速搭建个人网站？  建站之星logo尺寸如何设置最合适？  已有域名和空间，如何快速搭建网站？  如何通过万网虚拟主机快速搭建网站？  如何在腾讯云免费申请建站？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  北京制作网站的公司,北京铁路集团官方网站？  如何在香港免费服务器上快速搭建网站？  如何在Golang中指定模块版本_使用go.mod控制版本号  如何挑选高效建站主机与优质域名？  建站主机选择指南：服务器配置与SEO优化实战技巧  如何快速搭建虚拟主机网站？新手必看指南  如何访问已购建站主机并解决登录问题？  西安专业网站制作公司有哪些,陕西省建行官方网站？  制作销售网站教学视频,销售网站有哪些？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  如何在云虚拟主机上快速搭建个人网站？  如何选择服务器才能高效搭建专属网站？ 

返回目录 在线咨询
上一篇：搬瓦工VPS上部署WordPress等CMS系统时应注意哪些事项？
下一篇：如何在Golang中减少内存分配次数

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服