基于表的前后端代码生成工具

基于数据库表结构和注释的前后端代码生成工具。
后端生成基于SpringBoo2.x的MVC结构代码，前端生成基于vue-cli和elementUI的后台前端解决方案vue-admin-template
的页面组件代码，点击github地址了解更多关于vue-admin-template

基础准备

后端

• IntelliJ IDEA 开发工具
• IDEA插件EasyCode（进入idea插件市场搜索easycode）
• SpringBoot2.x
• MyBatis-Plus ORM框架
• Lombok

前端

• WebStorm（推荐使用）或Visual Studio Code
• node环境
• vue-cli3 脚手架
• 后台前端解决方案 vue-admin-template （一个基于vue-cli和elementUI的组件集成框架，包含router、axios、vuex和登录权限以及侧边菜单栏）

IDEA系列软件需要购买或者破解才能使用，获取破解方法

使用

使用之前先了解EasyCode插件使用方法

• EasyCode 选择 Group 为 MybatisPlus 生成代码
• entity层代码需要自定义一下，让它生成的代码是lombok形式的

##导入宏定义
$!define

##保存文件（宏定义）
#save("/entity", ".java")

##包路径（宏定义）
#setPackageSuffix("entity")

##自动导入包（全局变量）
$!autoImport
import lombok.Data;
##表注释（宏定义）
#tableComment("Entity")
@Data
public class $!{tableInfo.name} {
#foreach($column in $tableInfo.fullColumn)
#if(${column.comment})
    /**
     * ${column.comment}
     */
#end
    private $!{tool.getClsNameByFullName($column.type)} $!{column.name};
#end
}

• controller层的代码也需要自定义，让它继承自定义的通用BaseController类

##导入宏定义
$!define

##设置表后缀（宏定义）
#setTableSuffix("Controller")

##保存文件（宏定义）
#save("/controller", "Controller.java")

##包路径（宏定义）
#setPackageSuffix("controller")

##定义服务名
#set($serviceName = $!tool.append($!tool.firstLowerCase($!tableInfo.name), "Service"))

##定义实体对象名
#set($entityName = $!tool.firstLowerCase($!tableInfo.name))
##拿到主键
#if(!$tableInfo.pkColumn.isEmpty())
    #set($pk = $tableInfo.pkColumn.get(0))
#end
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import $!{tableInfo.savePackageName}.entity.$!tableInfo.name;
import $!{tableInfo.savePackageName}.service.$!{tableInfo.name}Service;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
##表注释（宏定义）
#tableComment("Controller")
@RestController
@RequestMapping("/$!tool.firstLowerCase($!tableInfo.name)")
public class $!{tableName} extends BaseController {
    
    @Resource
    private $!{tableInfo.name}Service $!{serviceName};

    /**
     * 分页查询所有数据
     *
     * @param page 分页对象
     * @param $!entityName 查询实体
     * @return 所有数据
     */
    @GetMapping
    public Response selectAll(Page<$!tableInfo.name> page, $!tableInfo.name $!entityName, String column, Boolean isAsc) {
        QueryWrapper<$!tableInfo.name> queryWrapper = new QueryWrapper<>($!entityName);
        if (isAsc != null && StringUtils.hasLength(column)) {
            queryWrapper.orderBy(true,isAsc,column);
        }
        return success(this.$!{serviceName}.page(page, queryWrapper));
    }

    /**
     * 通过主键查询单条数据
     *
     * @param id 主键
     * @return 单条数据
     */
    @GetMapping("/{id}")
    public Response selectOne(@PathVariable $!pk.shortType id) {
        return success(this.$!{serviceName}.getById(id));
    }

    /**
     * 新增数据
     *
     * @param $!entityName 实体对象
     * @return 新增结果
     */
    @PostMapping
    public Response insert(@RequestBody $!tableInfo.name $!entityName) {
        return success(this.$!{serviceName}.save($!entityName));
    }

