1. 准备工作
编辑器vscode,需要安装liveServer插件在前端开启静态服务器
或者使用hbuilder的自带服务器
概述
由于公司业务比较复杂,并且有很多重复性的功能,所以尽量采用高可复用的原则,该系统采用完全分离的开发方式,所有数据采用接口调用,所以由于功能模块较多,为了维护容易,采用api分模块管理,不同模块api彼此隔离,按需引用,这避免了之前将所有api接口放到一个文件中不好维护的问题,由于系统列表比较多,单独抽离出table模块,将datatable进行二次封装,尽量采取约定大于配置的思想,尽可能将通用的配置设为默认,如果有个性的需求,则通过传配置的方式进行变更,同时也封装了一些其他模块,也是同样的思想
代码结构
代码讲解
目录介绍
js/modules
这里存放公用的模块化工具,模块化思想,这里主要包括以下模块
简要讲解一下
#### api
api包存放后台的接口,采用模块化管理api,一个功能模块建一个xxx-api.js,页面引用的时候,按需引用,依赖那几个模块的api就用哪几个api
优点
避免众多模块如果写在一个js中进行管理,难以维护,因为页面用的时候是根据api对象的key值获取对应url,写在一起需要各个模块起名要避免重复,分模块管理可以不同模块key值相同,起名时候方便
代码解释
首先是base-url.js,所有api都继承于这个模块,baseurl主要存放公用的url和获取url的方法,比如请求下拉框接口一般会通用一个接口,这样的就可以放在baseurl中,其他模块继承于他,获取下拉框url时候就直接调用getUrl(‘getKeyValue’)就可以,而没有必要再在相应的api模块中在定义一遍
以下是base-url的代码:
/**
* 基类配置api,其他的api全继承于此
* @author nabaonan
*/
layui.define(function(exports) {