使用 Guns 自动生成 SpringBoot + LayUI 的后台管理系统

一、前言

1、之前在做 ITAEM团队 的官网，需要做一个用户端（对外宣传，要求极致），一个后台管理端（自己人用，要求不高）。
2、当初 Python 开发，选择 Django，因其自带后台管理系统，因此可以很愉快地省了一个端。
3、但现在业务主流还是用 Java，笔者就想 Java 也能实现，无独有偶，guns 就是其中之一，且秀上一百倍。

二、guns 引入

GitHub地址：https://github.com/stylefeng/Guns
码云地址：https://gitee.com/naan1993/guns

三、使用方法

Ⅰ、项目准备

1.克隆项目：

git clone https://github.com/stylefeng/Guns.git

2.数据库准备：

建立一个 guns 数据库，执行官方sql：
https://github.com/stylefeng/Guns/blob/master/guns-admin/sql/guns.sql

3.修改数据源：

修改其中的所有数据源为你的 —— url、username、password：
https://github.com/stylefeng/Guns/blob/master/guns-admin/src/main/resources/application.yml
如把所有的

url: jdbc:mysql://127.0.0.1:3306/guns?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=UTC
username: root
password: root

改为

url: jdbc:mysql://121.79.167.130:3306/guns?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=UTC
username: root
password: 123

其他不用改就可以正常启动项目

4.启动项目：

运行：
https://github.com/stylefeng/Guns/blob/master/guns-admin/src/main/java/com/stylefeng/guns/GunsApplication.java

5、登录测试：

用户名：admin（超级用户）
密码：111111（数据库中的password是md5加密的）

Ⅱ、代码生成

1、创建表

如笔者的文章中的 blog

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `t_blog`;
CREATE TABLE `t_blog` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `author` varchar(200) COLLATE utf8_unicode_ci DEFAULT NULL,
  `date` datetime DEFAULT NULL,
  `link` varchar(1000) COLLATE utf8_unicode_ci DEFAULT NULL,
  `tag` int(11) DEFAULT NULL,
  `title` varchar(200) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=54 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `t_blog` VALUES ('49', '3456', '2018-08-29 19:09:57', '3456', '3546', '356354');
INSERT INTO `t_blog` VALUES ('50', 'tuyi', '2018-08-30 13:23:03', 'tui', '1', 'iuitu');
INSERT INTO `t_blog` VALUES ('52', 'wertwr', '2018-08-30 13:24:52', 'wertwert', '1', '52435');

2、代码生成

点击左侧菜单栏【代码生成】，
填好：
①作者（注释用到）、
②业务名称（注释用到）、
③模块名称（包名、类名等用到）、
④父级菜单名称（菜单显示的位置，以后可以改）、
⑤数据库表（一张）、
⑥模板（一般选择所有）
点击图左边的【生成】

3、效果

本项目是 git 命令下载下载的，具有 git 文件标识，红色的为新增
图中新增的有 service、controller，
这只是冰山一角，如 system 里边也有 dao、model

Ⅲ、菜单生成

1、菜单数据准备

执行上图中的 Blog.sql，都是插入的，如其中的一条，

INSERT INTO `guns`.`sys_menu` (`id`, `code`, `pcode`, `pcodes`, `name`, `icon`, `url`, `num`, `levels`, `ismenu`, `tips`, `status`, `isopen`) VALUES ('1036451800774975495', 'blog_detail', 'blog', '[0],[blog],', '博客管理详情', '', '/blog/detail', '99', '2', '0', NULL, '1', '0');

推测为生成菜单项

2、菜单位置

点击【系统管理】->【菜单管理】

到最下面，可见有刚刚插入的记录生成的备用菜单

点击生成的【博客管理】，点击上方的【修改】，可以修改【父级编号】，可以修改其未来显示的位置

3、菜单对目前角色可见

左边菜单栏【系统管理】->【角色管理】

选择用户，点击上面的【修改】，勾选可见菜单项，点击【保存】，刷新页面

效果如下

但是界面的数据项，CRUD时，都是没有 label 名称的，如绿色框中的

Ⅳ、界面优化

1、显示

首先优化显示的所有数据，其他同理，以后其他项目的修改代码的位置，类似
位置：Guns\guns-admin\src\main\webapp\static\modular\blogmanage\blog\blog.js

/**
 * 初始化表格的列
 */
Blog.initColumn = function () {
    return [
        {field: 'selectItem', radio: true},
            {title: '', field: 'id', visible: true, align: 'center', valign: 'middle'},
            {title: '', field: 'author', visible: true, align: 'center', valign: 'middle'},
            {title: '', field: 'date', visible: true, align: 'center', valign: 'middle'},
            {title: '', field: 'link', visible: true, align: 'center', valign: 'middle'},
            {title: '', field: 'tag', visible: true, align: 'center', valign: 'middle'},
            {title: '', field: 'title', visible: true, align: 'center', valign: 'middle'}
    ];
};

修改为如下，其实就是给个 title 值

/**
 * 初始化表格的列
 */