    /**
     * 修改数据
     *
     * @param $!entityName 实体对象
     * @return 修改结果
     */
    @PutMapping
    public Response update(@RequestBody $!tableInfo.name $!entityName) {
        return success(this.$!{serviceName}.updateById($!entityName));
    }

    /**
     * 删除数据
     *
     * @param idList 主键结合
     * @return 删除结果
     */
    @DeleteMapping
    public Response delete(@RequestBody List<$!pk.shortType> idList) {
        return success(this.$!{serviceName}.removeByIds(idList));
    }
}

• 自定义的BaseController抽象类代码如下，把它放在controller层下

public abstract class BaseController {

    public  Response success(T data) {
        return new Response<>(data,20000,"success");
    }

    @Data
    @AllArgsConstructor
    class Response implements Serializable {
        private T data;
        private int code;
        private String message;
    }

    @Data
    @AllArgsConstructor
    class PageAccept {
        private int current = 1;
        private int size = 10;
        private String column;
        private boolean asc = false;
    }
}

• EasyCode插件没有关于生成前端的代码，所以需要我们去定义

生成的vue文件要放在vue-admin-template前端工程下的 src/views/page 目录下，page目录需要自己创建

##引入mybatis支持
$!mybatisSupport

##设置保存名称与保存位置
$!callback.setFileName($tool.append($!{tableInfo.name}, "List.vue"))
$!callback.setSavePath($tool.append($modulePath, "/src/main/resources/vue"))
#foreach($column in $tableInfo.fullColumn)
    #if($column.name.startsWith("is") && $column.type.equals("java.lang.Boolean"))
        $!column.setName($tool.firstLowerCase($column.name.substring(2)))
    #end
#end
##拿到主键
#if(!$tableInfo.pkColumn.isEmpty())
    #set($pk = $tableInfo.pkColumn.get(0))
#end

生成的ajax js文件要放在vue-admin-template前端工程下的 src/api 目录下

##引入mybatis支持
$!mybatisSupport
##设置保存名称与保存位置
$!callback.setFileName($tool.append($!tool.firstLowerCase($tableInfo.name), "List.js"))
$!callback.setSavePath($tool.append($modulePath, "/src/main/resources/js"))
##拿到主键
#if(!$tableInfo.pkColumn.isEmpty())
    #set($pk = $tableInfo.pkColumn.get(0))
#end
import request from '@/utils/request'

const url = '/$!{tool.firstLowerCase($tableInfo.name)}'

export function getList(params) {
  return request({
    url: url,
    method: 'get',
    params
  })
}

export function deleteRows(data) {
  return request({
    url: url,
    method: 'delete',
    data
  })
}

export function saveRow(data) {
  return request({
    url: url,
    method: data.$!{pk.name} ? 'put' : 'post',
    data
  })
}

• 由于vue-admin-template中的分页和路由重载不是很友好，自己封装了一个分页组件和重载组件

分页组件放在vue-admin-template前端工程下的 src/components/Pagination/index.vue，Pagination 目录需要自己创建

重载组件放在vue-admin-template前端工程下的 src/views/Reload.vue，和 404.vue 平级，并在 src/router/index.js 中添加对应路由

重载组件

重载组件路由

{
  path: '/reload',
  component: () => import('@/views/Reload'),
  hidden: true
}

调用

//这样就起到刷新页面，但是浏览器没有重新请求页面的功能
this.$router.replace('/reload')

• 此时我们的前后端工程基本已完成，但还需要将生成的vue组件注册到侧边栏路由中，以及将ajax的访问地址指向后端服务

路由在 src/router/index.js中。将不需要的路由删除，为自己的组件添加路由。
简单的路由添加如下，有关路由和侧边栏配置点击这里

{
    path: '/xxx', //路由地址
    component: Layout,
    children: [
      {
        path: '',
        name: 'xxx', //模块名称
        component: () => import('@/views/page/xxx'), //被引入组件名
        meta: { 
            title: 'xxx', //侧边栏显示的名称
            icon: 'el-icon-monitor' //侧边栏显示的图标
        } 
      }
    ]
}

在 src/utils/request.js 中，修改 baseURL 为后端服务地址