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

喜欢ヅ旅行 2022-05-12 09:58 185阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13362.html][http_www.demodashi.com_demo_13362.html]

# 1. 准备工作 #

编辑器vscode，需要安装liveServer插件在前端开启静态服务器  
或者使用hbuilder的自带服务器

# 概述 #

由于公司业务比较复杂，并且有很多重复性的功能，所以尽量采用高可复用的原则，该系统采用完全分离的开发方式，所有数据采用接口调用，所以由于功能模块较多，为了维护容易，采用api分模块管理，不同模块api彼此隔离，按需引用，这避免了之前将所有api接口放到一个文件中不好维护的问题，由于系统列表比较多，单独抽离出table模块，将datatable进行二次封装，尽量采取约定大于配置的思想，尽可能将通用的配置设为默认，如果有个性的需求，则通过传配置的方式进行变更，同时也封装了一些其他模块，也是同样的思想

# 代码结构 #

![RavC1MzYIZxVIQ7f4mR.png][]

# 代码讲解 #

## 目录介绍 ##

### js/modules ###

这里存放公用的模块化工具，模块化思想，这里主要包括以下模块  
![uyMe8u7hwnAIhMRtJhH.png][]  
简要讲解一下  
\#\#\#\# 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 #####

### 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);
            },

## 界面预览 ##

![K8PIbfeh0HVg15UIgST.png][]

## 权限管理 ##

### 权限列表 ###

![G9fM24DN0TcvMznuiOX.png][]

### 更新权限 ###

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

### 角色管理 ###

![FZcOm1cXdn8Szqbbycn.png][]

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

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

> 代码地址如下：  
> [http://www.demodashi.com/demo/13362.html][http_www.demodashi.com_demo_13362.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13362.html]: http://www.demodashi.com/demo/13362.html
[RavC1MzYIZxVIQ7f4mR.png]: /images/20220512/b3a0283c912345e68980727d733bd52a.png
[uyMe8u7hwnAIhMRtJhH.png]: /images/20220512/2b75fb6e032e46ed9ccd6902f89e5eaa.png
[K8PIbfeh0HVg15UIgST.png]: /images/20220512/e2e01df9fe4a47e182c20c9eeb47e33a.png
[G9fM24DN0TcvMznuiOX.png]: /images/20220512/344326c75a114e89a47f9b5a79456821.png
[NJHNl0F5HQSpu6MwVYz.png]: /images/20220512/fa07c2848afd411eaa3d8dc71f325721.png
[b1WNcsLTwWb0rPaRpbN.png]: /images/20220512/9243a92ee7424b13a342c016cec359d9.png
[FZcOm1cXdn8Szqbbycn.png]: /images/20220512/e8399fc7a18f4e6ca2c4f43d5ed04884.png