專欄目錄（持續(xù)更新）
第一部分
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（一）：項(xiàng)目簡(jiǎn)介
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（二）：搭建 Vue.js 項(xiàng)目
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（三）：前后端結(jié)合測(cè)試（登錄頁(yè)面開發(fā)）
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（四）：數(shù)據(jù)庫(kù)的引入
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（五）：使用 Element 輔助前端開發(fā)
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（六）：前端路由與登錄攔截器
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（七）：導(dǎo)航欄與圖書頁(yè)面設(shè)計(jì)
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（八）：數(shù)據(jù)庫(kù)設(shè)計(jì)與增刪改查
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（九）：核心功能的前端實(shí)現(xiàn)
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十）：圖片上傳與項(xiàng)目的打包部署
第二部分
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十一）：用戶角色權(quán)限管理模塊設(shè)計(jì)
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十二）：訪問(wèn)控制及其實(shí)現(xiàn)思路
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十三）：使用 Shiro 實(shí)現(xiàn)用戶信息加密與登錄認(rèn)證
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十四）：用戶認(rèn)證方案與完善的訪問(wèn)攔截
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十五）：動(dòng)態(tài)加載后臺(tái)菜單
Vue + Spring Boot 項(xiàng)目實(shí)戰(zhàn)（十六）：功能級(jí)訪問(wèn)控制的實(shí)現(xiàn)
前言
這是一套面向 Java Web 技術(shù)棧新手的入門實(shí)戰(zhàn)教程。
網(wǎng)上相關(guān)教程很多扒磁，但要么只是做了一個(gè) DEMO 届案，要么對(duì)許多關(guān)鍵問(wèn)題一筆帶過(guò)劲件。我的目標(biāo)是根據(jù)這個(gè)教程伏穆，可以把一個(gè)完整的項(xiàng)目還原出來(lái)。當(dāng)然流译，每個(gè)人的理解方式不同，可能有些細(xì)節(jié)沒講到位辛藻，歡迎大家在評(píng)論區(qū)提問(wèn)，也可以通過(guò)郵箱 (Evan_Nightly@163.com) 聯(lián)系我互订，我一定會(huì)認(rèn)真解答吱肌。
一、項(xiàng)目概述
這個(gè)項(xiàng)目我把它命名為 “白卷”仰禽，因?yàn)樗菑?0 開始逐漸開發(fā)的氮墨。系統(tǒng)里的內(nèi)容也需要逐步添加田弥，象征著知識(shí)的從無(wú)到有呛每，從有到多仓技。另外我還給它起了一個(gè)英文名字焕梅，叫 White Jotter（白色筆記本）青灼，純粹是為了諧音涕癣。
雖說(shuō)項(xiàng)目是前后端分離的仗岸，但畢竟主要開發(fā)人員只有我一人耿焊，所以只能在前后端之間不斷穿梭诚镰。但在做教程的時(shí)候奕坟，我會(huì)盡量模塊化地去講解。
其實(shí)要做一個(gè)這種教程還真不容易清笨，幾乎是要把項(xiàng)目再做一遍月杉。。抠艾。
之所以把教程分為幾個(gè)階段苛萎，是為了循序漸進(jìn)、由易到難地講解知識(shí)點(diǎn)检号，網(wǎng)站的總體設(shè)計(jì)與布局會(huì)隨著項(xiàng)目進(jìn)程動(dòng)態(tài)優(yōu)化腌歉，具體內(nèi)容會(huì)在階段變更時(shí)提到。各個(gè)階段的主要內(nèi)容如下（隨教程進(jìn)展更新）：
（一）第一部分
這個(gè)項(xiàng)目的第一部分以圖書信息管理為示例齐苛，主要幫助大家理解以下內(nèi)容：
- 如何從 0 開始搭建 Web 項(xiàng)目翘盖？
- 什么是前后端分離？如何實(shí)現(xiàn)前后端分離凹蜂？
- 單頁(yè)面應(yīng)用有哪些特點(diǎn)馍驯？
- 如何在 Web 項(xiàng)目中使用數(shù)據(jù)庫(kù)并利用網(wǎng)頁(yè)實(shí)現(xiàn)增刪改查？
- 在開發(fā)中如何利用各種輔助手段玛痊？
- Vue.js 的基本概念與用法
- 簡(jiǎn)單的前端頁(yè)面設(shè)計(jì)
- 如何部署 Web 應(yīng)用汰瘫？
基本結(jié)構(gòu)如下圖：
各個(gè)頁(yè)面的效果大致如下：
登錄頁(yè)面：
首頁(yè)：
圖書館頁(yè)面：
（二）第二部分
項(xiàng)目的第二部分是后臺(tái)管理模塊的開發(fā)，主要包括以下內(nèi)容：
- 后臺(tái)管理模塊的常見功能與布局（內(nèi)容管理擂煞、用戶\權(quán)限管理混弥、運(yùn)維監(jiān)控）
- 用戶身份驗(yàn)證、授權(quán)颈娜、會(huì)話管理與信息加密存儲(chǔ)
- Shiro 框架的使用
- 實(shí)現(xiàn)不同粒度的訪問(wèn)控制（動(dòng)態(tài)菜單剑逃、功能控制浙宜、數(shù)據(jù)控制）
后臺(tái)基本結(jié)構(gòu)如下：
后臺(tái)頁(yè)面效果：
Dashboard：
圖書管理：
用戶管理：
二、技術(shù)棧
項(xiàng)目比較完整的技術(shù)棧如下蛹磺。
1.前端技術(shù)棧
1.Vue.js
2.ElementUI
3.axios
2.后端技術(shù)棧
1.SpringBoot
2.Shiro
3.MySQL
4.JPA
在開發(fā)過(guò)程中還會(huì)不斷用到一些新的技術(shù)粟瞬，有必要的我會(huì)增添上去。
3.主要參考內(nèi)容
1.How2J.cn - Java 全棧學(xué)習(xí)網(wǎng)站
2.Vue.js - 漸進(jìn)式 JavaScript 框架
3.Element - 網(wǎng)站快速成型工具
三萤捆、總體計(jì)劃
因?yàn)轫?xiàng)目只能利用業(yè)余時(shí)間開發(fā)裙品，而且有些東西我也是剛剛接觸，所以時(shí)間跨度會(huì)稍微長(zhǎng)一點(diǎn)俗或，希望不至于成為有生之年系列市怎。
這個(gè)項(xiàng)目的迭代，我想大概分成如下幾個(gè)階段：
- 第一階段辛慰，簡(jiǎn)單的圖書管理系統(tǒng)
- 第二階段区匠，實(shí)現(xiàn)用戶權(quán)限管理，實(shí)現(xiàn)較為完善的后臺(tái)管理系統(tǒng)
- 第三階段帅腌，對(duì)項(xiàng)目進(jìn)行工程化改造
- 第四階段驰弄，上線運(yùn)營(yíng)，處理可能遇到的各種問(wèn)題
感覺這套教程我能寫到退休了速客。戚篙。。
雖然我想最終把項(xiàng)目上線溺职，但并不期望它有什么商業(yè)價(jià)值岔擂，所以有些設(shè)計(jì)并不是很貼合實(shí)際，只是為了對(duì)應(yīng)知識(shí)點(diǎn)浪耘，希望大家可以理解乱灵。
GitHub 地址：https://github.com/Antabot/White-Jotter
開發(fā)過(guò)程中遇到問(wèn)題，可以在相應(yīng)文章下面留言七冲，也可以微信搜索我的公號(hào)【白學(xué)筆記】獲取私人微信添加方式阔蛉。
