动态路由大体实现

QMPlusVuePage/src/view/login/login.vue

@@ -1,35 +1,81 @@
 <template>
-        <el-container class="login-box">
-            <el-header>登录</el-header>
-                <el-main>输入框在这里
-                    <el-button @click="login">
-                        登录
-                    </el-button>
-                </el-main>
-        </el-container>
+  <el-container class="login-box">
+    <el-main>
+      <el-form :model="loginForm" :rules="rules" label-width="100px" ref="loginForm" status-icon>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="loginForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input :type="lock==='lock'?'password':'text'" v-model="loginForm.password">
+            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-button @click="submitForm">登录</el-button>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-import {mapState, mapGetters, mapActions , mapMutations} from 'vuex'
-import {login} from '@/api/user'
+import { mapActions } from 'vuex'
 export default {
-    name:"Login",
-    computed:{
-    ...mapGetters("user",["userInfo"]),
-    ...mapState("user",["token"])
+  name: 'Login',
+  data() {
+    const checkUsername = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const checkPassword = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的密码'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      lock: 'lock',
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      rules: {
+        username: [{ validator: checkUsername, trigger: 'blur' }],
+        password: [{ validator: checkPassword, trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    ...mapActions('user', ['LoginIn']),
+    async login() {
+      await this.LoginIn(this.loginForm)
     },
-    methods: {
-        ...mapActions("user",["AsyncSetUserInfo"]),
-        ...mapMutations("user",["setUserInfo"]),
-        login(){
-            login({userName:"string1",passWord:"string"})
+    async submitForm() {
+      this.$refs.loginForm.validate(async v => {
+        if (v) {
+          await this.login()
+        } else {
+          this.$message({
+            type: 'error',
+            message: '请正确填写登录信息',
+            showClose: true
+          })
+          return false
         }
+      })
     },
+    changeLock() {
+      this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock')
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-    .login-box{
-        background: #409EFF
-    }
+.login-box {
+  background: #409eff;
+}
 </style>

QMPlusVuePage/src/view/login/regist.vue

@@ -1,16 +1,101 @@
 <template>
-    <div>
-        注册
-    </div>
+  <el-container class="login-box">
+    <el-main>
+      <el-form :model="registForm" :rules="rules" label-width="100px" ref="registForm" status-icon>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="registForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input :type="lock==='lock'?'password':'text'" v-model="registForm.password">
+            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="重复密码" prop="rePassword">
+          <el-input :type="lock==='lock'?'password':'text'" v-model="registForm.rePassword">
+            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-button @click="submitForm">注册</el-button>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import { regist } from '@/api/user'
 export default {
-    name:"Regist"
-    
+  name: 'Regist',
+  data() {
+    const ratioPassword = (rule, value, callback) => {
+      if (value != this.registForm.password) {
+        return callback(new Error('两次密码不同'))
+      } else {
+        callback()
+      }
+    }
+    const checkUsername = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const checkPassword = (rule, value, callback) => {
+      if (value.length < 6 || value.length > 12) {
+        return callback(new Error('请输入正确的密码'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      lock: 'lock',
+      registForm: {
+        username: '',
+        password: '',
+        rePassword: ''
+      },
+      rules: {
+        username: [{ validator: checkUsername, trigger: 'blur' }],
+        password: [{ validator: checkPassword, trigger: 'blur' }],
+        rePassword: [{ validator: ratioPassword, trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    ...mapActions('user', ['LoginIn']),
+    async submitForm() {
+      this.$refs.registForm.validate(async v => {
+        if (v) {
+          const res = await regist(this.registForm)
+          if (res.success) {
+            this.$message({
+              type: 'success',
+              message: '注册成功',
+              showClose: true
+            })
+            await this.LoginIn(this.registForm)
+          }
+        } else {
+          this.$message({
+            type: 'error',
+            message: '请正确填写注册信息',
+            showClose: true
+          })
+          return false
+        }
+      })
+    },
+    changeLock() {
+      this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock')
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.login-box {
+  background: #409eff;
+}
 </style>