首頁 > 開發者 > JavaScript
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" 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/
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
