Based on a SpringBoot + Vue + Shiro front and rear ends to develop separate code generator

I. Introduction

Recently I spent a month to complete the end of the separation of the code generator based on a set of before and after Spring Boot + Vue + Shiro, the current project has been basically completed the code

Stop traditional CRUD, advanced code optimization:

The items can be dynamically generated based on the database field controller, mapper, service, html, jsp, vue, php, .py ... other types of codes, using the velocity template engine configuration page dynamically generated code, dynamic rights arranged front and rear ends, permissions accurate to the front button level, accurate to the back-end permissions uri on, QQ authorize a third party such as a single-user login ...

Basic environment:

  1. JDK 1.8
  2. IDEA 2019.2
  3. Redis 5.0.5
  4. MySQL 5.7
  5. Nginx 1.17.1
  6. Docker 18.09.7
  7. Node.js 10.15.3

    Project uses technology stack:

    Front-end: Vue + Axios
    backend: Spring Boot, MyBatis-Plus
    cache: Redis
    permissions: Shiro
    .......

Second, the code generator Introduction

Online experience Address: http://www.zhengqing520.com:8100/code-generator/dashboard

Here Insert Picture Description

1, visit:

Test account: test Password: 123456

Since that part of the open questions online-only access permission code generator only needs to access control, and other functions of the system log source can refer to fork ~

Login There are currently three parties support QQ unauthorized access, the default permissions for only the code generator module, after login, do not operate within 30 minutes will be automatically off the assembly line, the same account login will be pushed off the assembly line elsewhere, click on the picture self in personal information modify accounts, passwords, nicknames
Here Insert Picture Description

2, the code generator

① Project Management

Here Insert Picture Description
新建一个项目后,编辑项目包,这里和我们ide打开一个项目下面的包层次类似,后面生成的代码也将存放在此树包目录下,可以根据自己的需求来灵活配置建包
Here Insert Picture Description

② 初始模板

Here Insert Picture Description
这里可以选择给自己的项目添加一个初始模板,在项目模板管理处可选择项目进行一键新增生成对应的模板
Here Insert Picture Description
生成规则:根据项目管理中的包名与初始模板中的模板类型名对应上即可生成,不对应的即不会处理~

③ 项目模板管理

列表页面和初始模板列表页面类型,不同的是新增时需要选择项目哦,后面的代码生成将会依照这里配置的代码模板动态生成!
Here Insert Picture Description
于是乎,整个代码生成的精髓就在乎这里自己项目所配置的模板哦,这里也给出了可以参考配置的模板数据

数据源配置信息,要在根据数据库字段生成一次代码后才拥有数据可以查看哦,不然会是空数据!

Here Insert Picture Description
ex: ${author} 对应生成 zhengqing
${package.input} 对应生成 com.zhengqing.modules.system.dto.input
Here Insert Picture Description
另外就需要参考 Velocity 模板引擎的基本语法使用了
这里再例出一个小编配置的实体类模板吧

温馨小提示:在项目的sql中保存有小编代码生成器项目中配置的项目模板以供参考哦~

package ${package.entity};

#foreach($pkg in ${table.importPackages})
import ${pkg};
#end
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

/**
 * <p>  ${table.comment} </p>
 *
 * @author: ${author}
 * @date: ${date}
 */
#if(${table.convert})
@Data
@ApiModel(description = "${table.comment}")
@TableName("${table.name}")
#end
#if(${superEntityClass})
public class ${entity} extends ${superEntityClass}#if(${activeRecord})<${entity}>#end {
#elseif(${activeRecord})
public class ${entity} extends Model<${entity}> {
#else
public class ${entity} implements Serializable {
#end

    private static final long serialVersionUID = 1L;

#foreach($field in ${table.fields})
#if(${field.keyFlag})
#set($keyPropertyName=${field.propertyName})
#end
#if("$!field.comment" != "")
    /**
     * ${field.comment}
     */
    @ApiModelProperty(value = "${field.comment}")
#end
#if(${field.keyFlag})
    @TableId(value="${field.name}", type= IdType.AUTO)
#else
    @TableField("${field.name}")
#end
    private ${field.propertyType} ${field.propertyName};
#end

#if(${entityColumnConstant})
#foreach($field in ${table.fields})
    public static final String ${field.name.toUpperCase()} = "${field.name}";

#end
#end
#if(${activeRecord})
    @Override
    protected Serializable pkVal() {
#if(${keyPropertyName})
        return this.${keyPropertyName};
#else
        return this.id;
#end
    }

#end
}
④ 数据库管理
  1. 连接数据库
    Here Insert Picture Description
    这里便是配置数据库连接信息了,这里小编给出一个开放的数据库可供连接测试使用,希望读者不要乱搞哦
    数据库连接地址:www.zhengqing520.com:3306 用户名:hello 密码:root
    可以在本地连接小编给出的数据库 在里面新建表然后在页面配置连接后选择表测试生成哦~
    Here Insert Picture Description
  2. 选择表
    Here Insert Picture Description
  3. 生成代码或修改远程数据库注释信息,这里为了安全考虑未做新增字段,删除字段等功能,如有兴趣,可fork小编源码自行修改其功能
    Here Insert Picture Description

3、系统管理

① 用户管理

这里不多说,就是一些基础信息

② 角色管理
  1. The specified role is assigned to the specified user
    Here Insert Picture Description
  2. Permissions assigned to the specified role
    Here Insert Picture Description
③ Menu Management

In this dynamic configuration the rear end with the front end button to request permission uri permissions
Here Insert Picture Description

④ system log

Here Insert Picture Description

Third, the summary

  1. The code generator, to break the traditional CRUD, avoid spending too much time on repeating things, more time for learning promotion
  2. The project can also have a lot to learn techniques for white, such as 前后端分离, 跨域解决, 三方授权登录, @Validated后端参数校验, 简单的redis缓存处理, shiro动态权限配置, 前端按钮级别权限控制and so on, the back-end using the current popular business Spring Boot+ MyBatis-Plustechnology stack, front-end is more common learning easy vue. For the full stack get started is a good demo
  3. This article is currently only given project introduced the use of the process, if the follow-up time, which will give the case some technology stack tutorial
    case demo code will be placed to:https://gitee.com/zhengqingya/java-workspace
Note: The implementation of the reference code generator before and after the end of a lot of online tutorials, and small series boss 肖哥, in this month of time, during the day, go home at night to take advantage of idle time code is the code, which is also learned a lot, now for everyone to share, we are hoping to help the needy little friends ~

Source Project

You can also think of the words, Give me ❤

GitHub Address:https://github.com/zhengqingya/code-generator
Cloud code Address:https://gitee.com/zhengqingya/code-generator

Guess you like

Origin blog.51cto.com/14450805/2439791