企业官网建设流程全解析

简介：这套基于Spring Boot与Ant Design Vue Pro构建的简易后台管理系统，是面向计算机相关专业在校生及初阶开发者的课程设计与毕业设计参考项目。整体采用前后端分离架构，Java与Vue技术栈划分清晰，覆盖登录鉴权、通用CRUD、菜单配置等典型后台管理场景，适合用于毕设演示、课设作业或项目初期立项原型。压缩包共391个文件，以132个Vue前端页面组件、104个Java后端逻辑文件为主，辅以83个JS脚本、12个LESS样式及若干XML、YML配置与SQL初始化脚本，整体约960KB，目录结构简洁便于快速定位核心代码。已有58人学习使用。项目代码经运行验证且作者评审均分达96分，下载后可按README说明导入启动，也可基于现有权限模型与页面模板进行二次扩展，快速搭建具备完整交互逻辑的管理端示例。

1. 简易后台管理系统，却正好卡中毕设痛点

折腾过毕业设计的人都知道，最难的不是某个具体功能写不出来，而是整套东西要能在答辩那天一键跑起来。Spring Boot 后台、Vue 3 前台、MySQL 数据库，这三样单独拆开都有大把教程，一旦要组合成一个完整可用的后台管理系统，光是环境搭配、跨域处理、路由权限就能磨掉好几天。这套基于 Spring Boot 与 Ant Design Vue Pro 的简易后台管理系统，恰好把这个组合做成了一份可以直接落地复现的资源。它适合三类人：正在做毕设或课设的计算机专业学生、刚接触前后端分离开发想找一个完整项目的初学者、以及需要用一套基础后台快速改出自己系统的人。这套系统把最常见的用户、角色、菜单权限链路全打通了，后端框架、前端界面、数据库脚本都是现成的，核心价值不在一行行代码有多惊艳，而在于你能顺着它的结构快速跑通、改造成自己的毕设题目。

2. Spring Boot + Ant Design Vue Pro：这套选型为什么适合拿来改毕设

2.1 后端框架：Spring Boot 的自动装配与起步依赖

毕设项目最怕的不是代码写不出来，而是配置把时间耗光。Spring Boot 在这个组合里的位置很明确：它通过自动装配把 Spring MVC、内嵌 Tomcat、数据源连接这些原本需要大量 XML 配置的东西变成了约定优于配置的默认行为。以这套后台管理系统为例，后端几乎所有核心能力都来自 Spring Boot 的三个起步依赖：spring-boot-starter-web负责处理 HTTP 请求与 RESTful 接口，spring-boot-starter-security负责登录认证和接口权限控制，spring-boot-starter-data-jpa或mybatis-spring-boot-starter负责数据库读写。

不同版本的 Spring Boot 行为差异很大。2.7.x 和 3.x 在 javax 包名、Spring Security 配置写法上都有破坏性变更。如果你拿到的资源用的是 2.x，就老老实实保持 JDK 8 或 11，不要手贱升到 3.x。我见过太多人问为什么启动报错，最后发现是版本跨得太猛。这套系统的后端结构通常是标准的 controller / service / mapper（或 repository）三层，实体类对应数据表，接口返回统一封装成Result对象，前端拿到的数据结构是一致的。这一点对毕设答辩特别重要，因为你可以清晰回答评委每一个请求的处理链路。

2.2 前端界面：Ant Design Vue Pro 的价值在于完整度

Ant Design Vue Pro 是业界公认的中后台前端方案，基于 Vue 3 组合式 API，内置了 Ant Design Vue 组件库。选它而不是从零手写 Element Plus 页面，核心理由是它的完整度：布局框架、侧边栏菜单、面包屑、用户下拉菜单、权限路由守卫、axios 请求封装这些全都有了。普通后台管理系统的前端工作量，大概有七成花在这些"界面骨架"上，Ant Design Vue Pro 直接帮你把这部分填平了。

