Vue + Springboot 先後端分離項目實踐：項目簡介及教程

專欄目錄（持續更新）

Vue.js + Spring Boot 先後端分離項目實踐（一）：項目簡介
Vue.js + Spring Boot 先後端分離項目實踐（二）：搭建 Vue.js 項目
Vue.js + Spring Boot 先後端分離項目實踐（三）：先後端結合測試（登陸頁面開發）
Vue.js + Spring Boot 先後端分離項目實踐（四）：數據庫的引入
Vue.js + Spring Boot 先後端分離項目實踐（五）：使用 Element 輔助前端開發
Vue.js + Spring Boot 先後端分離項目實踐（六）：前端路由與登陸攔截器

前言

以前寫了一些關於 Java EE 的文章，主要是理論性質的，目的是幫助你們快速瞭解 Java EE 的核心內容，早日進入 Java Web 開發的大坑。固然只有理論是不夠的，開發是一門技術活，有不少細節須要在實踐中理解，因此我決定作一個實踐教程。

選用 Vue.js + Spring Boot 來開發這個項目，是由於這兩種框架是當下最新、最熱門的技術之一，也是實現所謂 先後端分離 的最佳選擇之一。

網上相關教程不少，但要麼只是作了一個 DEMO ，要麼對許多關鍵問題一筆帶過。個人目標是根據這個教程，能夠把一個完整的項目還原出來，因此我會盡可能詳細地描述開發的過程。固然，每一個人的理解方式不一樣，可能有些細節沒講到位，歡迎你們在評論區提問，也能夠經過郵箱 (Evan_Nightly@163.com) 聯繫我，我必定會認真解答。

1、項目概述

這個項目我把它命名爲 「白卷」，由於它是從 0 開始逐漸開發的，而它的本質是一個 圖書管理系統，系統裏的內容也須要逐步添加，象徵着知識的從無到有，從有到多。另外我還給它起了一個英文名字，叫 White Jotter（白色筆記本），純粹是爲了諧音。

項目的基本結構以下圖：

（一）開發思路

雖然說項目是先後端分離的，但畢竟主要開發人員只有我一人（薅了個學弟幫忙，但演變成了我邊作邊給他講），因此只能在先後端之間不斷穿梭。但在作教程的時候，我會盡可能模塊化地去講解。

其實要作一個這種教程還真不容易，幾乎是要把項目再作一遍。。。

系統主要分爲三大模塊：首頁（展現模塊）、圖書館（核心功能模塊）和筆記本（擴展功能模塊），每一個模塊對應多個具體功能。

（二）需求分析

有一種說法是開發項目須要花費百分之八十的精力在分析設計上，剩下的百分之二十纔是擼代碼。這個數值準不許不知道，可是這種思想是正確的。我過去想作什麼老是直接開幹，作過許多無用功，但願你們不要一門心思撲在代碼上，多花些精力作項目的整體設計、需求分析這些，對我的的成長絕對有好處。

由於這是個小項目，我就不浪費太多篇幅了，只對應上面的 圖書館 模塊，作一個簡單的需求分析。

---

第一部分：功能摘要

1.圖書展現

功能描述	優先級
基本信息	高
補充信息	中

2.圖書管理

功能描述	優先級
圖書分類	高
圖書上傳	高
圖書維護	高

3.信息查詢

功能描述	優先級
圖書檢索	中
圖書排序	低

4.其它功能

功能描述	優先級
閱讀標註	低

第二部分：功能需求

1.圖書展現

該頁面須要良好的圖書展現功能，可以反映出圖書的基本信息，並作到簡潔、美觀，與網站總體風格一致。

圖書需展現的信息以下：

書名、做者、簡介、封面等。

2.圖書管理

圖書分類

根據網站整體設計，圖書的分類由用戶自定義（可支持多級分類），並以標籤做爲輔助。

分類具備嚴格的層級關係，屬於樹狀結構，而標籤則相互獨立。

用戶可利用分類或標籤進行圖書的篩選。

圖書上傳

用戶能夠上傳本地電子書或實體書信息至服務器。

電子書須要的信息有：書名、做者、簡介、封面、分類、標籤、附件

實體書須要的信息有：書名、做者、簡介、封面、分類、標籤、存放位置

信息維護

修改： 用戶能夠根據須要修改圖書的信息。除了上傳時的信息外，還能夠輸入額外的內容，如：評分、閱讀狀況、閱讀筆記。（可增長自定義欄）

刪除： 用戶能夠根據須要刪除圖書條目。

3.信息查詢

圖書檢索

添加搜索欄，進行智能全文搜索。（包括對分類和標籤的搜索）

圖書排序

根據名稱、時間、評分等對圖書排序。

4.其它功能

標註

閱讀過程當中能夠添加筆記並保存。

##### （持續開發中）

2、技術棧

項目比較完整的技術棧以下。

1.前端技術棧

1.Vue.js
2.ElementUI
3.axios

2.後端技術棧

1.SpringBoot
2.SpringSecurity
3.MySQL

在開發過程當中還會不斷用到一些細碎的技術，有必要的我會增添上去。

3.主要參考內容

1.How2J.cn - Java 全棧學習網站
2.Vue.js - 漸進式 JavaScript 框架
3.Element - 網站快速成型工具

3、時間安排

由於項目只能利用業餘時間開發，因此時間跨度會稍微長一點，計劃在 五月以前 基本完成核心內容模塊以及相應的教程。

項目我會天天跟進，教程每一週寫一到兩篇，仍是有一些壓力的，幸好我不用 996，感謝老闆。

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

歡迎你們訪問個人博客 Evan 的博客！