前端

创建项目

初始化vue项目

npm init vue@latest

使用Vant4组件库

yarn add vant

在main.js中引入组件

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

配置ajax请求

引入Axios库

yarn add axios

配置请求拦截器

const baseURL = 'http://192.168.31.69:2560/'

const request = axios.create({
    // 基础地址，超时时间
    baseURL, timeout: 3000
})

// 请求拦截器
request.interceptors.request.use(
    (config) => {
        // 携带token
        const useStore = useUserStore()
        if (useStore.token) {
            config.headers.Authorization = useStore.token
        }
        return config
    },
    (err) => Promise.reject(err)
)

// 响应拦截器
request.interceptors.response.use(
    (res) => {
        // 摘取核心响应数据
        if (res.data.code === 200) {
            return res?.data?.data
        } else {
            // 处理业务失败
            showFailToast(res.data.msg || '服务异常')
            return Promise.reject(res.data)
        }
    },
    (err) => {
        // 处理401错误 权限不足 或 token 过期 => 拦截到登录
        if (err.response?.status === 401) {
            router.push('/login')
            showToast('您未登录，请登录！')
            return Promise.reject(err)
        }
        // 错误的默认情况 => 只要给提示
        showFailToast(err.response.data.msg || '服务异常')
        return Promise.reject(err)
    }
)

export { request, baseURL }

配置pinia

使用pinia保存token，并配置持久化

export const useUserStore = defineStore('counter', () => {
    const token = ref('')
    const setToken = (newToken) => {
        token.value = newToken
    }
    const removeToken = () => token.value = ''
    return { token, setToken, removeToken }
}, {
    // 持久化
    persist: true
})

vite允许局域网访问

# 允许局域网访问
yarn run dev --host

# (默认)仅限localhost访问
yarn run dev