技術選型：vue+element-ui+axios+webpack

1.頁面的基本結構

1. <div class="login-wrap">
2. <div class="ms-title">登錄頁面</div>
3. <div class="ms-login">
4. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
5. <el-form-item prop="username
   ">
6. <el-input v-model="ruleForm.username" placeholder="用戶名"></el-input>
7. </el-form-item>
8. <el-form-item prop="password">
9. <el-input type="password" placeholder="密碼" v-model="ruleForm.password" @keyup.enter.native="submitForm(‘ruleForm‘)
   "></el-input>
10. </el-form-item>
11. <!-- `checked` 為 true 或 false -->
12. <el-checkbox v-model="checked">記住密碼</el-checkbox>
13. <br>
14. <br>
15. <div class="login-btn">
16. <el-button type="primary
    " @click="submitForm(‘ruleForm‘)">登錄</el-button>
17. </div>
18. </el-form>
19. </div>
20. </div>

2.用mockjs模擬後端接口

1. import Mock from ‘mockjs‘; //es6語法引入mock模塊
3. export default Mock.mock(‘http://test.advance.ai/login‘, { //輸出數據
5. ‘username‘: ‘17610603706‘,
7. ‘password‘: ‘123456‘
9. //還可以自定義其他數據
10. });

3.在created生命周期函數裏邊請求後端數據

1. //data和method已經初始化，DOM還沒有渲染出來，適合請求數據
2. created(){
3. //請求模擬的後端地址，返回用戶名和密碼
4. axios.get(‘http://test.advance.ai/login‘)
5. .then(res => {
6. if(res){
7. console.log(res.data.username);
8. this.loginName=res.data.username;
9. this.loginPassword=res.data.password;
10. }
11. })
12. },

表單驗證,手機號要寫正則表達式驗證

1. rules: {
2. username: [{
3. required: true,
4. trigger: ‘blur‘,
5. validator: validPhone //手機號校驗規則
6. }],
7. password: [{
8. required: true,
9. message: ‘請輸入密碼‘,
10. trigger: ‘blur‘
11. }]
12. }

手機號正則表達式驗證，validPhone變量

1. //校驗手機號
2. var validPhone=(rule, value,callback)=>{
3. if (!value){
4. callback(new Error(‘請輸入電話號碼‘))
5. }else if (!isvalidPhone(value)){
6. callback(new Error(‘請輸入正確的11位手機號碼‘))
7. }else {
8. callback()
9. }
10. }
11. function isvalidPhone(str) {
12. //驗證手機號的正則表達式
13. const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
14. return reg.test(str)
15. }

4.登錄事件，登錄之前先驗證表單

1. submitForm(formName) {
2. const self = this;
3. self.$refs[formName].validate((valid) => {
4. if (valid) {
5. //判斷復選框是否被勾選 勾選則調用配置cookie方法
6. if (self.checked == true) {
7. console.log("checked == true");
8. //傳入賬號名，密碼，和保存天數3個參數
9. self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
10. }else {
11. console.log("清空Cookie");
12. //清空Cookie
13. self.clearCookie();
14. }
15. if(self.loginName==self.ruleForm.username&&self.loginPassword==self.ruleForm.password){
16. console.log("登陸成功");
17. alert("登錄成功");
18. }else{
19. alert("登錄失敗，請重新登錄");
20. }
22. } else {
23. console.log(‘error submit!!‘);
24. return false;
25. }
26. });
27. },

5.設置和獲取cookie

1. //設置cookie
2. setCookie(c_name, c_pwd, exdays) {
3. var exdate = new Date(); //獲取時間
4. exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數
5. //字符串拼接cookie
6. window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
7. window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
8. },
9. //讀取cookie
10. getCookie: function() {
11. if (document.cookie.length > 0) {
12. var arr = document.cookie.split(‘; ‘); //這裏顯示的格式需要切割一下
13. for (var i = 0; i < arr.length; i++) {
14. var arr2 = arr[i].split(‘=‘); //再次切割
15. //判斷查找相對應的值
16. if (arr2[0] == ‘userName‘) {
17. this.ruleForm.username = arr2[1]; //保存到保存數據的地方
18. } else if (arr2[0] == ‘userPwd‘) {
19. this.ruleForm.password = arr2[1];
20. }
21. }
22. }
23. },

Vue登錄頁面