站长资源网络编程
vue.js实现用户评论、登录、注册、及修改信息功能
简介vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：登入后：登入前： 登录框: 注册框：html代码部分：index</title</div>
<div class="news_infos"><div id="MyContent"><p>vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：</p>
<p><strong>登入后：</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2017051611484019.png');"><img src="/UploadFiles/2021-04-02/2017051611484019.png" alt="vue.js实现用户评论、登录、注册、及修改信息功能" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p><strong>登入前：</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2017051611484120.png');"><img src="/UploadFiles/2021-04-02/2017051611484120.png" alt="vue.js实现用户评论、登录、注册、及修改信息功能" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> </p>
<p><strong>登录框:</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2017051611484121.png');"><img src="/UploadFiles/2021-04-02/2017051611484121.png" alt="vue.js实现用户评论、登录、注册、及修改信息功能" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> </p>
<p><strong>注册框：</strong></p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/2017051611484122.png');"><img src="/UploadFiles/2021-04-02/2017051611484122.png" alt="vue.js实现用户评论、登录、注册、及修改信息功能" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>html代码部分：</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!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="/UploadFiles/2021-04-02/vue.min.js">
<p>css代码部分：</p>
<div class="htmlcode">
<pre class="brush: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;
}
</pre>
</div>
<p>javascript代码部分</p>
<div class="htmlcode">
<pre class="brush:js;">
//日期格式化函数
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) "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("");
}
}
}
}
});
</pre>
</div>
<p>github效果在线预览</p>
<p>仓库地址：https://github.com/zhongyoucong/vuejs/</p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/98867.html" title="javascript 中iframe高度自适应（同域）实例详解">javascript 中iframe高度自适应（同域）实例详解</a></p>
<p>下一篇：<a href="/3g/1/98869.html" title="Vue.js tab实现选项卡切换">Vue.js tab实现选项卡切换</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604673.html"><ul>微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键<br><br>几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。<br>在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。</ul></a></div>
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>