重要的是它的权限设计。前端路由表里会按角色做动态路由加载，登录时后端返回当前用户的角色和菜单列表，前端根据这些数据生成可见的菜单路由。开发阶段你在src/router里可以直接声明权限标识字符串，比如：

{ path: '/system', name: 'System', component: Layout, meta: { title: '系统管理', icon: 'setting', permissions: ['system:user:list'] }, children: [ { path: 'user', name: 'SystemUser', component: () => import('@/views/system/user/index.vue'), meta: { title: '用户管理', permissions: ['system:user:list'] } }, { path: 'role', name: 'SystemRole', component: () => import('@/views/system/role/index.vue'), meta: { title: '角色管理', permissions: ['system:role:list'] } } ] }

这段配置的逻辑是：permissions字段声明了访问该页面需要的前端权限标识，路由守卫里会判断当前用户是否拥有对应权限，没有就跳转 403 页面。参数component: Layout表示该页面套用主框架布局，component: () => import(...)是路由懒加载，只有实际访问时才加载对应文件，首次打开系统时白屏时间会明显缩短。

2.3 核心数据表结构与权限链路

聊完框架，落到这套系统的数据模型上。后台管理系统的权限链路绕不开五张表：用户表、角色表、菜单表、用户角色关联表、角色菜单关联表。用户和角色是多对多，角色和菜单是多对多，这是最经典的 RBAC 设计。菜单表是关键，它不光是前端导航的数据来源，还承担了按钮级权限的配置——每个菜单项可以挂接口权限标识，后端在每个接口上用@PreAuthorize注解校验。

以管理员登录后的菜单加载流程为例：前端带着 token 请求/api/user/info，后端查出用户 ID，再根据用户角色关联找出角色，角色菜单关联找出菜单树，最后返回给前端渲染。整条链路里，用户信息表和角色表是最核心的两张表。改毕设的时候，sys_user表加字段要同步改前端用户管理页面的表格列和后端实体类，这种三处同步的改动是这套系统最常见的扩展模式。表结构清晰了这个系统你就掌握了一半，因为增删改查的接口全部是围绕表结构展开的。

3. 把系统跑起来：环境版本、数据库初始化与启动参数

3.1 本地环境准备清单

在敲任何命令前，先核对自己机器的环境。这套系统前后端分离运行，比传统单体项目对环境的要求更苛刻一些。后端依赖 JDK 和 Maven，前端依赖 Node.js 和 npm 或 yarn。版本不对，后面每一步都会翻车。

提示：如果机器上已经装了 JDK 17，我不建议为了这个项目去卸掉，但可以用环境变量单独指一个 JDK 8，启动脚本里显式指定JAVA_HOME路径会省很多麻烦。

3.2 数据库初始化与后端配置

数据库是整条链路的起点。资源包里的数据库脚本通常是.sql文件，包含建库、建表和初始数据三部分。用 Navicat 或命令行执行这条命令导入：

mysql -u root -p < /path/to/database/init.sql

导入完成后，检查sys_user表里是否已经有初始管理员账号，一般是admin用户名。然后打开后端目录下的application.yml或application-dev.yml，核心配置项长这样：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/admin_system?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: none show-sql: true jwt: secret: your-secret-key expiration: 86400

这里每个参数都值得说清楚。server.port是后端服务端口，前端代理就是指向这个端口；spring.datasource.url里的serverTimezone=Asia/Shanghai是 MySQL 8 必须的，不写会报时区错误；ddl-auto: none表示不使用 Hibernate 自动建表，表结构完全以init.sql为准，这样不会因为实体类和数据表不一致导致启动报错；jwt.secret是生成 token 的密钥，生产环境必须改掉，毕设阶段可以保持原样但答辩时最好改一下，显得你懂安全。

启动后端，在项目根目录执行：

mvn spring-boot:run

看到控制台输出Started Application in X.XXX seconds就说明起来了。不要急着关终端，把日志拉到最上面看一眼有没有ERROR级别的错误，常见的是数据库连不上或端口被占用。数据库连接失败时启动会直接失败，端口被占用则会在Tomcat started on port(s): 8080处卡住或报 8080 端口被占用，后者用lsof -i:8080找到进程杀掉就行。

