详解Vue.js项目API、Router配置拆分实践


Posted in Javascript onMarch 16, 2018

前后端分离开发方式前端拥有更高的控制权

随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分):

详解Vue.js项目API、Router配置拆分实践

前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面。

前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端需要定义Router配置文件,需要定义API配置文件。在项目的权限配置管理中,完全不需要后端什么事了,可以说,权限配置表可以单独拿出来由前端维护了。

详解Vue.js项目API、Router配置拆分实践

比如这个url字段,在前后端不分离的情况下,严重依赖于后端,url就是后端接口地址,如果需要更改就需要后端修改代码修改接口地址,而现在,前端可以自由控制url的值是什么了。

在接口层面,前端也会有自己的配置文件,可以对后端提供的接口进行重命名,组合等。比如

详解Vue.js项目API、Router配置拆分实践

前端都统一使用模块名+接口名的方式管理,管后端提供的接口叫啥已经不重要,在视觉上和维护上都比较方便。在页面上使用,查询起来也很直观:

详解Vue.js项目API、Router配置拆分实践

看到DISTRBUTE().Leads.dataGrid这个接口,就知道这是DISTRBUTE模块下Leasd功能下的列表查询接口

Vue.js中的API、Router配置

在Vue.js项目下,一开始我们只使用一个api.config.js配置文件,所有的接口都定义在这里面,router也一样,都配置在一个router.config.js中,下面是我们项目中API配置文件

详解Vue.js项目API、Router配置拆分实践

可以看到,很多的业务模块,很多的接口,已经达到了570多行,随着业务进一步推进,接口快速膨胀,文件越来越大。

这时候迫切需要拆分,把不同的业务模块单独拆分为一个个API配置文件。同样,我们来看看拆分前的Router配置文件:

详解Vue.js项目API、Router配置拆分实践

这样router一多最大的缺点就是会导致router命名冲突。

拆分!拆分!拆分!

首先考虑API配置文件怎么拆分,对于接口,我们肯定有多套环境,多套环境那么API的URL也不一样,拆分成多个文件后多个文件需要共用同一个获取apiBase的方法,所以这个apiBase就要写在公共的地方,在这里原来的api.config.js就变成了公共配置,apiBase就放在此文件内。

export function apiBase() {
 let hostname = window.location.hostname,
  API_BASE_URL = 'http://test2api.dunizb.com';//默认环境
 if(hostname === 'crm.dunizb.cn') { //正式环境
  API_BASE_URL = 'http://api.dunizb.cn';
 } else if(hostname === 'admin.dunizb.com') {//公网测试环境
  API_BASE_URL = 'http://testapi.dunizb.com';
 } else if(hostname === 'manager.dunizb.com') {//内网测试环境
  API_BASE_URL = 'http://test2api.dunizb.com';
 }
 return API_BASE_URL;
}

然后在每个子API配置文件中引入即可:

import {apiBase} from '../api.config';

具体功能API不需要更改,直接拷贝相应模块API到子模块API配置文件即可。

详解Vue.js项目API、Router配置拆分实践

Router的拆分稍微复杂一点,拆分后的文件目录与API的目录相同:

详解Vue.js项目API、Router配置拆分实践

拆分思路也完全一样,但要保证只有一个router.start即:

return router.start(App, '#app');

虽然你在子router配置文件中也写上页面是能正常工作的,但是Vue.js会在控制台报一个错误:

详解Vue.js项目API、Router配置拆分实践

这个错误的意思就是router已经启动,无需启动多次。所以,子router文件中不能存在 return router.start(App, '#app'); 这样的代码。

拆分后router.config.js内容如下:

/**
 * 路由总文件
 * Created by Bing on 2017/6/19 0019.
 */
import App from './App';
import authority from './routers/authority';
import publics from './routers/public';
import study from './routers/study';
... ...
export default function(router){
 authority(router);//基础与权限模块
 publics(router);//公共模块
 study(router);//教学相关
 ... ...
 return router.start(App, '#app');
}

而子router配置文件的写法就是这样(以study模块为例):

/**
 * 教学排课
 * 教研
 * Created by Bing on 2017/6/19 0019.
 */
import courseIndex from 'components/studyCourse/index/index';
import waitCourse from 'components/studyCourse/waitCourse/waitCourse';
import alreadyCourse from 'components/studyCourse/alreadyCourse/alreadyCourse';
import gearCourse from 'components/studyCourse/waitCourse/gearCourse';
import courseWare from 'components/teachingResearch/courseware/courseware.vue';
import courseWareLibrary from 'components/teachingResearch/courseware/library.vue';
export default function(router) {
 router.map({
  '/study/index': {component: courseIndex},
  '/study/waitCourse': {component: waitCourse},//待排课程
  '/study/waitCourse/gearCourse': {component: gearCourse},//待排
  '/study/course': {component: alreadyCourse},//已排课程
  '/tr/courseware': {component: courseWare},//课件管理
  '/tr/courseWare/library': {component: courseWareLibrary},//自主上传课件库
 });
}

拆分后,每个模块管理它自己领域的router、api,router.config.js和api.config.js就大大瘦身了,也降低了命名冲突的问题和将来混乱的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
vue增删改查的简单操作
Jul 15 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue实现tab切换外加样式切换方法
Mar 16 #Javascript
javaScript中"=="和"==="的区别详解
Mar 16 #Javascript
node.js博客项目开发手记
Mar 16 #Javascript
vue iView 上传组件之手动上传功能
Mar 16 #Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 #Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 #Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python安装及变量名介绍详解
2020/12/12 Python
英国电信商店:BT Shop
2019/12/17 全球购物
新年联欢会主持词
2014/03/27 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
大学生毕业评语
2014/12/31 职场文书
2015年教研组工作总结
2015/05/04 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
详解Python中__new__方法的作用
2022/03/31 Python