Blog.initColumn = function () {
    return [
        {field: 'selectItem', radio: true},
            {title: 'id', field: 'id', visible: true, align: 'center', valign: 'middle'},
            {title: '作者', field: 'author', visible: true, align: 'center', valign: 'middle'},
            {title: '日期', field: 'date', visible: true, align: 'center', valign: 'middle'},
            {title: '链接', field: 'link', visible: true, align: 'center', valign: 'middle'},
            {title: '1/0：显/否', field: 'tag', visible: true, align: 'center', valign: 'middle'},
            {title: '标题', field: 'title', visible: true, align: 'center', valign: 'middle'}
    ];
};

并重启项目，效果如下

2、查找

位置：Guns\guns-admin\src\main\java\com\stylefeng\guns\modular\blogmanage\controller\BlogController.java
原代码

    /**
     * 获取博客管理列表
     */
    @RequestMapping(value = "/list")
    @ResponseBody
    public Object list(String condition) {
        return blogService.selectList(null);
    }

改为（增加个条件利用）

    /**
     * 获取博客管理列表
     */
    @RequestMapping(value = "/list")
    @ResponseBody
    public Object list(String condition) {
        if(ToolUtil.isAllEmpty(condition)){
            return blogService.selectList(null);
        }
        EntityWrapper blogEntityWrapper = new EntityWrapper();
        Wrapper title = blogEntityWrapper.like("title", condition);
        return blogService.selectList(title);
    }

这里需要一定的 mybatis-plus 基础：在 SpringBoot 中引入 MyBatisPlus 之 常规操作

3、增加

位置：Guns\guns-admin\src\main\webapp\WEB-INF\view\blogmanage\blog\blog_add.html
原码

<div class="row">
    <div class="col-sm-6 b-r">
                <#input id="id" name="" underline="true"/>
                <#input id="author" name="" underline="true"/>
                <#input id="date" name=""/>
    div>

    <div class="col-sm-6">
                <#input id="link" name="" underline="true"/>
                <#input id="tag" name="" underline="true"/>
                <#input id="title" name="" underline="true"/>
    div>
div>

改为（增加个name）

<div class="row">
    <div class="col-sm-6 b-r">
                
                <#input id="author" name="作者" underline="true"/>
                <#input id="date" name="日期" type="date" underline="true" clickFun="laydate({istime:false,format:'YYYY-MM-DD'})" />
    div>

    <div class="col-sm-6">
                <#input id="link" name="链接" underline="true"/>
                <#input id="tag" name="显否：1/0" underline="true"/>
                <#input id="title" name="标题" underline="true"/>
    div>
div>

4、修改

位置：‪Guns\guns-admin\src\main\webapp\WEB-INF\view\blogmanage\blog\blog_edit.html

<div class="row">
    <div class="col-sm-6 b-r">
                <#input id="id" name="" value="${item.id}" underline="true"/>
                <#input id="author" name="" value="${item.author}" underline="true"/>
                <#input id="date" name="" value="${item.date}" />
    div>

    <div class="col-sm-6">
                <#input id="link" name="" value="${item.link}" underline="true"/>
                <#input id="tag" name="" value="${item.tag}" underline="true"/>
                <#input id="title" name="" value="${item.title}" />
    div>
div>

改为（增加个name）

<div class="row">
    <div class="col-sm-6 b-r">
                <#input id="id" name="id" value="${item.id}" underline="true"/>
                <#input id="author" name="作者" value="${item.author}" underline="true"/>
                <#input id="date" name="日期" value="${item.date}" type="date" underline="true" clickFun="laydate({istime:false,format:'YYYY-MM-DD'})" />
    div>

    <div class="col-sm-6">
                <#input id="link" name="链接" value="${item.link}" underline="true"/>
                <#input id="tag" name="显否：1/0" value="${item.tag}" underline="true"/>
                <#input id="title" name="标题" value="${item.title}" />
    div>
div>

5、删除

没有问题，不用改

四、Guns 其他营养

1.整合示范

SpringBoot 整合其他优秀的开源框架的案例，
如：mybatis-plus、shiro、beetl 等。（Guns v5.0 剔除了shiro）

2.风格学习

①如：代码为 rest 风格

3.细节借鉴

②如：配置 MySQL：各种参数，处理周到，值得借鉴

jdbc:mysql://127.0.0.1:3306/guns?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=UTC

4.代码复用

③如：guns 封装好的 web-upload-object.js，
https://github.com/stylefeng/Guns/blob/master/guns-admin/src/main/webapp/static/js/common/web-upload-object.js
让图片的上传功能只须2行代码，我们大可复用 web-upload-object.js 到其他项目中。

var avatarUp = new $WebUpload("avatar");
avatarUp.init();

五、小结

1、API文档：
github 上的试看版，点击进入，完整版是要收费的

2、使用版本注意：
目前码云上面的最新的版本是 V5.0 ，pom 有问题
而GitHub上的最新的版本是 V4.2，一切正常

3、或许现在觉得很麻烦，熟悉了这些常规操作，以后是分分钟钟的事情，令人大呼过瘾。