3.3 前端启动与代理配置

后端跑通之后，前端才能真正发挥价值。进入前端目录web或frontend，先装依赖：

npm install

这一步是新手最大的心理考验。装依赖时经常出现卡在某个包不动，或者直接报node-sass编译失败。如果你的 Node 是 14 以上，遇到 node-sass 相关问题大概率是这个包和 Node 版本不兼容，直接用 npm 自带的 sass 替代即可；特别提示，看到npm install的警告就慌是大可不必，很多 warning 不影响最终使用。

启动开发服务器：

npm run dev

默认端口是 8000，浏览器打开http://localhost:8000。前端访问后端接口是通过vue.config.js里的代理转发完成的：

const port = 8000; module.exports = { devServer: { port, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };

这段配置的意义是：浏览器访问/api/login时，开发服务器会把请求转发到后端的http://localhost:8080/login，同时把/api前缀去掉。changeOrigin: true保证后端收到的 Host 头是后端自己的地址。看起来是小事，不配这一段你登录接口大概率会报跨域错误或 404。前端端口和后端端口不一样，只有通过代理才能绕开浏览器的同源策略限制。能看到登录页并输入admin账号进入首页，这套系统就算完全跑通了。

4. 把它改成自己的毕设：新业务模块的完整改造链路

4.1 后端扩展业务模块：从建表到接口三件套

毕设题目千差万别，但落到后台管理系统上都逃不过"对某个实体做增删改查"。假设你的题目是"学生选课管理系统"，你需要新增一门课程实体。后端改造从建表开始，在数据库执行：

CREATE TABLE course_info ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '主键', course_name VARCHAR(100) NOT NULL COMMENT '课程名称', teacher_name VARCHAR(50) COMMENT '授课教师', max_students INT DEFAULT 50 COMMENT '选课上限', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP );

核心思路是表结构保证有主键、业务字段和两个时间字段。然后新建实体类、Mapper 接口、Service 类和 Controller 类。以 MyBatis 为例，实体类对应表字段，使用@TableName注解显式绑定表名，日期字段用LocalDateTime而非Date，因为LocalDateTime能直接映射DATETIME类型，避免时间格式化问题。

Controller 层接口返回统一封装对象，这块直接复用系统已有的Result结构：

@RestController @RequestMapping("/api/course") public class CourseController { @Autowired private CourseService courseService; @GetMapping("/list") public Result list(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize) { return Result.success(courseService.getCoursePage(pageNum, pageSize)); } @PostMapping @PreAuthorize("hasAuthority('system:course:create')") public Result create(@RequestBody Course course) { courseService.addCourse(course); return Result.success(); } }

这段代码里，pageNum和pageSize是分页参数，毕设里做列表页基本都靠这两个值；@PreAuthorize是后端接口的权限校验注解，权限标识字符串system:course:create要和前端路由里配置的permissions保持一致，否则前端有按钮但后端会拒绝请求。新增接口用@PostMapping，修改用@PutMapping，删除用@DeleteMapping，这是 RESTful 风格的约定，答辩时被问到接口设计能从容回答。

4.2 前端新增页面与路由注册

后端接口就绪后，前端要加一个对应页面。在src/views下新建course/index.vue，页面的核心结构是搜索区加表格加分页，这部分代码可以直接复制系统已有的用户管理页面再改字段。项目根目录的src/router路由配置文件里注册该页面，注册方式参考第二章的菜单配置，把path、name、component和meta.permissions都换成课程相关的声明。记住，菜单显示名写在meta.title里。

前端模块接后端的路径要分清楚：开发环境下用的是开发服务器代理，请求路径是/api/course/list；生产环境部署时前端静态文件由后端服务托管，请求的路径要改成后端实际的接口路径，通常也是/api/course/list，只要后端统一加了接口前缀，这两套环境基本不用改代码。

