首页
所有分类
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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
List the Codec Files on a Computer
Jun 18 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 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
本地化存储(1) Set接口(1) Vue(10) 自定义组件(1) KVM(1) Jmerte(1) click(1) Storage(1) HashSet集合(1) persistedstate(1)
You might like
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
德国购买门票网站：ADticket.de
2019/10/31 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
农村婚礼证婚词
2014/01/10 职场文书
公司外出活动方案
2014/08/14 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python