feat: axios loading & message

frontend/src/main.js

@@ -1,15 +1,17 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import store from './stores'
 
 import 'normalize.css'
 import '@/assets/base.css'
+import 'element-plus/theme-chalk/el-message.css'
+import 'element-plus/theme-chalk/el-loading.css'
 
 const app = createApp(App)
 
-app.use(createPinia())
+app.use(store)
 app.use(router)
 
 app.mount('#app')

frontend/src/router/index.js

@@ -2,6 +2,10 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 
 const routes = [
+  {
+    path: '/',
+    redirect: '/login'
+  },
   {
     path: '/login',
     component: () => import('@/views/login.vue')

frontend/src/service/request.js

@@ -1,34 +1,35 @@
 import axios from "axios";
-import {message, ElLoading} from 'element-plus'
-import userStore from '@/stores/user'
+import { ElMessage, ElLoading } from 'element-plus'
+import {userStore} from '@/stores/user'
 
-
-const store = userStore()
+let loading
 
 export default (config) => {
 
     const instance = axios.create({
         baseURL: import.meta.env.VITE_BASE_URL,
-        timeout: 5000,
+        timeout: 10000,
     })
 
     instance.interceptors.request.use(config => {
-        ElLoading.service({
-            title: '请求中.'
+        loading = ElLoading.service({
+            lock: true,
+            text: '请求中...',
+            background: 'rabg(0,0,0,0.7)'
         })
-        config.headers.Authorization = store.accessToken
+        config.headers.Authorization = userStore().accessToken
         return config
     })
 
     instance.interceptors.response.use(res => {
-        if (res.data.code !== 20000 ){
-            message.error(res.data.msg)
+        if (res.data.code !== 200 ){
+            ElMessage.error(res.data.msg)
         }
-        ElLoading.close()
+        loading.close()
         return res.data
     }, err => {
-        message.error(err)
-        ElLoading.close()
+        ElMessage.error(err)
+        loading.close()
         return Promise.reject(err)
     })
 

frontend/src/service/user.js

@@ -0,0 +1,9 @@
+import request from "./request";
+
+export function login(data) {
+  return request({
+    url: "/login",
+    method: 'post',
+    data
+  });
+}

frontend/src/stores/index.js

@@ -0,0 +1,8 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+
+export default pinia

frontend/src/stores/user.js

@@ -1,14 +1,25 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
+import { ElMessage } from 'element-plus'
+import {login} from '@/service/user'
 
 export const userStore = defineStore('user', () => {
-  const info = ref({})
+  const uid = ref(0)
   const token = ref("")
-  const accessToken = computed(() => 'Bearer ' + token)
+  const accessToken = computed(() => 'Bearer ' + token.value)
 
-  return { info, token, accessToken }
+  // 非setup语法时的actions
+  const loginAction = async (data) => {
+    const res = await login(data)
+    token.value = res.data.token
+    uid.value = res.data.id
+    // 弹框提示登录成功
+    ElMessage.success("登录成功.")
+  }
+
+  return { uid, token, accessToken, loginAction }
 }, {
-    persist: true,
+    persist: true, // 解决pinia刷新时数据丢失问题
   })
 
 // export const userStore = defineStore('user',{
@@ -19,5 +30,14 @@ export const userStore = defineStore('user', () => {
 //         accessToken() {
 //             return `Bearer ${this.token}`
 //         }
-//     }
+//     },
+//     actions: {
+//       async loginAction(data){
+//         const res = await login(data)
+//         console.log(res)
+//         this.token = res.data.token
+//         // uid.value = res.data.id
+//       }
+//     },
+//     persist: true
 // })

frontend/src/views/login.vue

@@ -2,6 +2,9 @@
     import { User, Lock } from '@element-plus/icons-vue'
     import {ref,reactive} from 'vue'
 
+    import { userStore } from '@/stores/user';
+
+    const store = userStore()
     // 表单配置
     const rules = {
         username: [
@@ -26,8 +29,8 @@
         if (!formEl) return
         formEl.validate( valid => {
             if (valid) {
-                // 验证通过
-                console.log('submit!')
+                // 验证通过，执行登录逻辑
+                store.loginAction(formData)
             }
         })
     }