操作到这一步，你已经具备了把任意数据库表变成管理页面的能力。但如果你只是想快速做出一个课设演示效果，可以用系统自带的在线用户管理和角色管理功能，先把权限链路吃透再说。

4.3 权限控制的常见扩展：按钮级权限与角色粒度

这套系统自带的权限体系是角色到菜单，毕设如果想加分，可以往下再钻一层做到按钮级权限。后端的做法很直观：每个敏感操作接口加@PreAuthorize注解，前端每个按钮用v-permission自定义指令判断当前用户是否有权显示该按钮。

角色粒度调整更要紧。角色表sys_role里通常有个data_scope字段，用来控制该角色能看到哪些数据范围。默认1表示全部数据，2表示本部门数据，3表示仅本人数据。改这个字段需要同步调整后端查询逻辑，比如数据范围为2时，查询列表的 SQL 要自动追加一个WHERE dept_id = 当前用户部门ID的条件。这对毕设来说是个亮眼的加分项，能体现你对业务权限的理解不只是"登录拦截"这么浅。

5. 避坑：这套组合最常见的六处翻车点

5.1 Spring Boot 版本太高导致项目无法启动

现象：导入项目后执行mvn spring-boot:run，启动直接报错，报错日志里有java: package javax.servlet does not exist或Failed to configure a DataSource。

原因：Spring Boot 3.x 把javax.servlet换成了jakarta.servlet，同时要求 JDK 17 起步。如果你的项目是 2.x 版本，用 JDK 8 编译会遇到大量包名找不到的问题；反之如果用新 JDK 跑旧项目，同样会因为兼容性报错。不少同学一上来就装最新的 JDK 和 Spring Boot 版本，导致项目启动不了。

解决：看项目里pom.xml的<parent>节点确认 Spring Boot 版本。2.x 配 JDK 8 或 11，3.x 配 JDK 17 或 21，严格对齐就不会有版本问题。

5.2 前端npm install时 node-sass 编译失败

现象：npm install执行到一半报错，出现node-gyp rebuild失败或Failed to install node-sass，后面跟着一堆 Python 和 C++ 编译错误。

原因：node-sass 是个需要从源码编译的原生模块，Node 版本和 node-sass 版本必须严格匹配，Node 16 配 node-sass 6 以下基本都会出问题。现在很多前端项目已经改用sass（dart-sass）替代了 node-sass，如果你的项目还在用 node-sass，别硬修。

解决：把package.json里的node-sass依赖换成sass，然后删掉node_modules和package-lock.json，重新npm install。换 sass 后大部分代码可以兼容，个别地方语法不一样，按编译提示改一下即可。

5.3 Vue 路由刷新后 404 或白屏

现象：开发环境一切正常，打包部署后，从登录页跳转没问题，但在某个子页面按 F5 刷新，出现 404 页面，有的会直接白屏。

原因：前端使用了 HTML5 History 模式路由，它的特点是 URL 路径不带#。开发服务器会帮你把所有路径都回退到index.html，但 Nginx 或 Spring Boot 静态资源服务器不会，它会在磁盘上找真实存在的course目录，找不到就返回 404。

解决：部署到 Nginx 时加一个try_files $uri $uri/ /index.html;配置；部署到 Spring Boot 时，写一个简单的WebMvcConfigurer把非接口路径全部转发到/index.html。

5.4 前端开发环境登录接口跨域

现象：前端http://localhost:8000打开后，点击登录，浏览器控制台报Access to XMLHttpRequest at 'http://localhost:8080/api/login' from origin 'http://localhost:8000' has been blocked by CORS policy。

原因：前后端端口不一致，浏览器默认阻止跨端口请求。

解决：不推荐在后端加全局 CORS 配置，最简单可靠的是第三章讲过的前端代理。确认vue.config.js的proxy配置正确，并且登录请求走的是相对路径/api/login，而不是写死的http://localhost:8080/api/login。

5.5 MySQL 8 时区报错

现象：后端启动时报The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized或Could not create connection to database server。

