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 項目實戰（二十）：前端優化實戰
Vue + Spring Boot 項目實戰（二十一）：緩存的應用
開源精選
Erupt Framework：開源神器，助你無需前端代碼搞定企業級后臺管理系統
AntdFront: React 純 Hook 多標簽微前端管理系統解決方案
前言
之前寫了一些關于 Java EE 的文章，主要是理論性質的，目的是幫助大家快速了解 Java EE 的核心內容，早日爬出這個陳舊又繞不開的坑，進入 Java Web 開發的新天地。當然只有理論是不夠的，有很多細節需要在實踐中理解，所以我決定做一個實踐教程。
這個項目十分簡單，是一個純粹為教程而生的原型，可以視為一個簡陋的帶后臺的門戶網站。所以學習時不用有什么壓力，估計你們學的比我寫的快很多。
我的目標是根據這個教程，可以幫助 新入行的或是剛開始學習相關技術 的小伙伴們把一個完整的項目還原出來，建立起對前后端分離式 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
在開發過程中還會不斷用到一些新的技術，有必要的我會增添上去。
三、主要參考內容
下一篇：Vue + Spring Boot 項目實戰（二）：搭建 Vue.js 項目
有興趣聽我扯技術之外的故事的同學可以關注我的公眾號。不定期更新，權當和大家聊聊天，圖個樂子。
3萬+
