1. Technology

Vue3.x + Vite + Pinia + Router + ElementPlux +I18n + Axios + TypeScript

Official Website: www.axios-http.cn/docs/intro

  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.0",
    "element-plus": "^2.7.3",
    "moment": "^2.24.0",
    "pinia": "^2.1.7",
    "pinia-plugin-persist": "^1.0.0",
    "pinia-plugin-persistedstate": "^3.2.1",
    "vue": "^3.4.21",
    "vue-i18n": "^9.5.0",
    "vue-router": "^4.3.0"
  },

2. Constructure

vue-demo
├── public/          # static files
│   └── favicon.ico  # title icon (可以多個，切換路由titile也切換) 
├── src/             # project root
│   ├── assets/      # images, icons, etc.靜態資源
│   ├── api/                # 封裝http
│   │   └── permission.ts      # axios
│   ├── components/  # common components - 客製化頁面
│   ├── layouts/     # layout containers -header, footer,sidebar, etc.
│   ├── scss/        # scss styles
│   ├── config/                # 封裝http
│   │   └── httpConfig.ts      # axios
│   ├── i18n/        # 多語言切換
│   │   ├── locales/        # 多語言切換
│   │   │   ├── en.ts       # 中文
│   │   │   ├── zh.ts       # 英文
│   │   │   └── xxx.ts      # 其他文
│   │   └── index.ts        # I18N切換
│   ├── router/           # routes config
│   │   └── index.ts      # I18N切換
│   ├── stores/           # pinia templage
│   │   └── user.ts       # pinia user
│   ├── views/pages       # Route apge,路由導航的頁面
│   │   ├── dashboard     # 儀錶盤頁面
│   │   ├── login         # 登錄頁面、註冊頁面
│   │   └── ....          # etc..
│   ├── App.vue      # 三個標籤 template /script  /style
│   └── main.ts      # 加載所有組件，掛載都index.html
│
├── .env.devlopment  # 多環境配置，在package.json啟動腳本中設定讀取
├── .env.production  # 多環境配置，在package.json啟動腳本中設定讀取
├── env.d.ts         # vue識別所有格式的文件
├── index.html       # 入口文件，main.ts
├── package.json     # dependency
└── vite.config.ts   # project config,install plugin,proxy

3. Code

httpConfig.ts

import axios from 'axios'
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
const http = {}
import { ElMessage } from 'element-plus'

var instance = axios.create({
    //console.log("get-----get-0:",baseURL);
    timeout: 5000,
    baseURL: import.meta.env.VITE_API_BASE_URL,
    validateStatus(status:number) {
        switch (status) {
        case 400:
            ElMessage.error('请求出错')
            break
        case 401:
            ElMessage({
                message: '授权失败，请重新登录',
                type: 'warning',
            });
            //store.commit('LOGIN_OUT')
            setTimeout(() => {
                window.location.reload()
            }, 1000);
            return
        case 403:
            ElMessage({
                message: '拒绝访问',
                type: 'warning',
            });
            break
        case 404:
            ElMessage({
                message: '请求错误,未找到该资源',
                type: 'warning',
            })
            break
        case 500:
            ElMessage({
                message: '服务端错误',
                type: 'warning',
            })
            break
        }
        return status >= 200 && status < 300
    }
})

// 添加请求拦截器
instance.interceptors.request.use(
    
    (config)=> {
        var token = sessionStorage.getItem('token');
        // 请求头添加token
        if (token) {
            //config.headers.Authorization = `Bearer xxxxxxxxxxxxxx`
        }
        return config
    },
    (error)=> {
        return Promise.reject(error);
    }
)

// 响应拦截器即异常处理
instance.interceptors.response.use(
    (response:AxiosRequestConfig) => {
        return response.data
    },
    (err) => {
        if (err && err.response) {

        } else {
            err.message = '连接服务器失败';
        }
        ElMessage.error(err.message)
        return Promise.reject(err.response)
    }
)

http.get = function(url) {
    let loading;

    return new Promise((resolve, reject) => {
        instance
            .get(url)
            .then((response:AxiosResponse) => {
                if (response.code === 1) {
                    resolve(response.content)
                } else {
                    ElMessage.error(response.msg)
                    reject(response.msg)
                }
            })
            .catch(e => {
                console.log(e)
            })
    })
}

http.post = function(url, data) {
    let loading
    return new Promise((resolve, reject) => {
        instance
            .post(url, data)
            .then(response => {
                console.log("api--post--method--response:",response);
                if (response.code === 1) {
                    resolve(response.data)
                } else {
                    Message.error({
                        message: response.msg
                    })
                    reject(response.message)
                }
            })
            .catch(e => {
                console.log(e)
            })
    })
}

export default http

permission.ts

import axios from '../config/httpConfig'

export function fetchPermission() {
    return axios.get('/user/info')
}

// 获取用户列表
export function getUserList() {
    return axios.get('/user/list')
}
// 获取角色列表
export function getRoleList() {
    return axios.get('/role/list')
}
// 获取所有权限
export function getAllPermissiion() {
    return axios.get('/permission/all')
}
// 获取一级权限列表
export function getFirstLevel() {
    return axios.get('/permission/resource')
}
// 获取次级权限列表
export function getNextLevel(id) {
    return axios.get(`/permission/level?id=${id}`)
}
export function login(data) {
    return axios.post('/user/login', data)
}

//測試自己的api
//https://api.uomg.com/api
export function loveTalk() {
    return axios.get('/rand.qinghua?format=json')
}

4. Api

api.uomg.com