快速选择用户登陆

Former-commit-id: 610c12b2a8679bfcad918e3d24d04a1a6af41c4c [formerly 610c12b2a8679bfcad918e3d24d04a1a6af41c4c [formerly 610c12b2a8679bfcad918e3d24d04a1a6af41c4c [formerly 610c12b2a8679bfcad918e3d24d04a1a6af41c4c [formerly cc710028c0810b73facbb1f00ba054da58bd88da [formerly 39767add7846a4a3f27fb79c47d121ceb1d3d6a0]]]]]
Former-commit-id: 740804501e73b47382d505ce1fa24e7bba3beb3b
Former-commit-id: a61192c10d96e687b6fe7ebd5e40e2a2cc816d8b
Former-commit-id: e142163ddd0be72d2de796dc90a54de29e64da4d [formerly 1f32a6afe0a2302808606bcb9c9776e93d4d805b]
Former-commit-id: 2bd41fd483228f0aff6255f5be5b72aa72e4b64e
Former-commit-id: bfd7e5e99f4774d60e8433e4f519d1d44db187ad
Former-commit-id: 8c4f66b40505956019099d80abbdaaa88808b011
Former-commit-id: aa887c968ab01b652512c95dc5b8503f68230c49
Former-commit-id: 0785746511cac0ba75c813f15e5b0914fbd916c1

src/pages/login/page.vue

@@ -0,0 +1,176 @@
+<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" @click="dialogVisible = true">
+        快速选择用户（测试功能）
+      </el-button>
+    </div>
+    <el-dialog
+      title="快速选择用户"
+      :visible.sync="dialogVisible"
+      width="400px">
+      <el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
+        <el-col v-for="(user, index) in users" :key="index" :span="8">
+          <div class="user-btn" @click="handleUserBtnClick(user)">
+            <d2-icon name="user-circle-o"/>
+            <span>{{user.name}}</span>
+          </div>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </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 {
+      // 快速选择用户
+      dialogVisible: false,
+      users: [
+        {
+          name: '管理员',
+          username: 'admin',
+          password: 'admin'
+        },
+        {
+          name: '编辑',
+          username: 'editor',
+          password: 'editor'
+        },
+        {
+          name: '用户',
+          username: 'user',
+          password: 'user'
+        }
+      ],
+      // 表单
+      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([
+      'd2adminUserInfoSet',
+      'd2adminLoginSuccessLoad'
+    ]),
+    /**
+     * @description 接收选择一个用户快速登陆的事件
+     * @param {object} user 用户信息
+     */
+    handleUserBtnClick (user) {
+      this.formLogin.username = user.username
+      this.formLogin.password = user.password
+      this.submit()
+    },
+    /**
+     * @description 提交表单
+     */
+    // 提交登陆信息
+    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 => {
+              // cookie 一天的有效期
+              const setting = {
+                expires: 1
+              }
+              // 设置 cookie 一定要存 uuid 和 token 两个 cookie，整个系统依赖这两个数据进行校验和存储
+              Cookies.set('uuid', res.data.uuid, setting)
+              Cookies.set('token', res.data.token, setting)
+              // 设置 vuex 用户信息
+              this.d2adminUserInfoSet({
+                name: res.data.name
+              })
+              // 用户登陆后从数据库加载一系列的设置
+              this.d2adminLoginSuccessLoad()
+              // 跳转路由
+              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>