企业官网建设流程全解析

• 文档
• 教程
• 后端

本文整理自 springboot-guide 仓库「实战项目」章节：一个基于SpringBoot的在线考试系统，完整讲解uexam这款前后端分离在线考试系统的技术架构、业务功能与本地部署步骤。

导读

uexam是一款基于 Spring Boot 2.0 的前后端分离在线考试系统，同时支持 Web 端与微信小程序端，界面美观、代码结构清晰、表设计规范，非常适合作为学习 Spring Boot 实战、积累项目经验甚至接私活的参考项目。读完本文，你将掌握：用 Docker 一键搭建 PostgreSQL + Redis 环境、初始化考试系统数据库、修改 Spring Boot 配置文件、启动后端并让前端（Web 端/管理端）顺利跑起来的完整流程，以及从「建学科 → 出题目 → 组试卷 → 加学生 → 学生答题」的全链路业务操作。

项目介绍

uexam 是一个功能比较成熟、被重点推荐的开源在线考试系统，推荐它的核心原因有三点：

• 功能成熟：整体功能完整，并非玩具级 demo，应用场景广泛（在校考试、企业内部测评、接私活交付均可复用）；
• 体验好：界面设计美观，操作体验流畅，前后端分离带来的交互质量明显更高；
• 代码与表结构规范：代码整体结构清晰，数据库表设计规范，熟悉基本功能后很容易读懂源码。

核心技术栈

双数据库版本

uexam 同时提供了MySQL 和 PostgreSQL 两个数据库版本，源码中分别维护对应的数据库脚本与配置。原文作者演示时采用的是PostgreSQL 版本，并建议读者优先体验 PostgreSQL 版本——本文的部署演示同样以 PostgreSQL 版本为准。

提示：如果对 Spring Boot 整合 MyBatis 的两种主流方式（全注解 / XML）还不熟悉，可以参考同仓库的 优雅整合 SpringBoot+Mybatis 一文，它能帮你更快理解 uexam 后端的 Dao/Service/Controller 分层。

软件架构

uexam 采用前后端分离的总体架构：

• 后端服务：基于 Spring Boot 2.0，负责业务逻辑、权限控制与数据读写，支撑学生端、管理端、小程序端等所有前端调用；
• 前端应用：基于 Vue 构建，分为管理端（xzs-admin）与学生端（xzs-student），另有独立的微信小程序端；
• 基础设施：PostgreSQL/MySQL 负责业务数据持久化，Redis 承担缓存职责，共同支撑后端高效运行。

从部署形态看，后端构建完成后会把前端静态资源内嵌到 Spring Boot 工程中一起启动（默认情况下访问 8000 端口即可同时打开学生端与管理端）；如果希望彻底独立部署，则需在前端目录中分别运行 Vue 工程（对应 8001/8002 端口），这就是「内嵌模式」与「前后端分离模式」两种运行方式，详见下文启动章节。

使用效果与核心业务流程

原文强调「样式以及操作体验都是非常不错的」，这是推荐该项目的很重要一个原因。整个系统的核心业务是围绕考试闭环设计的，可以归纳为一条主线：

创建学科 → 添加题目 → 组卷（添加试卷）→ 添加学生 → 学生登录答题

管理端操作

管理端负责考试资源的维护，操作顺序有严格的前置依赖，需要按下面的顺序逐步进行。

第一步：添加学科

在创建题目之前，必须先创建学科。学科是题目归类的第一层维度，例如演示中创建的学科是「编程」、年级为「三年级」。学科与年级的组合决定该学科下题目的归属，也会影响学生账号与试卷的匹配关系。

第二步：添加题目

进入题目管理后，可以看到系统支持多种题型：

• 单选题
• 多选题
• 判断题
• 填空题
• 简答题

以单选题为例，添加题目时需要填写题干、选项、正确答案及所属学科等信息；题目创建成功后，题目列表会立即展示刚刚添加的题目，方便核对。

第三步：添加试卷

有了学科和题目之后才能添加试卷——试卷由题目组装而成，因此必须先完成前两步。创建试卷时按需从题库中挑选题目、配置分值即可；添加成功后，试卷列表会出现新试卷。

第四步：添加学生

管理端可以批量维护学生账号。注意：学生账号要与前面创建的「学科所对应的年级」对应上，即学生的年级属性必须与学科年级匹配，否则学生端无法正确匹配到对应试卷。

学生端体验

使用管理端创建好的学生账号登录学生端主页，会发现主页上多出了管理端刚刚创建的试卷，点进去即可进入答题界面完成作答。这条「管理端出卷 → 学生端作答」的链路完整覆盖了一个在线考试系统的最小可用闭环，也是该项目拿来即用的直接体现。

后端部署（PostgreSQL 版本）

原文以 PostgreSQL 数据库版本演示后端启动，并明确表示照此步骤，新手也能成功把项目跑起来。后端代码位于uexam/source/xzs，下面分四步完成。

第一步：安装 PostgreSQL

这里使用 Docker 拉取最新版 PostgreSQL 镜像（前提：本机已安装 Docker）。

1. 拉取镜像

$ docker pull postgres

2. 查看镜像

$ docker images |grep postgres postgres latest 62473370e7ee 2 weeks ago 314MB

3. 运行 PostgreSQL

