'基础配置'

mock/user.ts

@@ -1,4 +1,4 @@
-//用户信息数据
+//虚假的mock用户信息数据，用于测试
 //createuserList:次函数执行会返回一个数组,数组里面包含两个用户信息
 function createUserList() {
   return [
@@ -36,7 +36,7 @@ export default [
     method: 'post', //请求方式
     response: ({ body }) => {
       //获取请求体携带过来的用户名与密码
-            const { username, password } = body;
+      const { username, password } = body
       //调用获取用户信息函数,用于判断是否有此用户
       const checkUser = createUserList().find(
         (item) => item.username === username && item.password === password,
@@ -56,7 +56,7 @@ export default [
     method: 'get',
     response: (request) => {
       //获取请求头携带token
-            const token = request.headers.token;
+      const token = request.headers.token
       //查看用户信息是否包含有次token用户
       const checkUser = createUserList().find((item) => item.token === token)
       //没有返回失败的信息

src/App.vue

@@ -4,14 +4,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import request from "@/utils/request";
+import request from '@/utils/request'
-import {onMounted} from 'vue';
+import { onMounted } from 'vue'
-import {reqLogin} from "@/api/user";
+import { reqLogin } from '@/api/user'
 
 onMounted(() => {
   reqLogin({ username: 'admin', password: '111111' })
 })
 </script>
-<style scoped>
+<style scoped></style>
-
-</style>

src/api/user/index.ts

@@ -1,10 +1,6 @@
 //统一管理项目相关信息
-import request from "@/utils/request";
+import request from '@/utils/request'
-import type {
+import type { loginForm, loginResponseDate, userReponseData } from './type'
-    loginForm,
-    loginResponseDate,
-    userReponseData,
-} from './type'
 //统一管理接口
 enum API {
   LOGIN_URL = '/user/login',
@@ -12,8 +8,10 @@ enum API {
   // LOGOUT_URL = '/admin/acl/index/logout',
 }
 //登录接口
-export const reqLogin = (data: loginForm) => request.post<any,loginResponseDate>(API.LOGIN_URL, data)
+export const reqLogin = (data: loginForm) =>
+  request.post<any, loginResponseDate>(API.LOGIN_URL, data)
 //获取用户信息
-export const reqUserInfo = () =>request.get<any,userReponseData>(API.USERINFO_URL)
+export const reqUserInfo = () =>
+  request.get<any, userReponseData>(API.USERINFO_URL)
 //退出登录
 // export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

src/api/user/type.ts

@@ -1,6 +1,6 @@
 //登录接口需要携带参数ts类型
 export interface loginForm {
-    username:string,
+  username: string
   password: string
 }
 
@@ -9,25 +9,25 @@ interface dataType{
 }
 //登录接口返回数据类型
 export interface loginResponseDate {
-    code:number,
+  code: number
   date: dataType
 }
 //定义服务器返回用户信息相关数据类型
 interface userInfo {
-    userId:number,
+  userId: number
-    avatar:string,
+  avatar: string
-    username:string,
+  username: string
-    password:string,
+  password: string
-    desc:string,
+  desc: string
-    roles:string[],
+  roles: string[]
-    buttons:string[],
+  buttons: string[]
-    routes:string[],
+  routes: string[]
   token: string
 }
 interface user {
   checkUser: userInfo
 }
 export interface userReponseData {
-    code:number,
+  code: number
   date: user
 }

src/components/Pagination/index.vue

@@ -1,11 +1,5 @@
-<template>
+<template></template>
 
-</template>
+<script setup></script>
 
-<script setup>
+<style scoped></style>
-
-</script>
-
-<style scoped>
-
-</style>

src/components/index.ts

@@ -2,16 +2,15 @@
 import SvgIcon from './SvgIcon/index.vue'
 import Pagination from './Pagination/index.vue'
 //全局对象
-const allGloablComponent={SvgIcon,Pagination };
+const allGloablComponent = { SvgIcon, Pagination }
 //对外暴露插件对象
 export default {
   //务必叫做insta1l方法
   install(app) {
     //注册项目全部的全局组件
-        Object.keys(allGloablComponent).forEach(key => {
+    Object.keys(allGloablComponent).forEach((key) => {
       //注册为全局组件
-
+      app.component(key, allGloablComponent[key])
-            app.component(key, allGloablComponent[key]);
+    })
-        });
+  },
-    }
 }

src/main.ts

@@ -18,17 +18,16 @@ app.use(ElementPlus, {
 // console.log(import.meta.env, '===========')
 
 //测试axios数据
-import axios from "axios";
+import axios from 'axios'
 axios({
   url: '/api/user/login',
   method: 'post',
   data: {
     username: 'admin',
-      password:'111111'
+    password: '111111',
-  }
+  },
 })
 
-
 //svg插件需要配置代码
 import 'virtual:svg-icons-register'
 import '@/styles/index.scss'

src/utils/request.ts

@@ -1,46 +1,48 @@
 //进行axios二次封装：使用请求与响应拦截器
 //1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
 // 2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
-import axios from "axios";
+import axios from 'axios'
-import { ElMessage } from "element-plus";
+import { ElMessage } from 'element-plus'
 //创建axios实例
 let request = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
-    timeout: 5000
+  timeout: 5000,
 })
 //请求拦截器
-request.interceptors.request.use(config => {
+request.interceptors.request.use((config) => {
   //config配置对象，headers属性请求头，经常给服务器端携带公共参数
-    return config;
+  return config
-});
+})
 //响应拦截器
-request.interceptors.response.use((response) => {
+request.interceptors.response.use(
-    return response.data;
+  (response) => {
-}, (error) => {
+    return response.data
+  },
+  (error) => {
     //处理网络错误
-    let msg = '';
+    let msg = ''
-    let status = error.response.status;
+    let status = error.response.status
     switch (status) {
       case 401:
-            msg = "token过期";
+        msg = 'token过期'
-            break;
+        break
       case 403:
-            msg = '无权访问';
+        msg = '无权访问'
-            break;
+        break
       case 404:
-            msg = "请求地址错误";
+        msg = '请求地址错误'
-            break;
+        break
       case 500:
-            msg = "服务器出现问题";
+        msg = '服务器出现问题'
-            break;
+        break
       default:
-            msg = "无网络";
+        msg = '无网络'
-
     }
     ElMessage({
       type: 'error',
-        message: msg
+      message: msg,
     })
-    return Promise.reject(error);
+    return Promise.reject(error)
-});
+  },
-export default request;
+)
+export default request

vite.config.ts

@@ -7,8 +7,6 @@ import vue from '@vitejs/plugin-vue'
 import path from 'path'
 export default defineConfig(({ command }) => {
   return {
-
-
     plugins: [
       vue(),
       createSvgIconsPlugin({
@@ -22,14 +20,12 @@ export default defineConfig(({command})=>{
       }),
     ],
 
-
     resolve: {
       alias: {
         '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
       },
     },
 
-
     //scss全局变量的配置
     css: {
       preprocessorOptions: {
@@ -40,5 +36,4 @@ export default defineConfig(({command})=>{
       },
     },
   }
-    }
+})
-  )