原因：MySQL 8 和 JDBC 驱动之间时区协商失败，连接串里没指定serverTimezone。

解决：在application.yml的连接地址末尾追加&serverTimezone=Asia/Shanghai，这个问题就消失了。使用 MySQL 5.7 基本不会遇到，但 8.0 是当前主流，这个参数几乎是必写的。

5.6 Token 失效后前端页面卡死

现象：系统登录后放了一晚上，第二天点任何菜单都没有反应，接口返回 401，但页面还停在原来的界面。

原因：Access Token 有过期时间，前端没有在捕获到 401 响应时做自动跳转登录页的处理。

解决：找到前端 axios 拦截器文件，在响应错误处理里加一段判断：

service.interceptors.response.use( response => response, error => { if (error.response && error.response.status === 401) { localStorage.removeItem('token'); window.location.href = '/login'; } return Promise.reject(error); } );

这段代码的价值在于：拿到 401 时清掉本地 token 并强制回到登录页，避免用户在"假登录"状态里白点半天。顺手把 token 刷新逻辑也预留好，毕设答辩时主动说出这个处理，能压住场子。

6. 打包发布：把 Vue 构建产物放进 Spring Boot 并验证全链路

开发环境下前端跑在 8000，后端跑在 8080，但这只是开发模式。毕设答辩和真正交付时，通常需要一套"一个端口跑起来"的模式：Spring Boot 同时在 8080 提供接口和前端静态页面。这样你只需要启动一个 Java 进程就能演示整个系统，不用开两个终端，也不存在跨域问题。

先在前端目录执行构建命令：

npm run build

构建完成后，dist目录里会出现index.html、static子目录等文件。这些就是编译后的静态页面资源，接下来有两种方式把它们交给 Spring Boot 托管。

第一种方式是把dist里的内容直接复制到 Spring Boot 的src/main/resources/static目录。Spring Boot 默认把该目录作为静态资源根目录，浏览器访问http://localhost:8080/时会自动寻找static/index.html，整个系统就从一个端口访问了。注意static目录里的内容在打包时会进入 Jar 包，所以执行前端构建后要重新打包后端 Jar。

第二种方式是使用前端构建输出目录独立部署，但在后端增加一个路由转发规则。在 Spring Boot 里写一个配置类，把非 API 路径的请求转发到前端路由入口：

@Controller public class SpaForwardController { @GetMapping(value = {"/", "/course/**", "/system/**", "/dashboard"}) public String forward() { return "forward:/index.html"; } }

这段配置解决的是刷新 404 问题：用户访问/course路径时浏览器向 Spring Boot 请求该路径，后端把请求转发到index.html由前端路由接管。注意/**是危险的通配写法，要把后端接口路径（比如/api/**）排除在外，否则接口请求也会被转发到index.html导致接口 404。

重新打包并启动后端：

mvn clean package java -jar target/admin-system-0.0.1-SNAPSHOT.jar

浏览器直接访问http://localhost:8080。验证全链路是否打通的顺序要固定，我每次交付前都强制走一遍：

先确认登录页能加载且样式完整。然后输入管理员账号，打开浏览器开发者工具的 Network 面板，观察登录请求的 URL 是相对路径还是绝对路径。登录成功后刷新当前页面确认不白屏，再依次点击每个菜单，留意 Console 有没有报错。最后把用户管理页面的数据改一笔，刷新后确认改动还在，说明前端到后端到数据库的整条链路是通的。这套验证路径走完，项目就可以放心交给评委演示了。

从那以后我每次部署这套系统，都强制自己先走一遍清理dist、重新构建、复制静态资源的流程，避免上次构建的旧文件残留导致页面和接口对不上。这套基于 Spring Boot 与 Ant Design Vue Pro 的后台管理系统，核心价值就在它把前后端分离开发中最繁琐的骨架部分全部搭好了，你只需要顺着它的结构往上加自己的业务模块。希望这份拆解能帮你在答辩前少熬几个夜，把精力放在真正能体现工作量的功能点上。

本文还有配套的精品资源，点击获取