基于Vue+Element UI的智能代码生成器设计与实现

董小正

已于 2025-03-21 13:03:25 修改

阅读量650

点赞数 17

分类专栏：快捷开发工具文章标签：前端 java 代码生成 vue.js

于 2025-03-20 16:36:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34665176/article/details/146399696

版权

一、关键技术实现

本文介绍一个基于Vue.js + Element UI开发的多功能代码生成器，支持通过SQL语句或字段配置快速生成：

多种数据库（MySQL/Oracle/SQL Server/达梦）的DDL语句
MyBatis Plus实体类
Mapper接口及XML文件
Service层接口与实现
Controller层REST API
支持一键导出ZIP压缩包

二、核心功能演示

1. 输入模式切换

支持两种输入方式：

字段配置模式：通过简单语法快速定义字段

#表名: order_info 订单表
#类名: Order
订单ID:id bigint [自增,主键]
订单金额:amount decimal(10,2)
创建时间:createTime dateTime

SQL模式：

CREATE TABLE `order_info` (
  `id` BIGINT COMMENT '订单ID' PRIMARY KEY AUTO_INCREMENT,
  `amount` DECIMAL(10,2) COMMENT '订单金额',
  `createTime` dateTime COMMENT '创建时间'
) COMMENT='订单表';

2.多数据库支持

支持生成适用于MySQL、Oracle、SQL Server和达梦数据库的：

建表语句
字段注释
自增主键配置
默认值设置

3. 代码生成效果

只展示其中一种

package com.example.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import lombok.experimental.Accessors;
import java.time.LocalDateTime;
import java.util.Objects;

/**
 * 订单表 order_info
 * @author djz
 */
@Data
@Accessors(chain = true)
@TableName("order_info")
public class Order {

    /**
     * 订单ID
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    /**
     * 订单金额
     */
    @TableField("amount")
    private BigDecimal amount;

    /**
     * 创建时间
     */
    @TableField("createTime")
    private LocalDateTime createTime;

}

4.一键导出

导出代码结构：

自动打包生成：

完整Java类文件
Mapper XML文件
对应数据库的SQL脚本

三、关键技术实现

1. 前端架构

<div id="app">
    <el-container style="height: 100vh;">
        <el-main>

            <el-row :gutter="20">
                <!-- 输入区域 -->

                <el-col :span="12">
                    <el-row :gutter="20">
                        <el-col style="width:100px;line-height: 40px;">
                            <div>
                                作者配置
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <el-input
                                    v-model="author"
                                    placeholder=""
                                    @input="generateCode"
                                    style="margin-bottom:10px">
                            </el-input>
                        </el-col>

                    </el-row>

                    <el-card>
                        <div slot="header">
                            <span>包名配置</span>
                        </div>
                        <el-input
                                v-model="basePackage"
                                placeholder="基础包名（如：com.example）"
                                @input="generateCode"
                                style="margin-bottom:10px">
                        </el-input>
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <el-input
                                        v-model="entityPackage"
                                        placeholder="实体类包名（默认：entity）"
                                        @input="generateCode">
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-input
                                        v-model="mapperPackage"

最低0.47元/天解锁文章