'基础配置'

mock/user.ts

@@ -1,4 +1,4 @@
-//用户信息数据
+//虚假的mock用户信息数据，用于测试
 //createuserList:次函数执行会返回一个数组,数组里面包含两个用户信息
 function createUserList() {
   return [
@@ -32,11 +32,11 @@ function createUserList() {
 export default [
   // 用户登录接口
   {
-        url: '/api/user/login',//请求地址
+    url: '/api/user/login', //请求地址
-        method: 'post',//请求方式
+    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)
       //没有返回失败的信息
@@ -64,7 +64,7 @@ export default [
         return { code: 201, data: { message: '获取用户信息失败' } }
       }
       //如果有返回成功信息
-            return { code: 200, data: {checkUser} }
+      return { code: 200, data: { checkUser } }
     },
   },
 ]

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(()=>{
+onMounted(() => {
-  reqLogin({username:'admin',password:'111111'})
+  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,33 +1,33 @@
 //登录接口需要携带参数ts类型
-export interface loginForm{
+export interface loginForm {
-    username:string,
+  username: string
-    password:string
+  password: string
 }
 
-interface dataType{
+interface dataType {
-    token:string
+  token: string
 }
 //登录接口返回数据类型
-export interface loginResponseDate{
+export interface loginResponseDate {
-    code:number,
+  code: number
-    date:dataType
+  date: dataType
 }
 //定义服务器返回用户信息相关数据类型
-interface userInfo{
+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
+  token: string
 }
-interface user{
+interface user {
-    checkUser:userInfo
+  checkUser: userInfo
 }
-export interface userReponseData{
+export interface userReponseData {
-    code:number,
+  code: number
-    date:user
+  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/SvgIcon/index.vue

@@ -9,7 +9,7 @@
     </svg>
   </div>
 </template>
-<script setup >
+<script setup>
 //接受父组件传递过来的参数
 defineProps({
   //xlink:href属性值的前缀

src/components/index.ts

@@ -1,17 +1,16 @@
 //引入项目中全部的全局组件
 import SvgIcon from './SvgIcon/index.vue'
-import Pagination from'./Pagination/index.vue'
+import Pagination from './Pagination/index.vue'
 //全局对象
-const allGloablComponent={SvgIcon,Pagination };
+const allGloablComponent = { SvgIcon, Pagination }
 //对外暴露插件对象
 export default {
-//务必叫做insta1l方法
+  //务必叫做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,16 +18,15 @@ app.use(ElementPlus, {
 // console.log(import.meta.env, '===========')
 
 //测试axios数据
-import axios from "axios";
+import axios from 'axios'
 axios({
-    url:'/api/user/login',
+  url: '/api/user/login',
-    method:'post',
+  method: 'post',
-    data:{
+  data: {
-      username:'admin',
+    username: 'admin',
-      password:'111111'
+    password: '111111',
-  }
+  },
-  })
+})
-
 
 //svg插件需要配置代码
 import 'virtual:svg-icons-register'

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

@@ -5,10 +5,8 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { viteMockServe } from 'vite-plugin-mock'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-export default defineConfig(({command})=>{
+export default defineConfig(({ command }) => {
-  return{
+  return {
-
-
     plugins: [
       vue(),
       createSvgIconsPlugin({
@@ -18,18 +16,16 @@ export default defineConfig(({command})=>{
         symbolId: 'icon-[dir]-[name]',
       }),
       viteMockServe({
-      enable: command === 'serve',//保证开发阶段可以使用mock接口
+        enable: command === 'serve', //保证开发阶段可以使用mock接口
       }),
     ],
 
-
     resolve: {
       alias: {
         '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
       },
     },
 
-
     //scss全局变量的配置
     css: {
       preprocessorOptions: {
@@ -40,5 +36,4 @@ export default defineConfig(({command})=>{
       },
     },
   }
-    }
+})
-  )