【OpenJWeb作者:abao,微信号openjweb】
今年的春节因为武汉新型肺炎的原因,只能宅在家里做开发。长期以来一直想对OpenJWeb的后台进行改版,因为OpenJWeb的后台已经非常“古老”了,随着各种UI框架的不断问世,从JQueryUI、QUE、BootStarp到LayUI,经过不断的筛选,最终选择了使用LayUI框架做为OpenJWEB 的后台UI。
最终我选择了LayUI的单页版作为后台UI框架,主要原因是:
- LayUI的分页、查询封装的非常好,特别方便,界面开发根本不需要自己手工写分页脚本、拼写查询条件等。
- LayUI的单页版是动静分离的,单页版页面都是纯HTML的,基本的技术架构就是LayUI html单页版页面+Jquery+Spring MVC Restful API接口。使用这种模式的好处在于,我们可以真正地为服务器减负了,我们不再需要JAVA服务器来解析JSP页面了,这样JAVA服务器只负责接口的处理就可以了,所有的展示层都交给Nginx服务器处理,而且性能不足可以部署更多的Nginx服务器。
- 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 用户管理
用户管理功能界面也是一个比较复杂的界面,包括公司选择、左侧部门树展示,右侧根据选择的部门查询此部门用户。选择一个用户给用户授权。
为用户分配角色:
因为后面系统管理还有很多功能界面,所以这边文档先介绍到这里,随后再发布系统管理其他功能界面。