详解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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
[转]JS宝典学习笔记
Feb 07 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 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中处理模拟rewrite 效果
2006/12/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
vue-cli配置文件——config篇
2018/01/04 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
python回调函数的使用方法
2014/01/23 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python 加密的实例详解
2017/10/09 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
在python里面运用多继承方法详解
2019/07/01 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
初三家长会邀请函
2014/01/18 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
工作决心书
2014/03/11 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers