专栏目录（持续更新）

第一部分

第二部分

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

前言

这是一套面向 Java Web 技术栈新手的入门实战教程。

网上相关教程很多，但要么只是做了一个 DEMO ，要么对许多关键问题一笔带过。我的目标是根据这个教程，可以把一个完整的项目还原出来。当然，每个人的理解方式不同，可能有些细节没讲到位，欢迎大家在评论区提问，也可以通过邮箱 (Evan_Nightly@163.com) 联系我，我一定会认真解答。

一、项目概述

这个项目我把它命名为 “白卷”，因为它是从 0 开始逐渐开发的。系统里的内容也需要逐步添加，象征着知识的从无到有，从有到多。另外我还给它起了一个英文名字，叫 White Jotter（白色笔记本），纯粹是为了谐音。

虽说项目是前后端分离的，但毕竟主要开发人员只有我一人，所以只能在前后端之间不断穿梭。但在做教程的时候，我会尽量模块化地去讲解。

其实要做一个这种教程还真不容易，几乎是要把项目再做一遍。。。

之所以把教程分为几个阶段，是为了循序渐进、由易到难地讲解知识点，网站的总体设计与布局会随着项目进程动态优化，具体内容会在阶段变更时提到。各个阶段的主要内容如下（随教程进展更新）：

（一）第一部分

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

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

基本结构如下图：

项目结构

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

登录页面：

登录页面

首页：

首页

图书馆页面：

图书馆

（二）第二部分

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

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

后台基本结构如下：

在这里插入图片描述

后台页面效果：

Dashboard：

dashboard

图书管理：

图书管理

用户管理：

在这里插入图片描述

二、技术栈

项目比较完整的技术栈如下。

1.前端技术栈

1.Vue.js
2.ElementUI
3.axios

2.后端技术栈

1.SpringBoot
2.Shiro
3.MySQL
4.JPA

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

3.主要参考内容

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

三、总体计划

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

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

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

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

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

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

开发过程中遇到问题，可以在相应文章下面留言，也可以微信搜索我的公号【白学笔记】获取私人微信添加方式。

Java Web 开发入门全套教程（Vue Spring Boot）