'基础配置'

2 months ago · 14e03415f6
parent 0baa3620c1
commit 14e03415f6
10 changed files with 188 additions and 203 deletions
--- a/mock/user.ts
+++ b/mock/user.ts
@ -1,70 +1,70 @@
-//用户信息数据
+//虚假的mock用户信息数据，用于测试
 //createuserList:次函数执行会返回一个数组,数组里面包含两个用户信息
 function createUserList() {
-    return [
-        {
-            userId: 1,
-            avatar:
-                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-            username: 'admin',
-            password: '111111',
-            desc: '平台管理员',
-            roles: ['平台管理员'],
-            buttons: ['cuser.detail'],
-            routes: ['home'],
-            token: 'Admin Token',
-        },
-        {
-            userId: 2,
-            avatar:
-                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-            username: 'system',
-            password: '111111',
-            desc: '系统管理员',
-            roles: ['系统管理员'],
-            buttons: ['cuser.detail', 'cuser.user'],
-            routes: ['home'],
-            token: 'System Token',
-        },
-    ]
+  return [
+    {
+      userId: 1,
+      avatar:
+        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+      username: 'admin',
+      password: '111111',
+      desc: '平台管理员',
+      roles: ['平台管理员'],
+      buttons: ['cuser.detail'],
+      routes: ['home'],
+      token: 'Admin Token',
+    },
+    {
+      userId: 2,
+      avatar:
+        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+      username: 'system',
+      password: '111111',
+      desc: '系统管理员',
+      roles: ['系统管理员'],
+      buttons: ['cuser.detail', 'cuser.user'],
+      routes: ['home'],
+      token: 'System Token',
+    },
+  ]
 }

 export default [
-    // 用户登录接口
-    {
-        url: '/api/user/login',//请求地址
-        method: 'post',//请求方式
-        response: ({ body }) => {
-            //获取请求体携带过来的用户名与密码
-            const { username, password } = body;
-            //调用获取用户信息函数,用于判断是否有此用户
-            const checkUser = createUserList().find(
-                (item) => item.username === username && item.password === password,
-            )
-            //没有用户返回失败信息
-            if (!checkUser) {
-                return { code: 201, data: { message: '账号或者密码不正确' } }
-            }
-            //如果有返回成功信息
-            const { token } = checkUser
-            return { code: 200, data: { token } }
-        },
+  // 用户登录接口
+  {
+    url: '/api/user/login', //请求地址
+    method: 'post', //请求方式
+    response: ({ body }) => {
+      //获取请求体携带过来的用户名与密码
+      const { username, password } = body
+      //调用获取用户信息函数,用于判断是否有此用户
+      const checkUser = createUserList().find(
+        (item) => item.username === username && item.password === password,
+      )
+      //没有用户返回失败信息
+      if (!checkUser) {
+        return { code: 201, data: { message: '账号或者密码不正确' } }
+      }
+      //如果有返回成功信息
+      const { token } = checkUser
+      return { code: 200, data: { token } }
    },
-    // 获取用户信息
-    {
-        url: '/api/user/info',
-        method: 'get',
-        response: (request) => {
-            //获取请求头携带token
-            const token = request.headers.token;
-            //查看用户信息是否包含有次token用户
-            const checkUser = createUserList().find((item) => item.token === token)
-            //没有返回失败的信息
-            if (!checkUser) {
-                return { code: 201, data: { message: '获取用户信息失败' } }
-            }
-            //如果有返回成功信息
-            return { code: 200, data: {checkUser} }
-        },
+  },
+  // 获取用户信息
+  {
+    url: '/api/user/info',
+    method: 'get',
+    response: (request) => {
+      //获取请求头携带token
+      const token = request.headers.token
+      //查看用户信息是否包含有次token用户
+      const checkUser = createUserList().find((item) => item.token === token)
+      //没有返回失败的信息
+      if (!checkUser) {
+        return { code: 201, data: { message: '获取用户信息失败' } }
+      }
+      //如果有返回成功信息
+      return { code: 200, data: { checkUser } }
    },
-]
+  },
+]
--- a/src/App.vue
+++ b/src/App.vue
@ -4,14 +4,12 @@
  </div>
 </template>
 <script setup lang="ts">
-import request from "@/utils/request";
-import {onMounted} from 'vue';
-import {reqLogin} from "@/api/user";
+import request from '@/utils/request'
+import { onMounted } from 'vue'
+import { reqLogin } from '@/api/user'

-onMounted(()=>{
-  reqLogin({username:'admin',password:'111111'})
+onMounted(() => {
+  reqLogin({ username: 'admin', password: '111111' })
 })
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@ -1,19 +1,17 @@
 //统一管理项目相关信息
-import request from "@/utils/request";
-import type {
-    loginForm,
-    loginResponseDate,
-    userReponseData,
-} from './type'
+import request from '@/utils/request'
+import type { loginForm, loginResponseDate, userReponseData } from './type'
 //统一管理接口
 enum API {
-    LOGIN_URL = '/user/login',
-    USERINFO_URL = '/user/info',
-    // LOGOUT_URL = '/admin/acl/index/logout',
+  LOGIN_URL = '/user/login',
+  USERINFO_URL = '/user/info',
+  // 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)
+// export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)
--- a/src/api/user/type.ts
+++ b/src/api/user/type.ts
@ -1,33 +1,33 @@
 //登录接口需要携带参数ts类型
-export interface loginForm{
-    username:string,
-    password:string
+export interface loginForm {
+  username: string
+  password: string
 }

-interface dataType{
-    token:string
+interface dataType {
+  token: string
 }
 //登录接口返回数据类型
-export interface loginResponseDate{
-    code:number,
-    date:dataType
+export interface loginResponseDate {
+  code: number
+  date: dataType
 }
 //定义服务器返回用户信息相关数据类型
-interface userInfo{
-    userId:number,
-    avatar:string,
-    username:string,
-    password:string,
-    desc:string,
-    roles:string[],
-    buttons:string[],
-    routes:string[],
-    token:string
+interface userInfo {
+  userId: number
+  avatar: string
+  username: string
+  password: string
+  desc: string
+  roles: string[]
+  buttons: string[]
+  routes: string[]
+  token: string
 }
-interface user{
-    checkUser:userInfo
+interface user {
+  checkUser: userInfo
+}
+export interface userReponseData {
+  code: number
+  date: user
 }
-export interface userReponseData{
-    code:number,
-    date:user
-}
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@ -1,11 +1,5 @@
-<template>
+<template></template>

-</template>
+<script setup></script>

-<script setup>
-
-</script>
-
-<style scoped>
-
-</style>
+<style scoped></style>
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@ -9,7 +9,7 @@
    </svg>
  </div>
 </template>
-<script setup >
+<script setup>
 //接受父组件传递过来的参数
 defineProps({
  //xlink:href属性值的前缀
--- a/src/components/index.ts
+++ b/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方法
-    install(app) {
-//注册项目全部的全局组件
-        Object.keys(allGloablComponent).forEach(key => {
-//注册为全局组件
-
-            app.component(key, allGloablComponent[key]);
-        });
-    }
-}
+  //务必叫做insta1l方法
+  install(app) {
+    //注册项目全部的全局组件
+    Object.keys(allGloablComponent).forEach((key) => {
+      //注册为全局组件
+      app.component(key, allGloablComponent[key])
+    })
+  },
+}
--- a/src/main.ts
+++ b/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',
-    method:'post',
-    data:{
-      username:'admin',
-      password:'111111'
-  }
-  })
-
+  url: '/api/user/login',
+  method: 'post',
+  data: {
+    username: 'admin',
+    password: '111111',
+  },
+})

 //svg插件需要配置代码
 import 'virtual:svg-icons-register'
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@ -1,46 +1,48 @@
 //进行axios二次封装：使用请求与响应拦截器
 //1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
 // 2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
-import axios from "axios";
-import { ElMessage } from "element-plus";
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
 //创建axios实例
 let request = axios.create({
-    baseURL: import.meta.env.VITE_APP_BASE_API,
-    timeout: 5000
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  timeout: 5000,
 })
 //请求拦截器
-request.interceptors.request.use(config => {
-    //config配置对象，headers属性请求头，经常给服务器端携带公共参数
-    return config;
-});
+request.interceptors.request.use((config) => {
+  //config配置对象，headers属性请求头，经常给服务器端携带公共参数
+  return config
+})
 //响应拦截器
-request.interceptors.response.use((response) => {
-    return response.data;
-}, (error) => {
+request.interceptors.response.use(
+  (response) => {
+    return response.data
+  },
+  (error) => {
    //处理网络错误
-    let msg = '';
-    let status = error.response.status;
+    let msg = ''
+    let status = error.response.status
    switch (status) {
-        case 401:
-            msg = "token过期";
-            break;
-        case 403:
-            msg = '无权访问';
-            break;
-        case 404:
-            msg = "请求地址错误";
-            break;
-        case 500:
-            msg = "服务器出现问题";
-            break;
-        default:
-            msg = "无网络";
-
+      case 401:
+        msg = 'token过期'
+        break
+      case 403:
+        msg = '无权访问'
+        break
+      case 404:
+        msg = '请求地址错误'
+        break
+      case 500:
+        msg = '服务器出现问题'
+        break
+      default:
+        msg = '无网络'
    }
    ElMessage({
-        type: 'error',
-        message: msg
+      type: 'error',
+      message: msg,
    })
-    return Promise.reject(error);
-});
-export default request;
+    return Promise.reject(error)
+  },
+)
+export default request
--- a/vite.config.ts
+++ b/vite.config.ts
@ -5,40 +5,35 @@ 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})=>{
-  return{
+export default defineConfig(({ command }) => {
+  return {
+    plugins: [
+      vue(),
+      createSvgIconsPlugin({
+        // Specify the icon folder to be cached
+        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+        // Specify symbolId format
+        symbolId: 'icon-[dir]-[name]',
+      }),
+      viteMockServe({
+        enable: command === 'serve', //保证开发阶段可以使用mock接口
+      }),
+    ],

-
-  plugins: [
-    vue(),
-    createSvgIconsPlugin({
-      // Specify the icon folder to be cached
-      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-      // Specify symbolId format
-      symbolId: 'icon-[dir]-[name]',
-    }),
-    viteMockServe({
-      enable: command === 'serve',//保证开发阶段可以使用mock接口
-    }),
-  ],
-
-
-  resolve: {
-    alias: {
-      '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
+    resolve: {
+      alias: {
+        '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
+      },
    },
-  },
-

-  //scss全局变量的配置
-  css: {
-    preprocessorOptions: {
-      scss: {
-        javascriptEnabled: true,
-        additionalData: '@import "./src/styles/variable.scss";',
+    //scss全局变量的配置
+    css: {
+      preprocessorOptions: {
+        scss: {
+          javascriptEnabled: true,
+          additionalData: '@import "./src/styles/variable.scss";',
+        },
      },
    },
-  },
-      }
-    }
-  )
+  }
+})