代码地址如下：
http://www.demodashi.com/demo/13362.html

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) {var AjaxUrlConfig = {baseUrl:window.top.getWebName()+ "/json/", //根目录"datatables/language": {url:"../frame/datatables/language/chs.json"//这个url是相对baseUrl的},//下拉框和radio，checkbox接口"getKeyValue": {url: "../key-value.json"},getUrl: function(urlKey) {var url, type;try {url = this[urlKey].url;type = this[urlKey].type;} catch(e) {console.log("urlkey错误，请配置：", urlKey);}var namespace = this.namespace||'';return {url: (this.baseUrl + namespace + url),type: type || "get"};},getAbsoluteUrl:function(urlKey){return this[urlKey].url;}};exports("base-url", AjaxUrlConfig);//这个输出的key相当于是应用的时候的名字
});

为了便于理解，只上一个简单的登录模块api，

/*** 登录api*/
var requireModules =['base-url'
];
window.top.registeModule(window,requireModules);//这个方法是为了解决不同页面可能多次引用相同模块报错，方法的效果就是如果引用了就不再次引用layui.define(requireModules, function(exports) {var $ = layui.jquery;var baseApi = layui['base-url'];var url = {namespace:'login/','validLogin': {url: '../true.json'},'login': {url: 'login.json'},'logout': {url: '../true.json'},'getValidImg': {url:'../../image/v.png'}}var result = $.extend({},baseApi, url);exports('login-api', result);});

页面使用api

var webName = getWebName();layui.config({base: webName + '/js/modules/' //这个路径以页面引入的位置进行计算
});var requireModules = ['request','role&authority-api',
];//参数有顺序
layui.use(requireModules, function(ajax,authorityApi,// 这个名字可以自定义，就是一个形参
) {ajax.request(authorityApi.getUrl('updateAuthority'), data,  function() {});
})

js/controller

该模块下对应页面的js，命名和页面相同，用来操作页面

views

存放所有页面

frame

存放公共类库，比如datatables，ztree，jquery

css

公共样式

json

本地模拟数据

组件化思想

由于本项目页面有许多页面需要公用，比如查看分中心页面，一个页面需要有好几部分，历史记录，基本信息，审核记录，而且这些信息其他页面也有涉及，所以采用组件化加载，就是把他们拆分成一个个小页面，通过jquery的load进行加载页面，拼成一个完整的页面
上代码：
这个

  renderPage: function() {this.loadBranchCenterInfo();this.loadContractInfo();e.tabChange('auditList', 'audits-1');e.tabChange('recordsList', 'records-1');},

以下是加载相应页面，通过jquery.load

   //本期合同记录loadContractRecords: function($container) {window.isHistory = false;window.layFilter = 'recordsList';var url = ajax.composeUrl(webName + '/views/contract/contract-records-list.html', data);$container.load(url);},

界面预览

权限管理

权限列表

更新权限

权限分为菜单和按钮两种类型，首先添加菜单，和子菜单，在最后一级子菜单添加按钮，然后在角色配置相应的权限，进行显示，按钮分为行内按钮和页面按钮，行内按钮就是，列表每一行的操作按钮，行内按钮分为开关类型和普通的按钮

角色管理

如果有什么需要补充的，欢迎指正

基于layui的框架模版，采用模块化设计，接口分离，组件化思想

代码地址如下：
http://www.demodashi.com/demo/13362.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

基于layui的框架模版，采用模块化设计，接口分离，组件化思想相关推荐

PHP数据layui表格,基于layui和thinkphp数据表格的数据接口,layui表格局部刷新
基于layui和thinkphp数据表格的数据接口基于获得和框架数据表格的数据接口,接口程序部分,来源于网络图,但很有用前端URL : '/管理员.PHP/文章/列表' 后端公共e函数列表(){ ...
AliOS Things 基于组件化思想的多bin特性
摘要: 今年杭州云栖大会上,AliOS Things正式发布,其中有一个基于组件化思想的多bin特性,这是AliOS Things有专利保护的多bin fota升级解决方案的核心今年杭州云栖大会上, ...
基于VUE只是作为模版引擎的前后端分离
首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...
Android 架构设计(四)：组件化？
同系列传送门 Android 架构设计(一):设计模式分析_赵星海的博客-CSDN博客 Android 架构设计(二):分包和文件结构_赵星海的博客-CSDN博客_android 分包结构 Andro ...
基于云开发的答题活动小程序v2.0-结合具体场景谈谈路由传参以及组件化思想
项目技术栈微信原生小程序+云开发.我这里主要使用了云开发能力中的小程序端SDK,说白了就是在javascript中就能直接操作数据库. 本篇前言基于云开发的答题活动小程序v2.0的源码地址,以及手 ...
基于java SSM框架的旅游网站设计开发(含源文件)
欢迎添加微信互相交流学习哦! 项目源码:https://gitee.com/oklongmm/biye 效果截图: 数据库表: CREATE TABLE t_admin ( id int(11) NO ...
基于web的在线考试系统的设计与开发
欢迎添加微信互相交流学习哦! 项目源码:https://gitee.com/oklongmm/biye2 在线考试系统的设计与开发目录 TOC 1-3 第一章绪论 1 1.1在线考试系统的研究背景 ...
基于单片机仓库智能巡检车的设计
word完整版可点击如下下载>>>>>>>> 基于单片机的仓库智能巡检车的设计-硬件开发文档类资源-CSDN下载内容包括详细设计文档word版,附带开 ...
模拟物流快递系统程序设计java_路辉物流设备：大件快递自动分拣系统的模块化设计...
物流企业运营所需的能源.劳动力.土地价格持续上涨,依赖"高投入.低产出"传统物流运作模式难以为继,面临着降低成本.提高效率.可持续发展的转型要求.快递行业对于新兴的大件快递消费需求 ...