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 項目
有興趣聽我扯技術之外的故事的同學可以關注我的公衆號。跟博客一樣，不定期更新，權當和大家聊聊天，圖個樂子。
