引入封装axios

src/api/auth.js

@@ -0,0 +1,30 @@
+
+/**
+ *axios封装使用实例
+ *
+ */
+
+import request from '@/utils/request'
+// 对应request.js export default request 可更改默认的baseURL
+// const api = request.create({ baseURL: 'http://localhost:8081' })
+
+// **全局唯一 Axios 实例**
+// 对应request.js export default (params) => Factory(params)
+// const api = request({ baseURL: 'http://localhost:8080' })
+
+// 示例请求
+// export function login (params) {
+//  return request({
+//    url: '/auth/login',
+//    method: 'post',
+//    data: params
+//  })
+// }
+// 示例请求
+// export const login = (params) => api.post('/auth/login', params)
+// export const login = (params) => request.post('/auth/login', params)
+
+// 用户登入
+export const login = (params) => request.post('/auth/login', params)
+// 用户注册
+export const register = (params) => request.post('/auth/register', params)

src/api/user.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 示例请求
+export function getUserInfo () {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
+export const login = (userData) => request.post('/users', userData)

src/main.js

@@ -4,9 +4,6 @@ import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import axios from 'axios'
-
-axios.defaults.baseURL = 'http://localhost:8080'
 
 const app = createApp(App)
 app.use(store)

src/utils/request.js

@@ -0,0 +1,74 @@
+
+/**
+ *axios封装实例
+ */
+
+// 第一步我们先引入axios模块
+import axios from 'axios'
+
+// 这里的话有token的需求我们可以获取一下token，方便我们进行请求的时候使用
+function getToken () {
+  // 这里可以根据你项目具体来获取
+  const token = window.sessionStorage.getItem('token')
+  return token || ''
+}
+// 第二步我们创建一个axios实例对象,然后用函数Factory封装一下
+function Factory ({ baseURL, code, msg, callFail }) {
+  const $http = axios.create({
+    baseURL,
+    timeout: 1000 * 60 * 5 // 超时时间
+  })
+  // 请求拦截器,我们可以在请求拦截器中设置token,或者对请求进行一些处理
+  $http.interceptors.request.use(
+    (config) => {
+      // 这里我们可以设置token
+      const token = getToken()
+      if (token) {
+        config.headers.Authorization = token
+      }
+      return {
+        headers: {
+          // 这里我们还可以设置请求头
+          'Content-Type': 'application/json;charset=UTF-8'
+          // ......
+        },
+        ...config,
+        validateStatus: (status) => {
+          // 这里我们设置状态码的判断条件，如果返回的状态码在200到300之间就表示请求成功，否则就是失败
+          return (status >= 200 && status < 300) || status === 401
+        }
+      }
+    },
+    (error) => {
+      // 这里我们处理请求错误
+      return Promise.reject(error)
+    }
+  )
+  // 响应拦截器,我们可以在响应拦截器中返回的数据或者错误信息进行处理
+  $http.interceptors.response.use((response) => {
+    // 这里我们处理响应数据
+    const data = response.data
+    if (+data.code === 200 || +data.code === 0) {
+      return data
+    } else if (+data.code === 401) {
+      console.error('请求报错提示：token失效，请重新登录')
+    } else {
+      console.error('请求报错提示：', data, msg || '请求失败')
+    }
+    return Promise.reject(data.msg || '请求失败')
+  },
+  error => {
+    // 这里我们处理响应错误
+    console.error('请求报错提示：', error, msg || '请求失败')
+    return Promise.reject(error)
+  })
+  return $http
+}
+// 默认导出一个 `request` 方法，同时支持创建 `api` 实例
+const request = Factory({ baseURL: 'http://localhost:8080' })
+
+// 第三步我们导出axios实例对象
+export default request
+
+// export default (params) => Factory(params)()  // 不理解
+// export default (params) => Factory(params) // 为什么上面的不能用

src/views/auth/Login.vue

@@ -63,6 +63,7 @@
 </template>
 
 <script>
+import { login } from '@/api/auth'
 export default {
   name: 'LoginPage',
   data () {
@@ -86,17 +87,31 @@ export default {
     }
   },
   methods: {
-    handleLogin () {
+    async handleLogin () {
+      // const params = {
+      //  userName: this.loginForm.username,
+      //  password: this.loginForm.password
+      // }
       if (this.loading) return
-      this.$refs.loginForm.validate((valid) => {
+      this.$refs.loginForm.validate(async (valid) => {
         if (valid) {
           this.loading = true
           console.log('登录信息:', this.loginForm)
-          // 模拟登录请求
-          setTimeout(() => {
-            this.loading = false
+          try {
+            // 发送登录请求，注意这里要用 this.loginForm 作为参数
+            const response = await login(this.loginForm)
+
+            if (response.code === 200) {
               this.$message.success('登录成功')
-          }, 2000)
+              // 这里可以存储 token 或跳转页面
+            } else {
+              this.$message.error(response.msg || '登录失败')
+            }
+          } catch (error) {
+            this.$message.error(error.message || '请求失败')
+          } finally {
+            this.loading = false
+          }
         } else {
           return false
         }

vue.config.js

@@ -8,4 +8,4 @@ module.exports = {
     host: 'localhost', // 可选：设置为 '0.0.0.0' 后台访问
     open: true // 自动打开浏览器
   }
-};
+}