vue 项目开发的搭建

一、介绍

本文是基于 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文件中，加入生产环境需要的接口地址就行了。