登录功能

.env

@@ -1 +1 @@
-VUE_APP_STATIC_DIR=static
+VUE_APP_STATIC_DIR=static

.env.dev

@@ -1,3 +1,4 @@
 CLI_MODE=dev
 NODE_ENV=development
 PUBLIC_PATH=/
+VUE_APP_API_PREFIX=http://192.168.20.55:8043

.env.test

@@ -1,3 +1,4 @@
 CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=/display/
+VUE_APP_API_PREFIX=http://192.168.20.55:8043

package-lock.json

@@ -8,6 +8,7 @@
       "name": "code",
       "version": "0.1.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "axios": "^1.1.3",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.6",
@@ -3306,6 +3307,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -14104,6 +14110,11 @@
       "dev": true,
       "requires": {}
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.6",

src/api.js

@@ -1,4 +1,25 @@
 import axios from "axios"
+import { encodeStr } from "@/utils/pass.js"
+import { Base64 } from "js-base64"
+import store from "@/store/index.js"
 
 export default {
+  async login(userName, password) {
+    const pwdEncrypted = encodeStr(Base64.encode(password))
+    const res = await axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_API_PREFIX}/api/admin/login`,
+      data: {
+        userName: userName,
+        password: pwdEncrypted,
+      },
+    })
+    if (res.data.code !== 0) {
+      throw (`登录失败：${res.data.msg}`)
+    } else {
+      store.commit('setLoginStatus', true)
+      store.commit('setToken', res.data.data.token)
+      store.commit('setUserInfo', res.data.data.user)
+    }
+  }
 }

src/main.js

@@ -10,6 +10,7 @@ import Viewer from 'v-viewer'
 import clickOutside from "@/directives/v-click-outside.js"
 
 import "@/assets/style/my-reset.css"
+import 'animate.css'
 
 Vue.use(Viewer, {
   defaultOptions: {

src/store/index.js

@@ -6,6 +6,8 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     loginStatus: false,
+    token: '',
+    userInfo: {},
   },
   getters: {
   },
@@ -13,6 +15,12 @@ export default new Vuex.Store({
     setLoginStatus(state, value) {
       state.loginStatus = value
     },
+    setToken(state, value) {
+      state.token = value
+    },
+    setUserInfo(state, value) {
+      state.userInfo = value
+    }
   },
   actions: {
   },

src/views/gui/Login.vue

@@ -11,30 +11,41 @@
 
       <div class="form-item">
         <img
-          class=""
+          :class="{
+            animate__animated: ifTipUserName,
+            animate__headShake: ifTipUserName
+          }"
           src="@/assets/images/username-icon.png"
           alt=""
           draggable="false"
         >
         <input
+          v-model.trim="userName"
           type="text"
           placeholder="请输入账号..."
         >
       </div>
       <div class="form-item">
         <img
-          class=""
+          :class="{
+            animate__animated: ifTipPassword,
+            animate__headShake: ifTipPassword
+          }"
           src="@/assets/images/password-icon.png"
           alt=""
           draggable="false"
         >
         <input
-          type="text"
+          v-model="password"
+          type="password"
           placeholder="请输入密码..."
         >
       </div>
 
-      <button class="login">
+      <button
+        class="login"
+        @click="submit"
+      >
         <div class="text-wrapper">
           登录
         </div>
@@ -59,6 +70,12 @@ export default {
       yingZaoZhuanJiaNum: 56,
       liShiDaRen: 424,
       huShuShiZhe: 32,
+
+      userName: '',
+      password: '',
+
+      ifTipUserName: false,
+      ifTipPassword: false,
     }
   },
   mounted() {
@@ -66,6 +83,30 @@ export default {
   },
   beforeDestroy() {
     window.ifPreventKeyOperationInScene = false
+  },
+  methods: {
+    // todo: debounce
+    submit: globalUtils.throttle(function() {
+      if (this.userName.length === 0) {
+        this.ifTipUserName = true
+        setTimeout(() => {
+          this.ifTipUserName = false
+        }, 1000)
+        return
+      }
+      if (this.password.length === 0) {
+        this.ifTipPassword = true
+        setTimeout(() => {
+          this.ifTipPassword = false
+        }, 1000)
+        return
+      }
+      globalApi.login(this.userName, this.password).then((res) => {
+        this.$router.go(-1)
+      }).catch(error => {
+        window.alert('登录失败')
+      })
+    }, 1500),
   }
 }
 </script>

yarn.lock

@@ -1814,6 +1814,11 @@
     "require-from-string" "^2.0.2"
     "uri-js" "^4.2.2"
 
+"animate.css@^4.1.1":
+  "integrity" "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+  "resolved" "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz"
+  "version" "4.1.1"
+
 "ansi-colors@^4.1.1":
   "integrity" "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="
   "resolved" "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz"