从简到繁——SSM个人博客搭建完全记录【2】后台管理系统页面设计——使用Layui
前言
搭建完生产环境，接下来进行后台管理系统页面的设计。目前自己的学习重点和知识领域主要还是在后端，但是前端有很多框架，或者说很多适合后端程序员使用的框架，比如easyUI、Boostrap等，能够在前端知识有限的情况下完成一些简单的开发。这里我选择了Layui进行后台管理页面的编写。Layui提供了很多组件拿来就用，风格也非常简洁，且文档友好，很适合快速开发。这是官网提供的文档：layui开发使用文档。
主要功能
- 登录（前后台跨域单点登录）、注销、密码修改
- 博客增、删、查、改
- 博客类别增、删、查、改
- 评论删、查
登录页面（login.jsp）
首先下载Layui：点此下载，解压，然后把压缩包里面的layui文件夹移到项目的statics文件夹下：
接着在spring-mvc.xml里配置静态资源映射，加上这一条：
为了方便测试我们写一个Controller：
package com.vansl.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @author: vansl
* @create: 18-3-24 下午12:49
*/
@Controller
public class LoginController {
@RequestMapping("login")
public String login(){
return "login";
}
}首先先把html大致框架搭好：
<%--
Created by IntelliJ IDEA.
User: vansl
Date: 18-3-24
Time: 下午12:45
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
登录
然后在在main这个div里面加上Layui提供的表单控件，在这之前需要引入Layui的css文件：
根据文档说明，只需要引入这一个css文件就可以了，依赖关系已经处理好。
html代码：
为了界面更美观添加一些样式上去：
把图片都放好之后，最后呈现出来的效果图如下：
最后是js代码，引入Layui的js文件，然后做一些简单的表单验证、ajax请求登录等任务：
登录页完成，接下来就是后台管理页面了。
后台管理页面（admin.jsp）：
首先仍然是先把基本的框架搭起来，这里我直接使用了Layui官方提供的示例：后台布局，在此基础上稍加修改并根据博客系统的需求更改各项标签，代码如下：
<%--
Created by IntelliJ IDEA.
User: vansl
Date: 18-3-25
Time: 下午5:29
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
博客后台管理
后台管理系统呈现的效果如下：
html页面的大致框架搭起来以后，分步来完成以下这几个主要功能模块：左侧菜单栏的收缩、内容主体区域（数据表格和富文本编辑器）、ajax前后台的交互（初步代码）。由于js的内容会比较多，把js代码放在单独的文件admin.js里。
- 左侧菜单栏的收缩
用到了jQuery的animate()方法，实现起来比较简单，代码如下：
layui.use(['layer','element'], function(){
//加载所需模块
var layer = layui.layer,
element = layui.element,
$ = layui.jquery;
i=0; //定义一个变量i以判断动画收缩
$('#switchNav').click(function(){
if(i==0){
$(".layui-side").animate({width:'toggle'});
$(".layui-body").animate({left:'0px'});
$(".layui-footer").animate({left:'0px'});
//更换指示图标方向
$("#switchNav .layui-icon").text("\ue65b");
i++;
}else{
$(".layui-side").animate({width:'toggle'});
$(".layui-body").animate({left:'200px'});
$(".layui-footer").animate({left:'200px'});
//更换指示图标方向
$("#switchNav .layui-icon").text("\ue65a");
i--;
}
});
});- 内容主体区域（数据表格和富文本编辑器）
首先是数据表格，分别对应三个功能有三张表：文章、评论、分类，使用Layui提供的表格组件：数据表格。点击左边的导航兰之后，页面的主体内容就切换成相应的表格或富文本编辑器。在这一过程中只有页面主体内容区域的变化，不需要重新加载整个页面，用ajax做局部刷新即可（题外话：包括使用ajax在内的单页面应用一个明显的缺点就无法前进后退（后台管理页面不用考虑搜索引擎seo），前端路由技术可以解决这个缺点，具体实现有hash和html5 history api两种方案：前端路由的两种实现原理。但是考虑到是后台页面结构较为简单，且项目重点在后端，我没有使用前端路由，以后看情况再继续完善）。以文章管理页面为例，在statics文件夹下新建html文件夹，然后创建一个静态html页面：
表格和工具条的创建、事件监听在Layui文档里都有详细说明。接着在spring-mvc.xml里配置html文件的静态资源映射：
在admin.jsp的左侧导航栏标签上绑定加载函数，增加一个class属性"layui-this"显示默认选中，并在admin.js里调用load函数以初始化页面：
文章管理 加载函数，使用jQuery进行ajax局部刷新：
function load(view) {
layui.jquery(".layui-body").load("/html/"+view+"_admin.html",function(){});
}最后根据上面表格创建里代码的接口地址以及Layui文档在js文件夹下新建一个testTable.json文件，放入相应的数据测试，显示页面如下：
评论管理也是一样的流程，这里不再赘述。
然后是个人分类管理页面。在数据库里博客分类表设计成可无限扩展模式，为了显示方便打算之后在后端限制分类的级数，前端同样容易为了实现我做成如下模仿省市区三级联动+弹框编辑的效果：
实际使用中发现交互性不是特别好，比较好的方案是树形视图+右键选择操作，以后视情况完善。代码比较长，可能不够精简，好在基本是自己实现的（联动部分学习了Layui社区的做法）：
分类选择表格的js代码在其他地方还会用到，为了复用将这部分代码放在单独的js文件（type_select.js）里面：
var categoryId;
var typeId;
var typeData;
//选项渲染
function appendOption($o,text,value){
//新建一个option
var $opt=layui.jquery("接着也是在js文件夹下面新建一个json文件放入测试数据，格式如下：
[{
"id":1,
"text":"Java",
"children":[
{
"id":2,
"text":"JavaSE",
"children":[]
}]
}
]最后就是新建文章页面了，主要是一个富文本编辑器。layui提供的富文本编辑器功能较少，所以我选择了比较成熟的百度UEditor：UEditor-首页。与SpringMVC的整合参考这一篇文章就可以：springmvc学习笔记--ueditor和springmvc的集成，写得非常详细。下载时注意下载源码版本，因为源码里有些地方需要修改。页面源码如下：
呈现的效果：
至此后台管理系统的页面部分就基本完成了。接下来是后台管理系统的后端开发。