$ docker run -d -p 5432:5432 --name postgresql -e POSTGRES_PASSWORD=123456 postgres

参数说明：

• -d：后台运行容器；
• -p 5432:5432：将容器内 PostgreSQL 默认端口 5432 映射到宿主机 5432；
• --name postgresql：为容器命名，便于后续管理；
• -e POSTGRES_PASSWORD=123456：设置数据库超级用户postgres的密码为123456，后续在application-dev.yml中要使用该密码连接数据库。

第二步：安装 Redis

1. 拉取镜像

$ docker pull redis

2. 查看镜像

$ docker images |grep redis

3. 运行 Redis

$ docker run -itd --name redis-test -p 6379:6379 redis

参数说明：

• -itd：以交互式后台方式运行容器；
• -p 6379:6379：映射 Redis 默认端口 6379；
• --name redis-test：容器命名；
• 末尾redis为镜像名，Redis 无密码时连接串默认即为127.0.0.1:6379。

第三步：创建数据库并执行数据库脚本

1. 在 PostgreSQL 中创建一个名为xzs的数据库（数据库名固定为xzs）；
2. 执行对应的数据库脚本。脚本位于uexam/source/xzs/sql目录下，按脚本文件顺序执行即可完成建表与初始化数据。

第四步：修改配置文件

使用 IntelliJ IDEA 打开后台代码目录uexam/source/xzs，修改application-dev.yml，将postgresql（或 mysql）、redis 的服务地址改为自己本地的地址（即本机 Docker 映射出的127.0.0.1:5432与127.0.0.1:6379，账号密码与上一步启动容器时设置的保持一致）。

这里补充说明背后的 Spring Boot 机制：application-dev.yml属于 Spring Boot 的多环境配置文件之一（dev 开发环境），项目通过激活对应 profile 来加载它；文件内的数据库与 Redis 连接信息最终会注入到数据源与缓存组件的 Bean 中。关于「Spring Boot 如何从配置文件读取并绑定配置」，可以参考同仓库的 Spring 如何优雅读取配置文件？，其中覆盖了@Value与@ConfigurationProperties两种绑定方式。

第五步：启动项目

直接运行启动类XzsApplication即可，不需要额外配置外部容器——Spring Boot 内置 Web 容器会自动拉起服务。

启动成功后，打开下面的链接即可跳转到对应的端：

• 学生系统地址：http://localhost:8000/student
• 管理端地址：http://localhost:8000/admin

特别注意：这种启动方式下，前端虽然也一并启动、可以访问，但实际上是内嵌在后端项目中的。如果我们需要真正意义上的前后端分离部署，则需要单独运行前端项目（见下一节）。

前端部署（Web 端）

小程序端的部署原文未展开演示，这里以 Web 端为准。Web 端代码在uexam/source/vue目录下，其中包含两个独立的前端工程：

• xzs-admin：管理端
• xzs-student：学生端

进入对应目录后，分别对这两个工程执行下面两个命令。

1. 下载相关依赖

$ npm install

2. 启动项目

$ npm run serve

启动完成之后，打开下面的链接即可跳转到对应的端：

• 学生系统地址：http://localhost:8001
• 管理端地址：http://localhost:8002

此时前端走 8001/8002 端口独立运行，与后端 8000 端口分离，即可验证前后端分离架构下的接口调用链路。

学习建议与总结

从该项目中可以学到什么

结合 springboot-guide 仓库的学习路径，uexam 适合作为以下知识点的实战落地范本：

1. Spring Boot 2.0 工程化实践：分层清晰的 Controller/Service/Dao 结构、配置文件多环境管理，可对照 第一个 RestFul Web 服务 与 优雅整合 SpringBoot+Mybatis 阅读；
2. MyBatis 实际使用：多表查询、分页、事务等，参考 SpringBoot+Mybatis 多数据源配置 可以进一步理解多数据源场景；
3. 前后端分离架构：Vue 管理端/学生端 + Spring Boot 后端的接口协作方式；
4. 数据库与缓存配套：PostgreSQL/MySQL + Redis 的组合是考试类读多写少场景的典型选型；
5. 容器化环境搭建：用 Docker 快速拉起中间件环境，降低本地环境搭建门槛。

部署速查表

原文要点回顾

• uexam 是前后端分离的在线考试系统，支持Web 端 + 微信小程序端，提供MySQL 与 PostgreSQL 双数据库版本；
• 后端技术栈为Spring Boot 2.0 + MyBatis + Redis，前端为Vue；
• 管理端业务顺序：先建学科 → 再建题目 → 后组试卷 → 最后加学生，学生年级需与学科年级匹配；
• 后端一键启动后，前端静态资源内嵌，直接访问 http://localhost:8000/student 与 http://localhost:8000/admin；
• 若需前后端分离部署，则在uexam/source/vue下对xzs-admin、xzs-student分别执行npm install与npm run serve，访问 8001/8002 端口。

按照上述步骤，你完全可以在一台装有 Docker 与 Node.js 的机器上，把这款基于 Spring Boot 的在线考试系统从零跑起来，并完整体验从出题到答题的完整考试流程。它既可以作为 Spring Boot 前后端分离实战的学习样例，也可以直接改造为考试、测评类业务的基础框架，属于「拿来即用」型的优质开源实战项目。

• 文档
• 教程
• 后端