想第一次把「前后端分离」完整跑通，又不想一上来就啃巨型脚手架？白卷是一套面向 Web 入门的练手站：前台有首页、图书馆图书展示、笔记本（Markdown 博文），后台带 Dashboard、内容管理与用户角色权限。后端 Spring Boot + JPA + Shiro + Redis，前端 Vue 2 + Element UI；建好 MySQL 库后首次启动可自动灌演示数据，登录就能截图验收。模块边界清楚，适合 Java / Vue 课设，或当作「前后端分离」第一次完整闭环。
本文给出本机实跑截图与源码压缩包。栈偏旧，定位是课设学习，不要直接拿去上生产。
能做什么
- 前台首页：导航、轮播/介绍区、最近更新时间线
- 图书馆：分类侧栏、封面网格、书名作者出版社与摘要（悬停可见）
- 笔记本：文章列表 + Markdown 渲染的正文详情
- 后台 Dashboard：访问/消息等统计卡片与图表
- 内容管理：图书增删改、文章管理等
- 用户与角色：用户信息、角色配置，配合菜单权限（RBAC 入门）
技术栈
- 后端：Spring Boot 2.1、Spring Data JPA、Apache Shiro、Redis、MySQL
- 前端：Vue 2、Element UI、Vue Router、Vuex、mavon-editor（Markdown）
- 其它：首次启动可用
data.sql/ 初始化配置灌演示数据；后端默认端口8443，前端开发端口8080
标签建议：Spring Boot Vue2 Element UI Shiro JPA MySQL Redis 课设 CMS
本地跑通步骤
环境： JDK 8、Maven 3.6+、MySQL 8、Redis（本机 6379，默认无密码）、Node 12 或 14（前端依赖 node-sass@4，Node 16+ 很容易装挂）。
1. 创建数据库：
mysql -uroot -p -e "CREATE DATABASE wj DEFAULT CHARSET utf8mb4;"2. 修改 wj/src/main/resources/application.properties：把数据源用户名/密码改成你本机的；确认 Redis 地址端口；后端端口默认 8443。仓库里示例库密码只是占位，务必改成你自己的。
3. 启动 Redis，再启动后端：
cd wj
mvn spring-boot:run
# 看到 Started WjApplication / Tomcat started on 8443 即成功4. 另开终端启前端（务必用 Node 14 一类老版本）：
cd wj-vue
npm install
npm run dev
# 浏览器打开 http://localhost:80805. 使用项目自带的演示管理员账号登录（具体以 README / 初始化数据为准），依次点开首页、图书馆、笔记本、管理中心做验收。
提示：配置里若开启了每次启动初始化数据，灌过一次后可按注释关掉，避免反复重置。前端代理/接口基址默认指向本机后端；改端口时两边一起改。
界面截图
1. 后端启动成功（8443）
2. 前端开发服务启动（8080）
3. 登录页
4. 前台首页
5. 图书馆列表
6. 图书详情（悬停摘要）
7. 笔记本列表
8. 笔记本文章正文
9. 后台 Dashboard
10. 内容管理 · 图书管理
11. 用户信息
12. 角色配置
部署与使用提醒
- 必须先有 Redis，否则登录/会话相关能力容易挂掉。
- 默认演示账号、数据源密码、JWT/会话相关配置都是教学示例，部署或演示前改成你自己的口令，不要照搬到公网。
- 前端工具链偏旧：优先 Node 14；Node 16+ 卡在
node-sass时，切回 14 重装依赖。 - 也可以把前端
npm run build产物拷进后端静态目录，只起8443访问；课设演示更推荐前后端分离的8080 + 8443。 - 依赖年代较早（Spring Boot 2.1 / Vue 2 / Shiro 等），适合学习与答辩演示；若要上线请自行评估升级与安全加固。
- 协议为 MIT，压缩包内保留了 LICENSE，二次分发请继续保留许可与版权声明。
小结
白卷把「首页 + 图书馆 + 笔记本 + 后台权限」收成一条清晰的分离链路，建库、改配置、启 Redis、启后端、启前端，就能在本机看到完整界面。想练 JPA、Shiro、Vue 路由与 Element 表格，或给课设找一个不至于无从下手的底座，可以直接在此基础上改业务字段与菜单。
源码压缩包可在本文下载，需 50 积分。
暂无评论内容