'基础配置'

.env.development

@@ -1,4 +1,4 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
-VITE_APP_TITLE = '硅谷甄选运营平台'
+VITE_APP_TITLE = '在线测试平台'
-VITE_APP_BASE_API = '/dev-api'
+VITE_APP_BASE_API = '/api'

.env.production

@@ -1,3 +1,3 @@
 NODE_ENV = 'production'
-VITE_APP_TITLE = '硅谷甄选运营平台'
+VITE_APP_TITLE = '在线测试平台'
-VITE_APP_BASE_API = '/prod-api'
+VITE_APP_BASE_API = '/api'

.env.test

@@ -1,4 +1,4 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'test'
-VITE_APP_TITLE = '硅谷甄选运营平台'
+VITE_APP_TITLE = '在线测试平台'
-VITE_APP_BASE_API = '/test-api'
+VITE_APP_BASE_API = '/api'

mock/user.ts

@@ -0,0 +1,70 @@
+//用户信息数据
+//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',
+        },
+    ]
+}
+
+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/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} }
+        },
+    },
+]

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.7.8",
     "element-plus": "^2.8.7",
     "vue": "^3.5.12"
   },
@@ -37,13 +38,14 @@
     "eslint-plugin-vue": "^9.30.0",
     "globals": "^15.12.0",
     "husky": "^8.0.0",
+    "mockjs": "^1.1.0",
     "postcss": "^8.4.47",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.3.3",
     "sass": "^1.80.6",
     "sass-loader": "^16.0.3",
-    "stylelint": "^16.10.0",
+    "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recess-order": "^5.1.1",
     "stylelint-config-recommended-scss": "^14.1.0",
@@ -55,6 +57,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.13.0",
     "vite": "^5.4.10",
+    "vite-plugin-mock": "^3.0.2",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^2.1.8"
   }

src/App.vue

@@ -1,14 +1,17 @@
 <template>
   <div>
-    <h1>Svg测试</h1>
+    <h1>ces</h1>
-    <svg-icon name="home" color="red" width="100px" height="100px"></svg-icon>
   </div>
 </template>
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue'
+import request from "@/utils/request";
+import {onMounted} from 'vue';
+import {reqLogin} from "@/api/user";
+
+onMounted(()=>{
+  reqLogin({username:'admin',password:'111111'})
+})
 </script>
-<style scoped lang="scss">
+<style scoped>
-h1 {
+
-  color: $h1-color;
-}
 </style>

src/api/user/index.ts

@@ -0,0 +1,19 @@
+//统一管理项目相关信息
+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',
+}
+//登录接口
+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 reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

src/api/user/type.ts

@@ -0,0 +1,33 @@
+//登录接口需要携带参数ts类型
+export interface loginForm{
+    username:string,
+    password:string
+}
+
+interface dataType{
+    token:string
+}
+//登录接口返回数据类型
+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 user{
+    checkUser:userInfo
+}
+export interface userReponseData{
+    code:number,
+    date:user
+}

src/components/Pagination/index.vue

@@ -1,9 +1,11 @@
-<template></template>
+<template>
+
+</template>
+
+<script setup>
 
-<script>
-export default {
-  name: 'index',
-}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>

src/components/SvgIcon/index.vue

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

src/components/index.ts

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

src/main.ts

@@ -16,9 +16,21 @@ app.use(ElementPlus, {
 })
 //打印限制
 // console.log(import.meta.env, '===========')
+
+//测试axios数据
+import axios from "axios";
+axios({
+    url:'/api/user/login',
+    method:'post',
+    data:{
+      username:'admin',
+      password:'111111'
+  }
+  })
+
+
 //svg插件需要配置代码
 import 'virtual:svg-icons-register'
-
 import '@/styles/index.scss'
 // 将应用挂载到挂载点上
 app.mount('#app')

src/utils/request.ts

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

vite.config.ts

@@ -2,9 +2,13 @@
 // vite.config.ts
 import { defineConfig } from 'vite'
 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({
+export default defineConfig(({command})=>{
+  return{
+
+
   plugins: [
     vue(),
     createSvgIconsPlugin({
@@ -13,12 +17,19 @@ export default defineConfig({
       // Specify symbolId format
       symbolId: 'icon-[dir]-[name]',
     }),
+    viteMockServe({
+      enable: command === 'serve',//保证开发阶段可以使用mock接口
+    }),
   ],
+
+
   resolve: {
     alias: {
       '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
     },
   },
+
+
   //scss全局变量的配置
   css: {
     preprocessorOptions: {
@@ -28,4 +39,6 @@ export default defineConfig({
       },
     },
   },
-})
+      }
+    }
+  )

vite.config.ts.timestamp-1733197367032-fb576022f318b.mjs

@@ -0,0 +1,44 @@
+// vite.config.ts
+import { defineConfig } from "file:///C:/Users/bo/Desktop/vue3_admin_template/project/node_modules/.pnpm/vite@5.4.10_@types+node@22.9.0_sass@1.80.6/node_modules/vite/dist/node/index.js";
+import { createSvgIconsPlugin } from "file:///C:/Users/bo/Desktop/vue3_admin_template/project/node_modules/.pnpm/vite-plugin-svg-icons@2.0.1_vite@5.4.10_@types+node@22.9.0_sass@1.80.6_/node_modules/vite-plugin-svg-icons/dist/index.mjs";
+import { viteMockServe } from "file:///C:/Users/bo/Desktop/vue3_admin_template/project/node_modules/.pnpm/vite-plugin-mock@3.0.2_esbuild@0.21.5_mockjs@1.1.0_vite@5.4.10_@types+node@22.9.0_sass@1.80.6_/node_modules/vite-plugin-mock/dist/index.mjs";
+import vue from "file:///C:/Users/bo/Desktop/vue3_admin_template/project/node_modules/.pnpm/@vitejs+plugin-vue@5.1.4_vite@5.4.10_@types+node@22.9.0_sass@1.80.6__vue@3.5.12_typescript@5.6.3_/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import path from "path";
+var vite_config_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接口
+        })
+      ],
+      resolve: {
+        alias: {
+          "@": path.resolve("./src")
+          // 相对路径别名配置，使用 @ 代替 src
+        }
+      },
+      //scss全局变量的配置
+      css: {
+        preprocessorOptions: {
+          scss: {
+            javascriptEnabled: true,
+            additionalData: '@import "./src/styles/variable.scss";'
+          }
+        }
+      }
+    };
+  }
+);
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxib1xcXFxEZXNrdG9wXFxcXHZ1ZTNfYWRtaW5fdGVtcGxhdGVcXFxccHJvamVjdFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiQzpcXFxcVXNlcnNcXFxcYm9cXFxcRGVza3RvcFxcXFx2dWUzX2FkbWluX3RlbXBsYXRlXFxcXHByb2plY3RcXFxcdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0M6L1VzZXJzL2JvL0Rlc2t0b3AvdnVlM19hZG1pbl90ZW1wbGF0ZS9wcm9qZWN0L3ZpdGUuY29uZmlnLnRzXCI7Ly9cdTkxNERcdTdGNkVcdTRFRTNcdTc0MDZcdThERThcdTU3REZcdTdCNDlcbi8vIHZpdGUuY29uZmlnLnRzXG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHsgY3JlYXRlU3ZnSWNvbnNQbHVnaW4gfSBmcm9tICd2aXRlLXBsdWdpbi1zdmctaWNvbnMnXG5pbXBvcnQgeyB2aXRlTW9ja1NlcnZlIH0gZnJvbSAndml0ZS1wbHVnaW4tbW9jaydcbmltcG9ydCB2dWUgZnJvbSAnQHZpdGVqcy9wbHVnaW4tdnVlJ1xuaW1wb3J0IHBhdGggZnJvbSAncGF0aCdcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZygoe2NvbW1hbmR9KT0+e1xuICByZXR1cm57XG5cblxuICBwbHVnaW5zOiBbXG4gICAgdnVlKCksXG4gICAgY3JlYXRlU3ZnSWNvbnNQbHVnaW4oe1xuICAgICAgLy8gU3BlY2lmeSB0aGUgaWNvbiBmb2xkZXIgdG8gYmUgY2FjaGVkXG4gICAgICBpY29uRGlyczogW3BhdGgucmVzb2x2ZShwcm9jZXNzLmN3ZCgpLCAnc3JjL2Fzc2V0cy9pY29ucycpXSxcbiAgICAgIC8vIFNwZWNpZnkgc3ltYm9sSWQgZm9ybWF0XG4gICAgICBzeW1ib2xJZDogJ2ljb24tW2Rpcl0tW25hbWVdJyxcbiAgICB9KSxcbiAgICB2aXRlTW9ja1NlcnZlKHtcbiAgICAgIGVuYWJsZTogY29tbWFuZCA9PT0gJ3NlcnZlJywvL1x1NEZERFx1OEJDMVx1NUYwMFx1NTNEMVx1OTYzNlx1NkJCNVx1NTNFRlx1NEVFNVx1NEY3Rlx1NzUyOG1vY2tcdTYzQTVcdTUzRTNcbiAgICB9KSxcbiAgXSxcblxuXG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgJ0AnOiBwYXRoLnJlc29sdmUoJy4vc3JjJyksIC8vIFx1NzZGOFx1NUJGOVx1OERFRlx1NUY4NFx1NTIyQlx1NTQwRFx1OTE0RFx1N0Y2RVx1RkYwQ1x1NEY3Rlx1NzUyOCBAIFx1NEVFM1x1NjZGRiBzcmNcbiAgICB9LFxuICB9LFxuXG5cbiAgLy9zY3NzXHU1MTY4XHU1QzQwXHU1M0Q4XHU5MUNGXHU3Njg0XHU5MTREXHU3RjZFXG4gIGNzczoge1xuICAgIHByZXByb2Nlc3Nvck9wdGlvbnM6IHtcbiAgICAgIHNjc3M6IHtcbiAgICAgICAgamF2YXNjcmlwdEVuYWJsZWQ6IHRydWUsXG4gICAgICAgIGFkZGl0aW9uYWxEYXRhOiAnQGltcG9ydCBcIi4vc3JjL3N0eWxlcy92YXJpYWJsZS5zY3NzXCI7JyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgICAgIH1cbiAgICB9XG4gIClcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFFQSxTQUFTLG9CQUFvQjtBQUM3QixTQUFTLDRCQUE0QjtBQUNyQyxTQUFTLHFCQUFxQjtBQUM5QixPQUFPLFNBQVM7QUFDaEIsT0FBTyxVQUFVO0FBQ2pCLElBQU8sc0JBQVE7QUFBQSxFQUFhLENBQUMsRUFBQyxRQUFPLE1BQUk7QUFDdkMsV0FBTTtBQUFBLE1BR04sU0FBUztBQUFBLFFBQ1AsSUFBSTtBQUFBLFFBQ0oscUJBQXFCO0FBQUE7QUFBQSxVQUVuQixVQUFVLENBQUMsS0FBSyxRQUFRLFFBQVEsSUFBSSxHQUFHLGtCQUFrQixDQUFDO0FBQUE7QUFBQSxVQUUxRCxVQUFVO0FBQUEsUUFDWixDQUFDO0FBQUEsUUFDRCxjQUFjO0FBQUEsVUFDWixRQUFRLFlBQVk7QUFBQTtBQUFBLFFBQ3RCLENBQUM7QUFBQSxNQUNIO0FBQUEsTUFHQSxTQUFTO0FBQUEsUUFDUCxPQUFPO0FBQUEsVUFDTCxLQUFLLEtBQUssUUFBUSxPQUFPO0FBQUE7QUFBQSxRQUMzQjtBQUFBLE1BQ0Y7QUFBQTtBQUFBLE1BSUEsS0FBSztBQUFBLFFBQ0gscUJBQXFCO0FBQUEsVUFDbkIsTUFBTTtBQUFBLFlBQ0osbUJBQW1CO0FBQUEsWUFDbkIsZ0JBQWdCO0FBQUEsVUFDbEI7QUFBQSxRQUNGO0FBQUEsTUFDRjtBQUFBLElBQ0k7QUFBQSxFQUNGO0FBQ0Y7IiwKICAibmFtZXMiOiBbXQp9Cg==