add register and improve login

assets/css/login.scss

@@ -11,12 +11,14 @@
 
 .login-card{
   width: 30%;
+  float: right;
   top: 100px;
-  position: absolute;
+  position: relative;
   right: 20%;
+  margin-bottom: 100px;
 
   &__title{
-    color: $select-color;
+    color: $focus-color;
     text-align: center;
   }
 
@@ -27,27 +29,59 @@
   }
 
   &__short-item{
-    width: 45%;
+    width: 42%;
     margin-top: 20px;
     margin-left: 10%;
     display: inline-block;
   }
 
-  &__link{
+  &__bottom{
     margin-top: 10px;
     margin-bottom: 10px;
-    color: $hover-color;
     width: 80%;
     margin-left: 10%;
     text-align: center;
+
+    & a{
+      text-decoration: none;
+      &:hover{
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__link{
+    color: $focus-color;
   }
 
   &__canvas{
-    margin-left: 5%;
-    width: 30%;
+    float: right;
+    width: 33%;
+    margin-right: 10%;
     display: inline-block;
     vertical-align: top;
     margin-top: 20px;
+    text-align: right;
   }
 
+  &__right-link{
+    float: right;
+    color: $common-color;
+
+    &:hover{
+      color: $focus-color;
+    }
+  }
+
+  &__right-button{
+    float: right;
+    padding-left: auto;
+    padding-right: auto;
+    margin-right: 10%;
+    width: 35%;
+    text-align: center;
+    margin-top: 20px;
+  }
+
+
 }

assets/css/main.scss

@@ -3,8 +3,7 @@
 $common-color: #333;
 $sub-color: #666;
 $note-color: #999;
-$select-color: #409eff;
-$hover-color: #bb61ff;
+$focus-color: #409eff;
 
 html{height:100%}
 
@@ -23,6 +22,10 @@ body{
   min-height: 100vh;
 }
 
+.clear{
+  clear: both;
+  height: 100px;
+}
 //
 //h1 h2 h3{
 //  color: #333;

components/Identify.vue

@@ -125,6 +125,9 @@
     },
     mounted () {
       this.drawPic()
+    },
+    updated () {
+      this.drawPic()
     }
   }
 </script>

pages/login.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="page-container login-container">
-      <el-card class="login-card">
-        <h2 class="login-card__title login-card__item">登 录</h2>
-        <el-input v-model="phone" placeholder="请输入手机号" class="login-card__item"></el-input>
-        <el-input v-model="password" placeholder="请输入密码" class="login-card__item"></el-input>
-        <el-input v-model="password" placeholder="请输入验证码" class="login-card__short-item"></el-input>
-        <div class="login-card__canvas" @click="refreshCode">
-          <SIdentify :identifyCode="identifyCode"></SIdentify>
-        </div>
-        <el-button type="primary" class="login-card__item" round>登 录</el-button>
-        <div class="login-card__link"><router-link to="/register">立即注册</router-link></div>
-      </el-card>
+    <el-card class="login-card">
+      <h2 class="login-card__title login-card__item">登 录</h2>
+      <el-input v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
+      <el-input v-model="password" placeholder="请输入密码" maxlength="20" class="login-card__item"></el-input>
+      <el-input v-model="iCode" placeholder="请输入验证码" class="login-card__short-item"></el-input>
+
+      <div class="login-card__canvas" @click="refreshCode" ref="canvas">
+        <SIdentify :identifyCode="identifyCode" :contentWidth="canvasWidth"></SIdentify>
+      </div>
+      <div class="login-card__item">
+        <el-checkbox v-model="rememberPassword"></el-checkbox>  记住密码
+        <router-link to="/resetPassword" class="login-card__right-link">找回密码</router-link>
+      </div>
+      <el-button type="primary" class="login-card__item" :loading="loading" round>登 录</el-button>
+      <div class="login-card__bottom"><router-link to="/register" class="login-card__link">立即注册</router-link></div>
+    </el-card>
+    <div class="clear"></div>
   </div>
 </template>
 
@@ -25,7 +31,11 @@
         phone: '',
         password: '',
         identifyCodes: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'],
-        identifyCode: ''
+        identifyCode: '',
+        iCode: '',
+        rememberPassword: false,
+        loading: false,
+        canvasWidth: 0,
       }
     },
     components: {
@@ -34,6 +44,16 @@
     mounted(){
       this.identifyCode = "";
       this.makeCode(this.identifyCodes, 4);
+      this.canvasWidth = this.$refs.canvas.clientWidth;
+      if(localStorage.phone){
+        localStorage.phone = this.phone;
+      }
+      if(localStorage.password){
+        localStorage.password = this.password;
+      }
+      if(localStorage.rememberPassword){
+        localStorage.rememberPassword = this.rememberPassword;
+      }
     },
     methods: {
       randomNum(min, max) {
@@ -51,22 +71,34 @@
         }
       },
       login() {
+        this.loading = true;
         this.$api.$post('/user/login', {
           phone: this.phone,
           password: this.password
         }).then((res) =>
           {
             if(res.code === 0){
-              console.log(JSON.stringify(res.data));
+              localStorage.phone=this.phone;
+              if(this.rememberPassword){
+                localStorage.password = this.password;
+                localStorage.rememberPassword = this.rememberPassword;
+              }else{
+                localStorage.removeItem("password");
+              }
+
               this.$store.commit("saveUser", res.data.user);
               this.$store.commit("saveToken", res.data.token);
-              console.log(this.$store.state.token, this.$store.state.user);
             }else{
-              console.log(res.message);
+              this.$message({
+                showClose: true,
+                message: res.message,
+                type: 'error'
+              });
             }
 
           }
-        )
+        );
+        this.loading = false;
       },
     }
   };

