首页
所有分类
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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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
pycryto(1) 公共键(1) 数据加密(1) key(1) kafka(2) 有序排列(1) 曝光融合(1) HDR(1) 连接器(1) shell脚本(1)
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
数理公式，也可以这么唯美
2021/03/10 无线电
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
详解vue 单页应用（spa）前端路由实现原理
2018/04/04 Javascript
JavaScript数组，JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python切片用法实例教程
2014/09/08 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python简单商城购物车实例代码
2018/03/15 Python
python实现支付宝当面付（扫码支付）功能
2018/05/30 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
怀俄明州飞钓：Platte River Fly Shop
2017/12/28 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
个人评语大全
2014/05/04 职场文书
技术员岗位职责
2015/02/04 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
Python实现信息管理系统
2022/06/05 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers