4. 零碎技术

1. Axios

说明 ①前端发请求 ②基于ajax

1-1. 安装axios

npm install axios

1-2. 基本使用

• GET请求
• POST请求

// GET请求：对象转?拼接参数
const result_1 = async (params: Record<string, any>) => {
  const query = new URLSearchParams(params).toString(); // 将对象转换为 URL 查询字符串。
  return await axios.get(`http://yapi.smart-xwork.cn/mock/169327/emp/list?${query}`);
};

// POST请求：直接传对象
const result_2 = async (data: { id: string }) => {
  // 第二个参数直接 传递对象即可
  return await axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", data);
};

1-3. 前端封装请求

• 前端模板[vue]
• 调用示例

• 位置: src/utils/request.ts

import axios, {type AxiosInstance} from "axios";
import {ElMessage} from "element-plus";

// 扩展AxiosInstance类型
interface CustomAxiosInstance extends AxiosInstance {
    get(url: string, params?: Record<string, any>): Promise<any>;

    post(url: string, data?: any): Promise<any>;
}

// TODO 应该写一个config去那里拿,因为生产和开发的URL不一样
const http: CustomAxiosInstance = axios.create({baseURL: 'http://localhost:8080/'}) as CustomAxiosInstance;

// 请求拦截器
http.interceptors.request.use(config => {
    return config;
}, error => {
    return Promise.reject(error);
});

/** 响应拦截器
 * 后端返回数据格式为:
 * {
 *     "code": "200",
 *     "msg": "成功",
 *     "data": {}或"",
 * }
 */
http.interceptors.response.use(response => {
    const res = response.data;
    if (res.code === '200') {
        return res.data;
    } else {
        const errorMsg = res.msg || '操作失败';
        ElMessage.error(errorMsg);
        return Promise.reject(new Error(errorMsg));
    }
});

// GET封装
http.get = async (url: string, params?: Record<string, any>) => {
    const query = params ? '?' + new URLSearchParams(params).toString() : '';
    return await http.request({url: url + query, method: 'GET'});
};

// POST封装
http.post = async (url: string, data?: any) => {
    return await http.request({url, method: 'POST', data});
};

export default http;

const input = ref('') // 用户输入
const response = ref('') // 展示回复
const sendMessage = async () => { // 按钮触发这个
  response.value = await http.get('/deepseek/generate', {"message": input.value}); // 调用示例
}

2. ElementPlus

说明: ①组件模板库 ②默认搭配vue使用 ③官网

2-1: 安装ElementPlus

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

2-2: 配置vite.config.ts文件

• 位置: \vite.config.ts【为根目录】 ps: 共计9处修改

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

import AutoImport from 'unplugin-auto-import/vite'                    // 1 
import Components from 'unplugin-vue-components/vite'                 // 2
import {ElementPlusResolver} from "unplugin-vue-components/resolvers" // 3 

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vueDevTools(),
        AutoImport({                                                  // 4
            resolvers: [ElementPlusResolver()],                       // 5
        }),                                                           // 6
        Components({                                                  // 7
            resolvers: [ElementPlusResolver()],                       // 8
        })                                                            // 9
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
})

3. 路由Rounter

STEP1: 安装路由

4. vite短路径配置

4-1. 编译短路径配置

• 位置: \vite.config.ts【为根目录】 ps: 共计1处修改
• 作用: 运行时, 可以识别这个段路径

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vueDevTools(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            '@utils':fileURLToPath(new URL('./src/utils', import.meta.url)),    // 1
        },
    },
})

4-2. IDEA识别短路径配置

• 位置: \tsconfig.app.json 【为根目录】 ps: 共计2处修改
• 作用: 保证IDEAorVsCode不飘红

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts","src/**/*","src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    // Extra safety for array and object lookups, but may have false positives.
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",                               // 1
    // Path mapping for cleaner imports.
    "paths": {
      "@/*": ["./src/*"],
      "@utils/*": ["./src/utils/*"],              // 2
    },
    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
    // Specified here to keep it out of the root directory.
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
  }
}