完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5

src/pages/login/login.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="login-page">
+    <div class="layer bg" id="login"></div>
+    <div class="layer flex-center">
+      <!-- logo部分 -->
+      <div class="logo-group">
+        <img src="./image/logo.png" alt="logo">
+      </div>
+      <!-- 表单部分 -->
+      <div class="form-group">
+        <el-card>
+          <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin">
+            <el-form-item  prop="username">
+              <el-input type="text" v-model="formLogin.username" placeholder="用户名">
+                <i slot="prepend" class="fa fa-user-circle-o"></i>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input type="password" v-model="formLogin.password" placeholder="密码">
+                <i slot="prepend" class="fa fa-keyboard-o"></i>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code">
+              <el-input type="text" v-model="formLogin.code" placeholder="- - - -">
+                <template slot="prepend">验证码</template>
+                <template slot="append">
+                  <img class="login-code" src="./image/login-code.png">
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-button @click="submit" type="primary" class="button-login">登录</el-button>
+          </el-form>
+        </el-card>
+      </div>
+      <!-- 帮助按钮 -->
+      <el-button type="info" class="button-help">
+        需要帮助
+        <i class="fa fa-question-circle"></i>
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+require('particles.js')
+// 配置地址
+// https://vincentgarreau.com/particles.js/#default
+import config from './config/default'
+import Cookies from 'js-cookie'
+import { mapMutations } from 'vuex'
+
+export default {
+  data () {
+    return {
+      formLogin: {
+        username: 'admin',
+        password: 'admin',
+        code: 'v9am'
+      },
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入验证码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted () {
+    // 初始化例子插件
+    particlesJS('login', config)
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminUsernameSet'
+    ]),
+    // 提交登陆信息
+    submit () {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          // 开始请求登录接口
+          this.$axios({
+            method: 'post',
+            url: '/login',
+            data: {
+              username: this.formLogin.username,
+              password: this.formLogin.password
+            }
+          })
+            .then(res => {
+              console.group('登陆结果')
+              console.log('res: ', res)
+              console.groupEnd()
+              // cookie 一天的有效期
+              const setting = {
+                expires: 1
+              }
+              // 设置 cookie 一定要存 uuid 和 token 两个 cookie，整个系统依赖这两个数据进行校验和存储
+              Cookies.set('uuid', res.uuid, setting)
+              Cookies.set('token', res.token, setting)
+              // 设置 vuex
+              this.d2adminUsernameSet(res.name)
+              // 跳转路由
+              this.$router.push({
+                name: 'index'
+              })
+            })
+            .catch(err => {
+              console.group('登陆结果')
+              console.log('err: ', err)
+              console.groupEnd()
+            })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
+