/Layui-admin

一个现成的 Layui+Vue的后台系统模板，开箱即用

Primary LanguageJavaScriptMIT LicenseMIT

Layui-admin

一个现成的基于 Layui+Vue的后台系统模板，开箱即用（最近开源，将会长期维护，文档还在整理中）

注意：相较于vue的spa或者是后端模版，他最大的特点就是开发快，非常快。ui风格也非常统一。看过很多用vue的第三方ui框架做的后台，但是说实话最终呈现给用户的并不如ui本身一样美丽。这套的皮肤你可以自己定制，而且本省也很漂亮，很整洁。

前言

前后端小伙伴们对后台系统肯定都不陌生，市面上基于主流前端UI框架的后台模板一抓一大把。基于Bootstrap风格的，基于Vue的iView、Element。基于React的Ant Design等等。但是很多时候你想要的仅仅是一个现成的页面模板，一个能迅速帮你完成开发的框架而已，Layui-admin就是这样一个接近完成的后台系统模板，它已经帮你完成了从登录验证，记住密码，权限管理，字段校验，搜索查询，联动全屏，刷新，主题切换等一系列功能的后台模板。它最大的特定就是帮你完成了这类系统中常见的数据交互部分，你需要做的就是理解交互原理，对接接口，替换字段，刷新。哇！原来这么简单！（so cool !）。

注：因为众所周知的原因，本项目完全不支持ie9及ie9以下的浏览器，对于采用ie内核小于9的国产浏览器给出切换提示。首次加载采用极速模式。

说明

该项目是一个通用的后台系统模板框架，交互方式和代码复用性很高，基本上只要你理解了原理，会写一个页面，其他的自然不成问题。

技术栈

Layui 2 + Vue 2 + es5 + Router

特点

  • 整个前端页面原理基于iframe标签页实现，偏传统开发方式，没有纷杂的前端配置，能够做到上手即用，上手门槛低
  • 响应式框架，支持多端，提供常见主题，可自己定制（正在适配）
  • 封装了零碎小功能，可以更具需求增删改
  • 基础数据采用双向绑定，简单高效，常见交互方式demo完整，功能内容丰富
  • 浏览器不支持检测
  • 数据请求部分已经帮你写好，你要做的只是获取数据和简单校验
  • Layui-Admin基于Layui+vue，采用前后端完成分离的方式运行（JSON WEB TOKEN 认证）
  • 免费、开源

适用人群和项目

  • 中小型的后台系统
  • 服务器端开发人员
  • 时间紧，任务重，前端人数少，想尽快完成项目的小伙伴
  • 虽然采用了目前主流的方案，但实际效果并不理想

项目运行

git clone https://github.com/weberandphper/Layui-admin.git

修改common.js的接口配置文件

var baseUrl = window.baseUrl='http://192.168.1.138:8001';

设置WEB服务器站点(nginx,apache,iis,编辑器内置web服务器都可以)

浏览器访问 http:localhost/login.html

目标功能 （注：demo都是这类系统中最通用的功能模块，实际开发中根据需求自己改写）

  • 登录，记住账号密码 -- 完成
  • 功能菜单列表切换 -- 完成
  • 便捷菜单查询 -- 完成
  • 服务器时间，实时天气（已隐藏），主体皮肤切换 -- 完成
  • 个人信息，退出，消息提示，更新说明 -- 完成
  • 权限列表获取，功能菜单展开，收缩 -- 完成
  • 多页面切换，关闭，批量处理功能 -- 完成
  • 常见功能按钮（全屏，锁屏，刷新本页，二维码还有若干隐藏按钮） -- 完成

效果展示

查看demo请戳这里（请用chrome浏览器预览）

上图

登录

image

账户管理

image

公司列表

image

重置密码

image

屏幕锁

image

更换皮肤

image

菜单列表

image

列表

image

版本提示

image

运行程序

配置common.js接口地址和Layui模块入口

localhost/index.html

项目结构说明

.
├── build                                       // 项目主题,自定义模块
├── components                                  // 自定义组件
├── datas                                       // 模拟接口数据
├── module                                      // 业务模块划分(业务代码)
│   ├── account                              	// 账号模块
│   │   ├── account.html                        // 账号管理页面
│   │   └── role.html							// 角色管理页面
│   ├── count                              	    // 会员管理
│   │   ├── account.html                        // 会员列表
│   ├── drugstore                              	// 公司管理模块
│   │   ├── companylist.html                    // 公司列表
│   │   └── form.html							// 外部表单
│   ├── finance                              	// 财务管理模块
│   │   ├── tradedetail.html                    // 交易明细
│   ├── member                              	// 会员管理模块
│   │   ├── memberlist.html                     // 会员列表
│   ├── other                              	    // 其他模块
│   │   ├── resetpassword.html                  // 重置密码
│   ├── plugins                                 // 引用的插件或者资源库存（Layui+vue+echarts）
│   ├── resources                               // 静态资源
│   ├── About.txt                               // 更新说明
│   ├── common.css                              // 公共样式
│   ├── common.js                               // 公共函数,接口和Layui模块配置
│   ├── favicon.ico                             // ico图标
│   ├── index.html                              // 首页
│   ├── login.html                              // 登录页面
│   ├── main.html                               // 首页统计页面
│   ├── manifest.appcache                       // 应用缓存配置
│   ├── README.md                               // README.md
│   ├── styles.css                              // 首页样式

