使用 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 文件标识,红色的为新增
图中新增的有 servicecontroller
这只是冰山一角,如 system 里边也有 daomodel
这里写图片描述

Ⅲ、菜单生成

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<Blog> blogEntityWrapper = new EntityWrapper<Blog>();
        Wrapper<Blog> 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="id" name="" underline="true"/>-->
                <#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-plusshirobeetl 等。(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、或许现在觉得很麻烦,熟悉了这些常规操作,以后是分分钟钟的事情,令人大呼过瘾。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页