首页
所有分类
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获取IP、MAC和主机名的五种方法
Nov 14 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript模拟命名空间
Apr 17 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）
Jan 12 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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
俄罗斯购物网站(137) 日本购物网站(72) 德国购物网站(227) 墨西哥购物网站(16) 印度购物网站(45) 韩国购物网站(27) 西班牙购物网站(115) 瑞士购物网站(28) 马来西亚购物网站(41) 埃及购物网站(2)
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构
2015/11/19 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
学习Vue组件实例
2018/04/28 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
wxPython事件驱动实例详解
2014/09/28 Python
简述Python中的进程、线程、协程
2016/03/18 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
读书心得体会
2013/12/28 职场文书
行政助理工作职责范本
2014/03/04 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
党员个人对照检查材料
2014/10/01 职场文书
人代会简报
2015/07/21 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL