Sakai Vue

安装

git clone https://github.com/primefaces/sakai-vue
npm install
npm run dev

由于国内被墙github的官方地址不能直接下载

通过Gitee中转fork仓库下载

网上有很多相关的教程，这里简要的说明下操作。

1. 访问gitee网站：https://gitee.com/ 并登录，在顶部选择“从GitHub/GitLab导入仓库” 如下：

2. 在导入页面中粘贴你的Github仓库地址，点击导入即可：

3. 等待导入操作完成，然后在导入的仓库中下载浏览对应的该GitHub仓库代码，你也可以点击仓库顶部的“刷新”按钮进行Github代码仓库的同步。

Axios处理请求

npm i axios

接口封装 scr/utils/request.js

import axios from 'axios';

// 创建axios实例，可配置基础的请求相关属性
const service = axios.create();

// 请求拦截器
service.interceptors.request.use(
    (config) => {
        // 1. 可以添加通用的请求头，例如设置Content-Type
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';

        // 2. 假设项目中有统一的鉴权需求，从store（Vuex）或本地存储获取token并添加到请求头
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }

        // 3. 如果有对请求参数进行特殊处理的需求（比如对GET请求参数序列化）
        if (config.method === 'get') {
            config.params = {
                ...config.params
            };
        }

        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    (response) => {
        const { data, status } = response;

        // 1. 根据业务规则判断请求是否成功，假设后端返回状态码200表示成功
        if (status === 200 || data.code === 200 || data.code === 500) {
            return data; // 返回真正的数据部分（可根据实际后端返回结构调整）
        } else {
            // 2. 如果请求失败，根据不同的错误码进行相应处理
            const errorMsg = data.message || '请求失败';
            switch (data.code) {
                case 401:
                    // 未授权情况，比如跳转到登录页面等处理
                    console.log('未授权，请登录');
                    break;
                case 403:
                    console.log('权限不足');
                    break;
                default:
                    console.log(errorMsg);
            }
            return Promise.reject(data);
        }
    },
    (error) => {
        // 3. 处理网络错误等情况，如请求超时、断网等
        if (axios.isCancel(error)) {
            console.log('请求已取消');
        } else {
            console.log('网络请求出错', error.message);
        }
        return Promise.reject(error);
    }
);

export default service;

Pinia处理缓存

npm i pinia pinia-plugin-persist

新建 src/store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

新建 src/store/user.js

import { getUserInfo } from '@/api/login';
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
    state: () => {
        return {
            token: '',
            userInfo: ''
        };
    },
    actions: {
        setToken(token) {
            this.token = token;
        },
        clearToken() {
            this.token = '';
            this.userInfo = '';
            localStorage.removeItem('txmabc_user');
        },
        setUserInfo(userInfo) {
            this.userInfo = userInfo;
        },
        requestUserInfo() {
            return new Promise((resolve, reject) => {
                getUserInfo().then(async (response) => {
                    if (!response || !response.data) {
                        this.clearToken();
                        await router.push({ name: 'login' });
                        reject(false);
                    } else {
                        this.setInfo(response.data);
                        resolve(response.data);
                    }
                });
            });
        }
    },
    getters: {
        isAuthenticated: (state) => !!state.token
    },
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'txmabc_user',
                storage: localStorage
            }
        ]
    }
});

最后在main.js中配置store

import Aura from '@primevue/themes/aura';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import '@/assets/styles.scss';
import '@/assets/tailwind.css';

const app = createApp(App);

app.use(router);
app.use(store);
app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.app-dark'
        }
    }
});
app.use(ToastService);
app.use(ConfirmationService);

app.mount('#app');

vite.config.mjs 文件中配置api代理

export default defineConfig({
    ...
    server: {
        proxy: {
            '/api': {
                target: 'http://150.158.31.84:8002',
                changeOrigin: true
            }
        }
    }
});