---

GitHub 地址：https://github.com/Antabot/White-Jotter

教程目录

第一部分

Vue + Spring Boot 项目实战（一）：项目简介
Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目
Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）
Vue + Spring Boot 项目实战（四）：数据库的引入
Vue + Spring Boot 项目实战（五）：使用 Element 辅助前端开发
Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计
Vue + Spring Boot 项目实战（八）：数据库设计与增删改查
Vue + Spring Boot 项目实战（九）：核心功能的前端实现
Vue + Spring Boot 项目实战（十）：图片上传与项目的打包部署

第二部分

Vue + Spring Boot 项目实战（十一）：用户角色权限管理模块设计
Vue + Spring Boot 项目实战（十二）：访问控制及其实现思路
Vue + Spring Boot 项目实战（十三）：使用 Shiro 实现用户信息加密与登录认证
Vue + Spring Boot 项目实战（十四）：用户认证方案与完善的访问拦截
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
Vue + Spring Boot 项目实战（十六）：功能级访问控制的实现
Vue + Spring Boot 项目实战（十七）：后台角色、权限与菜单分配
Vue + Spring Boot 项目实战（十八）：博客功能开发

第三部分

Vue + Spring Boot 项目实战（十九）：Web 项目优化解决方案
Vue + Spring Boot 项目实战（二十）：前端优化实战

前言

之前写了一些关于 Java EE 的文章，主要是理论性质的，目的是帮助大家快速了解 Java EE 的核心内容，早日爬出这个陈旧又绕不开的坑，进入 Java Web 开发的新天地。当然只有理论是不够的，开发是一门技术活，有很多细节需要在实践中理解，所以我决定做一个实践教程。

选用 Vue.js + Spring Boot 来开发这个项目，是因为这两种框架当下比较热门，也是实现所谓 前后端分离 的最佳选择之一。

网上相关教程很多，但要么只是做了一个 DEMO ，要么对许多关键问题一笔带过。

我的目标是根据这个教程，可以帮助新入行的或是刚开始学习相关技术的小伙伴们把一个完整的项目还原出来，建立起对前后端分离式 Web 开发的整体认知。

一开始，我会尽量详细地描述开发的过程，帮助大家快速上手。随着项目进展，曾经讲到过的、比较容易搜索到的内容会适当省略。当然，每个人的理解方式不同，可能有些重要的细节没讲到位，欢迎大家在评论区提问。

一、项目概述

这个项目我把它命名为 “白卷”，因为它随着教程进展逐渐完善，象征着知识的从无到有，从有到多。另外我还给它起了一个英文名字，叫 White Jotter（白色笔记本），纯粹是为了谐音。

项目遵循敏捷开发原则，会根据大家反馈的意见整理出新的需求，动态扩展、调整、优化。初始阶段按照简单的分层架构设计，具体见下图：

• 应用架构
  
• 技术架构
  

项目需要在前后端之间不断穿梭，但在做教程的时候，我会尽量模块化地去讲解。

此外，我把教程分为了几个阶段，是为了循序渐进、由易到难地讲解知识点。

各个阶段的主要内容如下（随教程进展更新）：

（一）第一部分

这个项目的第一部分以图书信息管理为示例，主要帮助大家理解以下内容：

• 如何从 0 开始搭建 Web 项目？
• 什么是前后端分离？如何实现前后端分离？
• 单页面应用有哪些特点？
• 如何在 Web 项目中使用数据库并利用网页实现增删改查？
• 在开发中如何利用各种辅助手段？
• Vue.js 的基本概念与用法
• 简单的前端页面设计
• 如何部署 Web 应用？

各个页面的效果大致如下：

登录页面：

首页：

图书馆页面：

（二）第二部分

项目的第二部分是后台管理模块的开发，主要包括以下内容：

• 后台管理模块的常见功能与布局（内容管理、用户\权限管理、运维监控）
• 用户身份验证、授权、会话管理与信息加密存储
• Shiro 框架的使用
• 实现不同粒度的访问控制（动态菜单、功能控制、数据控制）
• 结合内容管理，实现文章的编写与展示

后台基本结构如下：

后台页面效果：

Dashboard（from PanJiaChen / vue-element-admin）：

图书管理：

用户管理：

笔记本页面效果：

文章列表：

文章详情：

---

二、技术栈

参考技术架构图，项目使用的主要技术如下：

1.前端技术栈

1.Vue.js
2.ElementUI
3.axios

2.后端技术栈

1.Spring Boot
2.Apache Shiro
3.Apache Log4j2
4.Spring Data JPA
5.Spring Data Redis

3.数据库

1.MySQL
2.Redis

在开发过程中还会不断用到一些新的技术，有必要的我会增添上去。

4.主要参考内容

1.How2J.cn - Java 全栈学习网站
2.Vue.js - 渐进式 JavaScript 框架
3.Element - 网站快速成型工具

三、总体计划

因为项目只能利用业余时间开发，而且有些东西我也是刚刚接触，所以时间跨度会稍微长一点，希望不至于成为有生之年系列。

这个项目的迭代，我想大概分成如下几个阶段：

• 第一阶段，简单的图书管理系统
• 第二阶段，实现用户权限管理，实现较为完善的后台管理系统
• 第三阶段，对项目进行工程化改造，全面提升性能与项目质量
• 第四阶段，上线运营，处理可能遇到的各种问题

感觉这套教程我能写到退休了。。。

虽然我想最终把项目上线，但并不期望它有什么商业价值，所以有些设计并不是很贴合实际，只是为了对应知识点，希望大家可以理解。

下一篇：Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目

---

有兴趣听我扯技术之外的故事的同学可以关注我的公众号。跟博客一样，不定期更新，权当和大家聊聊天，图个乐子。