代码生成 + 可视化一小时内完成毕业设计之管理系统

简介

毕设千千万万，管理系统占大半，那么下面分享一下可以通过数据库自动生成前后端分离项目（前端：react18 + antd，后端：springboot3 + mybatis-plus），

最特色的点是代码生成后还能以可视化方式再继续扩展定制化的功能。适合不爱写前端页面的服务端开发人员、react 开发人员、想快速完成毕设的学生等等

环境

运行环境： jdk20、mysql5.7、node 16+
工具建议： IDEA、VSCODE

需求

无论开发什么小型还是大型系统一定是要先明确需求，我们以一个非常小的学生成绩管理系统为示例简单介绍、意在大家自己能够举一反三

1. 登录页面
   • 输入帐号密码，点击登录进入系统
2. 学生管理页面
   • 按姓名、分页查询
   • 按*学号（不可编辑）、*姓名、*入学日期 新增或编辑
   • 删除要二次提示
   • 按姓名、学号、入学日期表格展示
   • 导入：弹窗，下载模版，点击上传 Excel
3. 成绩管理页面
   • 按姓名、考试名称、分页查询
   • 按*姓名（下拉选择）、*考试名称、语文成绩、数学成绩、英语成绩 新增或编辑
   • 删除要二次提示
   • 按姓名、考试名称、语文成绩、数学成绩、英语成绩表格展示

数据库设计

两个页面，我们简单设计一下如下两张表。问：登录的用户表为什么没有？ 哦，我们代码里先固定一个帐号（/手动狗头）。

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for grade
-- ----------------------------
DROP TABLE IF EXISTS `grade`;
CREATE TABLE `grade`  (
  `grade_id` int(11) NOT NULL AUTO_INCREMENT,
  `student_id` int(11) NULL DEFAULT NULL,
  `grade_name` varchar(64) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '考试名称',
  `grade_chinese` float NULL DEFAULT NULL COMMENT '语文成绩',
  `grade_math` float NULL DEFAULT NULL COMMENT '数学成绩',
  `grade_english` float NULL DEFAULT NULL COMMENT '英文成绩',
  `created_at` datetime NULL DEFAULT CURRENT_TIMESTAMP,
  `deleted` tinyint(2) NULL DEFAULT 0,
  PRIMARY KEY (`grade_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_bin COMMENT = '成绩管理' ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for student
-- ----------------------------
DROP TABLE IF EXISTS `student`;
CREATE TABLE `student`  (
  `student_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `student_name` varchar(11) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '学生姓名',
  `student_no` varchar(11) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '学号',
  `student_in_time` datetime NOT NULL COMMENT '入学日期',
  `created_at` datetime NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '创建日期',
  `deleted` tinyint(1) NULL DEFAULT 0 COMMENT '逻辑删除',
  PRIMARY KEY (`student_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_bin COMMENT = '学生管理' ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

服务端（代码生成）开发

我们这里准备了一个非常简单的代码生成框架(springboot3 + mybatis-plus), GITHUB地址。
当然如果你是服务端开发人员，并且已经有自己熟悉的（如若依等）可以跳过此步骤，并不影响后续前端的生成。

1. 通过 IDEA 开发工具打开此 maven 项目，并打开 application.yml 文件修改数据库连接的库名与帐号密码，启动项目
2. 在浏览器中打开服务端代码生成地址 http://localhost:8100/lightApi/generate/index，选中要生成的表，点击生成，即会在项目中生成相关接口代码。build（热加载）一下项目。

前端（代码生成）开发

前端生成是在线上代码生成与可视化工具，传送地址；是一个独立的工具，不受制于服务端结构。需要通过邮箱简单注册一下并登录。

1. 点击 我的项目 - AI 智能创建项目 导入上面的数据表创建文件
2. 输入接口的基本路径：http://localhost:8100/lightApi
3. 配置一下接口访问路径后点击 可以了、开始吧！ 即可完成前端代码的生成
4. 修改登录页面并进行功能测试
5. 下载到本地通过 VSCODE 打开项目，安装依赖 npm i，启动 npm start 完成。

开发视频

bilibli 视频地址

总结

此介绍的系统可以说是非常简单，只是过一下开发流程。而我们要学会的是可以举一反三，添加自己的设计思想。如何能在开发中提高自己的效率，如果不写重复的代码。