/**
* 环境配置封装
* con
*/
const env = import.meta.env.MODE || 'prod';
const EnvConfig = {
dev:{
baseApi:'/api',
mockApi:'https://www.fastmock.site/mock/c1c302e8baed9894c48c17e4738c092e/api'
},
test:{
baseApi:'//test.futurefe.com/api',
mockApi:'https://www.fastmock.site/mock/c1c302e8baed9894c48c17e4738c092e/api'
},
prod:{
baseApi:'//futurefe.com/api',
mockApi:'https://www.fastmock.site/mock/c1c302e8baed9894c48c17e4738c092e/api'
}
}
export default {
env,
mock:false,
namespace:'manager',
...EnvConfig[env]
}
/**
* axios二次封装
* config/index.js
*/
import axios from 'axios'
import config from './../config'
import { ElMessage } from 'element-plus'
import router from './../router'
import storage from './storage'
const TOKEN_INVALID = 'Token认证失败,请重新登录'
const NETWORK_ERROR = '网络请求异常,请稍后重试'
// 创建axios实例对象,添加全局配置
const service = axios.create({
baseURL: config.baseApi,
timeout: 8000
})
// 请求拦截
service.interceptors.request.use((req) => {
const headers = req.headers;
const { token } = storage.getItem('userInfo');
if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
return req;
})
// 响应拦截
service.interceptors.response.use((res) => {
const { code, data, msg } = res.data;
if (code === 200) {
return data;
} else if (code === 500001) {
ElMessage.error(TOKEN_INVALID)
setTimeout(() => {
router.push('/login')
}, 1500)
return Promise.reject(TOKEN_INVALID)
} else {
ElMessage.error(msg || NETWORK_ERROR)
return Promise.reject(msg || NETWORK_ERROR)
}
})
/**
* 请求核心函数
* @param {*} options 请求配置
*/
function request(options) {
options.method = options.method || 'get'
if (options.method.toLowerCase() === 'get') {
options.params = options.data;
}
let isMock = config.mock;
if (typeof options.mock != 'undefined') {
isMock = options.mock;
}
if (config.env === 'prod') {
service.defaults.baseURL = config.baseApi
} else {
service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
}
return service(options)
}
['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
request[item] = (url, data, options) => {
return request({
url,
data,
method: item,
...options
})
}
})
export default request;
/**
* Storage二次封装
*/
import config from './../config'
export default {
setItem(key,val){
let storage = this.getStroage();
storage[key] = val;
window.localStorage.setItem(config.namespace,JSON.stringify(storage));
},
getItem(key){
return this.getStroage()[key]
},
getStroage(){
return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
},
clearItem(key){
let storage = this.getStroage()
delete storage[key]
window.localStorage.setItem(config.namespace,JSON.stringify(storage));
},
clearAll(){
window.localStorage.clear()
}
}
/**
* 工具函数封装
*/
// 格式化时间
export const formateDate = function(date, rule) {
let fmt = rule || 'yyyy-MM-dd hh:mm:ss'
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, date.getFullYear())
}
const o = {
// 'y+': date.getFullYear(),
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
const val = o[k] + '';
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? val : ('00' + val).substr(val.length));
}
}
return fmt;
}
// 获取地址参数
export const getQueryString = function (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
var reg_rewrite = new RegExp('(^|/)' + name + '/([^/]*)(/|$)', 'i')
var r = window.location.search.substr(1).match(reg)
var q = window.location.pathname.substr(1).match(reg_rewrite)
if (r != null) {
return unescape(r[2])
} else if (q != null) {
return unescape(q[2])
} else {
return null
}
}
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/Home.vue'
const routes = [
{
name: 'home',
path: '/',
meta: {
title: '首页'
},
component: Home,
redirect: '/welcome',
children: [
{
name: 'welcome',
path: '/welcome',
meta: {
title: '欢迎体验Vue3全栈课程'
},
component: () => import('@/views/Welcome.vue')
},
{
name: 'user',
path: '/system/user',
meta: {
title: '用户管理'
},
component: () => import('@/views/User.vue')
},
{
name: 'menu',
path: '/system/menu',
meta: {
title: '菜单管理'
},
component: () => import('@/views/Menu.vue')
}
]
},
{
name: 'login',
path: '/login',
meta: {
title: '登录'
},
component: () => import('./../views/Login.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
/**
* api
*/
import request from './../utils/request'
export default {
login(params) {
return request({
url: '/users/login',
method: 'post',
data: params,
})
}
}
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import request from './utils/request'
import storage from './utils/storage'
import api from './api'
import store from './store'
console.log("环境变量=>",import.meta.env)
const app = createApp(App);
app.config.globalProperties.$request = request;
app.config.globalProperties.$api = api;
app.config.globalProperties.$storage = storage;
app.use(router).use(store).use(ElementPlus,{size:'small'}).mount('#app')
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
import utils from "./../utils/utils";
export default {
name: "user",
setup() {
// 获取Composition API 上下文对象
const { ctx } = getCurrentInstance();
// 初始化用户列表数据
const userList = ref([]);
// 初始化分页对象
const pager = reactive({
pageNum: 1,
pageSize: 10,
});
// 初始化接口调用
onMounted(() => {
getUserList();
});
// 获取用户列表
const getUserList = async () => {
let params = { ...user, ...pager };
try {
const { list, page } = await ctx.$api.getUserList(params);
userList.value = list;
pager.total = page.total;
} catch (error) {}
};
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。