OpenJWEB开发平台基于LayUI框架改版介绍(上)

【OpenJWeb作者：abao，微信号openjweb】

今年的春节因为武汉新型肺炎的原因，只能宅在家里做开发。长期以来一直想对OpenJWeb的后台进行改版，因为OpenJWeb的后台已经非常“古老”了，随着各种UI框架的不断问世，从JQueryUI、QUE、BootStarp到LayUI，经过不断的筛选，最终选择了使用LayUI框架做为OpenJWEB 的后台UI。

最终我选择了LayUI的单页版作为后台UI框架，主要原因是：

1. LayUI的分页、查询封装的非常好，特别方便，界面开发根本不需要自己手工写分页脚本、拼写查询条件等。
2. LayUI的单页版是动静分离的，单页版页面都是纯HTML的，基本的技术架构就是LayUI html单页版页面+Jquery+Spring MVC Restful API接口。使用这种模式的好处在于，我们可以真正地为服务器减负了，我们不再需要JAVA服务器来解析JSP页面了，这样JAVA服务器只负责接口的处理就可以了，所有的展示层都交给Nginx服务器处理，而且性能不足可以部署更多的Nginx服务器。
3. LayUI建议使用JWT的登录验证模式，OpenJWeb原来的版本采用的是Spring Security框架，但是JWT的模式，采用Token可逆加密模式，服务器端不需要存储session会话信息，也不需要存储跟口令认证相关的任何缓存，所以还是减少了服务器的内存、缓存存储的资源消耗。

   因为LayUI 单页版的动静分离的风格，所以OpenJWeb原有的SSH（Spring+Struts2+Hibernate）的模式，就演变为LayUI+Jquery+SpringMVC+Hibernate的模式了，struts2控制层就不再需要了（为了保留业务功能，struts2还会在openjweb中保留比较长的时间，但是新功能开发不再使用struts2）。

下面我们介绍一下基于LayUI改造的功能：

 

• 登录注册找回密码

    登录注册找回密码的功能虽然简单，但是也涉及到了获取图片验证码、获取短信验证码、注册、登录、生成JWT token串，JWT token串反向解析等许多后台接口。登录注册忘记密码的界面这里就不贴图片了。后续会具体介绍OpenJWEB的登录、注册等接口及JWT的实现。

• 后台首页

    

 

• 具体功能

目前基于LayUI改版的功能包括：

子系统	功能分组	功能点	备注
系统管理	系统配置	功能菜单定义	树形菜单、权限
		系统参数配置
	组织结构与授权	单位基本信息	SaaS平台单位
		组织结构管理	部门树
		系统角色管理	角色+授权
		用户管理	交互比较多的界面
	基础数据	国家与地区
		数据字典类型	含主明细风格
		数据字典
		行政区划
	网络安全	注入字典管理
快速开发	数据库管理	表结构定义
		表字段定义
	二次开发管理	子系统管理
门户网站	网站会员管理	注册会员管理
	网站配置	网站基本信息
		图片幻灯设置
电子邮箱	系统邮箱设置	系统邮箱设置
短信平台	短信运营商资料
	短信账户管理

 

3.1 功能菜单定义

基于LayUI tree实现的树形功能菜单：

 

3.2 系统参数配置

 

 

编辑界面：

 

3.3 单位基本信息

 

单位信息编辑页（多Tab风格的页面）：

 

3.4 组织机构管理

组织机构管理即部门管理，这个界面使用了树形结构，弹出选择单位列表窗口，见下图：

 

下面是弹出选择公司的界面，选择不同的公司后，左侧树展示不同公司下的部门：

 

3.5 系统角色管理

系统角色管理含有一个角色授权的树形选择界面。

 

 

 

3.6 用户管理

用户管理功能界面也是一个比较复杂的界面，包括公司选择、左侧部门树展示，右侧根据选择的部门查询此部门用户。选择一个用户给用户授权。

 

 

为用户分配角色：

因为后面系统管理还有很多功能界面，所以这边文档先介绍到这里，随后再发布系统管理其他功能界面。