一、介绍
本文是基于 https://github.com/PanJiaChen/vue-admin-template 的模版进行搭建。在模板基础上的搭建过程中,提出以下可能遇到的问题:
1、如何mock接口数据?
大家都知道前后端开发速度不一定一致,有时候前端开发比较快,这个时候可以先进行mock数据进行测试。这个模板已经有mock例子了,因此下面会简单以mock菜单为例子做演示。通过讲菜单mock,顺便能够了解一下菜单如何动态添加的。
2、mock的api和后端api接口如何进行切换?
3、如果后端接口地址有多个,要如何进行多代理接口地址配置?
4、如何区分开发环境和生产环境的api?
二、对上述问题的回答
问题1、如何mock接口数据?
项目下载下来可以看到这个目录。以下新加了tree.js文件,并在index.js中引入
接下里开始讲菜单的mock。
mock/user.js 在这里写入要获取到的菜单数据。
const menu = {
list:[
{
"name":"申请管理",
"path":"/apply",
'meta': { 'title': '申请管理', 'icon': 'el-icon-s-help' },
"children":[
{
"name":"申请列表","path":"index|apply",
'meta': { 'title': '申请列表', 'icon': 'fa fa-address-card-o' },
"children":[],
},
],
},
{
"name":"权限管理",
"path":"/permission",
'meta': { 'title': '权限管理', 'icon': 'el-icon-s-help' },
"children":[
{
"name":"权限列表","path":"index|apply",'meta': { 'title': '权限列表', 'icon': 'fa fa-address-card-o' },
"children":[],
},
],
}
]
}
module.exports = [
{
url: '/api/SysUser/getUserMenuTreeAndRightList',
type: 'get',
response: _ => {
return {
code: 10000,
content: {
list: menu.list
}
}
}
},
]
src/api/user.js 注意接口url要一致
export function getUserMenuTreeAndRightList(params) {
return request({
url: '/api/SysUser/getUserMenuTreeAndRightList',
method: 'get',
params: params
})
}
src/store/modules/user.js 获取到菜单数据,转换格式,添加路由。
import router from '@/router'
import interceptMenu from "@/router/menuCorrect.js"
const actions = {
// 获取用户菜单
getMenu({
commit
}) {
let params = {
SysAppId: '1',
};
return new Promise((resolve, reject) => {
getUserMenuTreeAndRightList(params).then(response => {
if (response && response.code == 10000) {
//遍历更新菜单格式
let menuCorrect = interceptMenu(response.content.list);
if (menuCorrect != null) {
// 如果本地有隐藏配置 就在这边再添加
setMenu(JSON.stringify(menuCorrect));
}
if (menuCorrect.length > 0) {
router.options.routes = Object.assign(
router.options.routes,
menuCorrect
);
router.addRoutes(menuCorrect);
}
resolve(response)
}
}).catch(error => {
reject(error)
})
})
},
}
src/router/menuCorrect.js 为每个路由加component
import lazyLoading from './lazyLoading'
//遍历菜单
export default function interceptMenu(menuData) {
for(let i = 0; i < menuData.length; i++){
menuData[i] = getMenuCorrect(menuData[i])
if(menuData[i].children && menuData[i].children.length!=0){
interceptMenu(menuData[i].children)
}
}
return menuData
}
//对每一个菜单节点进行 component添加、href修改
function getMenuCorrect(menuItem){
let menuItemCopy = {...menuItem}
//截取到‘|’, 转化为href和component
if(menuItem.path && menuItem.path.includes('|')){
//如果有| 那么是children节点
let index = menuItem.path.indexOf('|')
let path = ''
let loading = ''
if(index !== -1){
//存在|
path = menuItem.path.slice(0, index)
loading = menuItem.path.slice(index + 1)
menuItemCopy.path = path
menuItemCopy.component = lazyLoading(loading);
}else {
console.log('检查路径')
return false
}
}else{
//否则是parent节点
menuItemCopy.component = lazyLoading('layout');
}
return menuItemCopy
}
src/router/lazyLoading.js 获取到每个页面的component
const apply = import('@/views/apply/apply.vue'); //申请
const layout = import('@/layout/index.vue'); //外边框
const home = import('@/views/home.vue'); //home
function look(name) {
switch (name) {
case 'layout':
return layout;
break;
case 'apply':
return apply;
break;
default:
return home;
break;
}
}
export default (name) => () => look(name);
最终效果:(更改完mock记得重启项目)
问题2、mock的api和后端api接口如何进行切换?
在settings.js中添加参数
在.env.development中添加接口地址
通过参数进行本地和后端api切换
实现效果:
那么如果多个后端接口地址应该要如何进行切换?这就到了问题3。
问题3、如果后端接口地址有多个,要如何进行多代理接口地址配置?
在.env.development中添加接口地址
在调用接口的时候添加,可以直接覆盖。进一步了解可看 https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html
问题4、如何区分开发环境和生产环境的api?
在.env.production文件中,加入生产环境需要的接口地址就行了。