pages/register.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="page-container login-container">
+    <el-card class="login-card">
+      <h2 class="login-card__title login-card__item">注 册</h2>
+      <el-input v-model="name" placeholder="请输入昵称, 长度为1-10个字符" maxlength="10" class="login-card__item"></el-input>
+      <el-input v-model="password" placeholder="请输入密码，长度为6-20个字符" maxlength="20" class="login-card__item"></el-input>
+      <el-input v-model="passwordConfirm" placeholder="请再次输入密码" maxlength="20" class="login-card__item"></el-input>
+      <el-input v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
+      <el-input v-model="identifyCode" placeholder="请输入验证码" maxlength="6" class="login-card__short-item"></el-input>
+      <el-button :disabled="disabled" @click="sendMessage" class="login-card__right-button">{{buttonText}}</el-button>
+      <el-button type="primary" class="login-card__item" round>注 册</el-button>
+      <div class="login-card__bottom"><router-link to="/login" class="login-card__link">已有账号？前往登录</router-link></div>
+    </el-card>
+    <div class="clear"></div>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    name: "register",
+    data(){
+      return{
+        name: '',
+        phone: '',
+        password: '',
+        identifyCode: '',
+        passwordConfirm: '',
+        buttonText: '获取验证码',
+        disabled: false
+      }
+    },
+    methods: {
+      sendMessage(){
+        this.disabled = true;
+        let time=60;
+        let myScroll = setInterval(() => {
+          time--;
+          if(time>=0) {
+            this.buttonText = time + "s后可重发";
+          }else{
+            this.buttonText = '获取验证码';
+            this.disabled = false;  //倒计时结束能够重新点击发送的按钮
+            clearTimeout(myScroll);    //清除定时器
+            time = 60;   //设置循环重新开始条件
+          }
+        }, 1000);
+        this.$axios.post("/user/sendMessage", {"phone":this.phone}).then(res => {
+          if(res.code === 0){
+            this.$message({
+              showClose: true,
+              message: '发送成功',
+              type: 'success'
+            });
+          }else{
+            this.$message({
+              showClose: true,
+              message: res.message,
+              type: 'error'
+            });
+          }
+        });
+      },
+      register() {
+        this.$api.$post('/user/register', {
+          phone: this.phone,
+          password: this.password
+        }).then((res) =>
+          {
+            if(res.code === 0){
+              localStorage.phone=this.phone;
+              if(this.rememberPassword){
+                localStorage.password=this.password;
+              }else{
+
+              }
+
+              this.$store.commit("saveUser", res.data.user);
+              this.$store.commit("saveToken", res.data.token);
+              console.log(this.$store.state.token, this.$store.state.user);
+            }else{
+              console.log(res.message);
+            }
+
+          }
+        )
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~/assets/css/login.scss';
+</style>

plugins/api.js

@@ -9,6 +9,18 @@ export default function ({ $axios, redirect, app, store }, inject) {
 
   $axios.setHeader('Content-Type', 'application/json');
 
+  $axios.onResponse(response =>{
+    if(response.status === 401){
+      this.$router.push('/login');
+      this.$message({
+        showClose: true,
+        message: '未授权，请先登录',
+        type: 'warning'
+      });
+    }
+
+  });
+
   // Create a custom axios instance
   const api = $axios.create({
     // headers: {