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" rel="external nofollow" />
  <link rel="stylesheet" href="css/index.css" rel="external nofollow" />
  <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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件父与子通信详解（一）

    本文实例为大家分享了vue组件父与子通信的具体代码,供大家参考,具体内容如下 一.组件间通信(父组件    -->  子组件) 步骤: ①父组件在调用子组件 传值 <child-component myValue="123"> </child-component> ②在子组件中 获取父组件传来的值 Vue.component('child-component',{ props:['myValue'], template:'' }) 代码1: <!do

  • Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码

    根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├

  • 关于在vue-cli中使用微信自动登录和分享的实例

    (以下所有接口由后台提供) 一.微信自动登录 //定义事件 methods:{ //判断是否微信登陆 是不是微信浏览器 isWeiXin() { let ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mo

  • vue+axios实现登录拦截的实例代码

    一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问Demo

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • Vue中保存用户登录状态实例代码

    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

  • Vue利用路由钩子token过期后跳转到登录页的实例

    在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

  • Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用. 这个应用始终遗留了一个问题,Web App在访问REST API时,没有经过任何认证,这使得服务端的REST API是不安全的,只要有人知道api地址,就可以调用API对服务端的资源进行修改和删除. 今天我们就来探讨一下如何结合Web API来限制资源的访问. 本文的主要内容如下: 介绍传统的Web应用和基于REST服务的Web应用 介绍OAuth认证流程和

随机推荐