0代码5分钟一键生成Springboot+Vue后台管理系统

​0代码5分钟一键生成Springboot+Vue后台管理系统

1 项目概述

今天给大家介绍一款基于Spring Boot和Vue的前后端分离脚手架项目，内置高效代码生成器，可快速生成基础增删改查功能。本文将完整演示如何使用该脚手架快速构建一个商家管理系统。

2 环境准备

2.1 开发工具

• 前端开发工具：VS Code

• 后端开发工具：VS Code或IntelliJ IDEA

• 数据库管理工具：Navicat

2.2 技术栈

• 后端：Spring Boot

• 前端：Vue.js

• 数据库：MySQL

3 数据库配置

3.1 创建数据库

首先使用Navicat新建数据库，数据库名称根据自己的项目来定，这里我们命名为basesys：

3.2 导入初始数据

运行预置的SQL文件初始化数据表：

sql

-- 以下是示例SQL内容

-- ================================
-- 1. 管理员表
-- ================================
DROP TABLE IF EXISTS `admin`;
CREATE TABLE `admins` (`id` int NOT NULL AUTO_INCREMENT COMMENT '管理员ID',`username` varchar(50) NOT NULL COMMENT '用户名',`password` varchar(100) NOT NULL COMMENT '密码',`real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名',`phone` varchar(20) DEFAULT NULL COMMENT '手机号',`email` varchar(100) DEFAULT NULL COMMENT '邮箱',`avatar` varchar(200) DEFAULT NULL COMMENT '头像',`permissions` text COMMENT '权限列表(JSON格式)',`status` tinyint DEFAULT '1' COMMENT '状态(0:禁用 1:正常)',`created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',PRIMARY KEY (`id`),UNIQUE KEY `uk_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='管理员表';-- ================================
-- 2. 商家表
-- ================================
DROP TABLE IF EXISTS `merchant`;
CREATE TABLE `merchant` (`id` int NOT NULL AUTO_INCREMENT COMMENT '商家ID',`username` varchar(50) NOT NULL COMMENT '用户名',`password` varchar(100) NOT NULL COMMENT '密码',`shop_name` varchar(100) DEFAULT NULL COMMENT '店铺名称',`shop_logo` varchar(200) DEFAULT NULL COMMENT '店铺logo',`shop_address` varchar(200) DEFAULT NULL COMMENT '店铺地址',`contact_name` varchar(50) DEFAULT NULL COMMENT '联系人姓名',`phone` varchar(20) DEFAULT NULL COMMENT '联系电话',`email` varchar(100) DEFAULT NULL COMMENT '联系邮箱',`certification_status` tinyint DEFAULT '0' COMMENT '认证状态(0-未认证,1-审核中,2-已认证,3-认证失败)',`status` tinyint DEFAULT '1' COMMENT '状态(0:禁用 1:正常)',`created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',PRIMARY KEY (`id`),UNIQUE KEY `uk_username` (`username`),KEY `idx_certification_status` (`certification_status`),KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商家表';-- ================================
-- 3. 插入预设数据
-- ================================-- 插入默认管理员账号
INSERT INTO `admins` (`username`, `password`, `real_name`, `permissions`, `status`) 
VALUES ('admin', 'admin123', '系统管理员', '["*"]', 1);-- 插入测试商家账号
INSERT INTO `merchant` (`username`, `password`, `shop_name`, `contact_name`, `phone`, `email`, `shop_address`, `certification_status`, `status`) 
VALUES 
('merchant01', 'merchant123', '星云咖啡店', '张三', '13800138001', 'merchant01@example.com', '北京市朝阳区xxx街道xxx号', 2, 1),
('merchant02', 'merchant123', '阳光茶饮', '李四', '13800138002', 'merchant02@example.com', '上海市浦东新区xxx路xxx号', 0, 1);

这里需要注意的是admins表一定要导入并且导入预制数据，这里面保存的是后台管理系统管理员默认的用户名和密码。merchant表是我们用来演示的一个示例，可以根据自己的具体项目需求来设计数据表。

数据表中的字段一定要填写备注信息，这个备注信息会作为该字段的名称显示在前端vue的界面中。表的备注信息也需要填写，格式为“XX表”，代码生成器会进行截断，在后台管理页面左侧侧边栏添加一个名为“XX管理”的标签页。

4 项目配置与启动

4.1 后端配置

打开application.properties（或application.yml），配置数据库连接信息：

datasource:type: com.alibaba.druid.pool.DruidDataSourcedriver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/你的数据库名称?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8username: mysql用户名password: mysql密码

4.2 编译运行后端项目

在命令行中执行以下命令：

bash

# 进入项目根目录# 编译项目
mvn clean compile# 运行项目
mvn spring-boot:run

4.3 启动前端项目

bash

# 进入前端项目目录
cd admin-ui# 安装依赖
npm install# 启动开发服务器
npm run serve

5 代码生成器使用教程

5.1 登录系统

打开浏览器访问：http://localhost:8080

• 用户名：admin

• 密码：admin123

5.2 使用代码生成器

1. 点击左侧菜单栏中的"代码生成器"标签页

2. 选择需要生成代码的数据表（本文以商家表为例）

表字段备注要求

• 每个字段必须填写备注，这将作为表单标签显示文本

• 表本身需要备注，这将生成菜单名称

字段配置示例

• 搜索字段：根据业务需求自行筛选

• 显示字段：根据业务需求自行筛选

• 图片字段：店铺logo（支持图片上传和显示），如果为图片展示勾选对应字段

• 映射字段：认证状态（格式：0-未认证,1-审核中,2-已认证,3-认证失败）注意逗号是英文逗号，不要搞成中文逗号了。

5.3 生成代码

点击"生成代码"按钮，系统将自动：

1. 生成后端控制器、服务层、数据访问层代码

2. 生成前端Vue组件、路由和API配置

3. 自动添加菜单项到左侧导航栏

6 功能验证

6.1 商家管理功能

生成完成后，刷新页面即可看到左侧菜单栏新增"商家管理"选项，点击进入后可实现以下功能：

• 列表显示：展示所有商家信息

• 搜索过滤：支持按用户名和店铺名称搜索

• 图片上传：店铺LOGO上传和显示功能

• 增删改查：完整的CRUD操作功能

6.2 扩展其他功能

如需添加用户管理、订单管理等功能，只需：

1. 在数据库中创建相应数据表

2. 确保表字段有适当备注

3. 通过代码生成器选择对应表

4. 配置字段选项后生成代码

7 总结

这款基于Spring Boot和Vue的前后端分离脚手架可以快速生成后台管理项目的对应页面和功能代码，实现简单的CRUD操作，避免了重复的劳动。

项目代码完全开源，有学习需要的小伙伴可以点开视频链接，按照视频提示方式获取。

​