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

本文介绍了一个基于layui的框架模版,采用模块化设计和接口分离,实现组件化思想。代码结构清晰,api按模块管理,便于维护。同时,文章还探讨了组件化在页面加载和权限管理中的应用,提供代码实例和预览。
摘要由CSDN通过智能技术生成

代码地址如下:
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) {
   
    
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值