注意点

如果你想用这套的话，下面的就要好好看了。

由于数据请求全靠ajax，所以这块我已经提前封装好了，函数节流，防抖，还有请求超时或失败提示，token失效跳转等已经写好了，代码很简单，注释也很全面，所以和请求相关的尽量使用此封装，不满足需求的可在此基础上封装，模块位置 /build/js/ajaxmod.js

后端接口

后端接口格式


{
	"data": {
		"enums": {},
	},
	"success": true,
	"message": "",
	"code": 200
}

为了..... 等一系列原因，请尽量保证接口为restful，每个请求验证token。失效需要重新登录

后端特定code的定义

此code非http状态码，即便请求失败，但是code可能依然是200，此处我就不详细解释了。但是一般后端会将约定好的特定code返回表示特定的含义。比如后端小哥告诉我 code == 1001 代表 登录验证失效。所以我在ajax封装中对1001进行了特定的判断，然后 layer.msg('登录验证失效，即将跳转到登录页面');

分页接口

注意：后台系统中分页算是非常重要的一个功能了，其中包含了查询。Layui对分页的封装是我用过目前最方便和好用的。如果你是从后端分页过来的很容易get到点。当然现在即便分页放后端，后端框架也基本上都集成了。分页放前端，后端写的更少。

请尽量保证后端分页接口数据格式为：

{
	"data": [{
		"id": 20180612,
		"name": "anspray"
	}],
	"count": 2061,
	"success": true,
	"message": "",
	"code": 200
}

如果后端接口格式或者字段不匹配，请使用table.render（...response: {})进行转换

前端

checkbox bug

vue 绑定数据在遇到select和checkbox有问题

关键代码释解

页面模块如何划分

本项目是后台系统，所以主要开发任务在于功能页面的开发，前端module内的模块划分按照业务模块（原型）或者后端模块划分即可，具体命名可以和后端统一下。划分和单页应用开发的划分是类似的。

前端路由部分

该后台模板支持前端路由，采用url hash 原理，比如即 http://localhost/index.html#adduser, iframe 就会去请求module/user/adduser.html 页面完成加载。路由地址在build/js/routermod.js下，路由模块加载位于common.js下，在index.html完成对权限列表的添加。

编写原则

为什么采用Layui为主体呢，就是应为Layui提供一致的UI风格(很适合做这种后台系统)，提供众多组件和交互方案，采用这套事倍功半。vue作为当下热门的mvvm框架，其实很多功能和Layui本身是冲突的。同一个功能或者数据操作Layui和Vue都可以完成。如何选择呢？ 答：数据交互部分，包括数据的请求，发送，事件的触发常见函数的调用优秀采用Layui提供的，对于数据的操作，数据的绑定，优先用Vue，两者在操作dom和数据上尽量做到不冲突。让二者都发挥各自的优点。

吐槽

到目前为止，后台系统开发了很多个，从前端嵌套在后端页面中，到后端模板输出，到现在的前后端完全分离。每种方式都有自己的优点和特定，但是就后台系统而言，采用前后端分离应该最佳的开发方式了。

Layui 的暂存bug（老旧版本可能会有这个问题）

Layui的form.on在数据提交的时候，checkbox的序列化存在问题，会在[]中加入index，造成后端接受数据错误。目前在序列化表单前解决

Layui配合vue使用中出现的问题

Layui对原生表单的封装在和vue绑定数据的时候会有问题。

存在的问题

iframe中相同资源的加载

index.html和子iframe中的相同静态资源浏览器是怎么处理的呢？

你会发现假如你在父页面中引用了common.css,在子页面中的common.css是不是直接用缓存了呢？实际上iframe的所有资源浏览器是会重新请求一遍。这点不同于子页面是ajax获取渲染的方式。父页面和子页面（iframe）的数据传递就不要用url传值了，这个在序列化复杂对象时会有问题，推荐直接layero.find("iframe")[0].contentWindow.vm.setdata(data)这种，细节见代码，子对父的传值 parent.closeandrefresh()，加上双向数据绑定开发会很方便，contentWindow和parent请自行查阅文档

关于缓存

由于该后台模板不是按照单页面那样开发的，所以没有办法对静态资源部分进行单独处理。但在我实际的开发中页面缓存又很烦人，我这边采用的方式是配置应用缓存，appcache的配置和使用方法请自行查阅，web服务器端的meta头的设置不要忘了，不管是IIS还是apache还是nginx思路都是一样的。

多端适配

目前在多端的显示和提示还有很多问题，正在改进。

目标

我的目标是想编写一个相对完整的后台系统模板，它的交互方式成熟，页面风格统一，页面整齐。定制化程度相对较高。无论是前端还是后端都能够快速上手，帮助你又好又快的完成产品或者项目。

最后

由于我不太善于表达，所以文本都很生硬，请大家见谅

由于水平和时间有限，所以难免会有错误，欢迎lssues提出，我会在线解决。

如果喜欢一定要star呀 ！