仓库地址：
https://github.com/zhongyoucong/vuejs/
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("");
}
}
}
}
});
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
