Vue.js + Spring Boot 前后端分離項目實踐

前言

之前寫了一些關(guān)于 Java EE 的文章扫沼,主要是理論性質(zhì)的,目的是幫助大家快速了解 Java EE 的核心內(nèi)容庄吼,早日進(jìn)入 Java Web 開發(fā)的大坑缎除。當(dāng)然只有理論是不夠的,開發(fā)是一門技術(shù)活总寻,有很多細(xì)節(jié)需要在實踐中理解器罐,所以我決定做一個實踐教程。

選用 Vue.js + Spring Boot 來開發(fā)這個項目渐行,是因為這兩種框架是當(dāng)下最新轰坊、最熱門的技術(shù)之一铸董,也是實現(xiàn)所謂 前后端分離 的最佳選擇之一。

網(wǎng)上相關(guān)教程很多肴沫,但要么只是做了一個 DEMO 粟害,要么對許多關(guān)鍵問題一筆帶過。我的目標(biāo)是根據(jù)這個教程颤芬,可以把一個完整的項目還原出來悲幅,所以我會盡量詳細(xì)地描述開發(fā)的過程。當(dāng)然驻襟,每個人的理解方式不同夺艰,可能有些細(xì)節(jié)沒講到位,歡迎大家在評論區(qū)提問沉衣,也可以通過郵箱 (Evan_Nightly@163.com) 聯(lián)系我郁副,我一定會認(rèn)真解答。

一豌习、項目概述

這個項目我把它命名為 “白卷”存谎,因為它是從 0 開始逐漸開發(fā)的,而它的本質(zhì)是一個 圖書管理系統(tǒng)肥隆,系統(tǒng)里的內(nèi)容也需要逐步添加既荚,象征著知識的從無到有,從有到多栋艳。另外我還給它起了一個英文名字恰聘,叫 White Jotter(白色筆記本),純粹是為了諧音吸占。

項目的基本結(jié)構(gòu)如下圖:

(一)開發(fā)思路

雖說項目是前后端分離的晴叨,但畢竟主要開發(fā)人員只有我一人(薅了個學(xué)弟幫忙,但演變成了我邊做邊給他講)矾屯,所以只能在前后端之間不斷穿梭兼蕊。但在做教程的時候,我會盡量模塊化地去講解件蚕。

其實要做一個這種教程還真不容易孙技,幾乎是要把項目再做一遍。排作。牵啦。

系統(tǒng)主要分為三大模塊:首頁(展示模塊)、圖書館(核心功能模塊)和筆記本(擴(kuò)展功能模塊)纽绍,每個模塊對應(yīng)多個具體功能蕾久。

(二)需求分析

有一種說法是開發(fā)項目需要花費百分之八十的精力在分析設(shè)計上,剩下的百分之二十才是擼代碼。這個數(shù)值準(zhǔn)不準(zhǔn)不知道僧著,但是這種思想是正確的履因。我過去想做什么總是直接開干,做過許多無用功盹愚,希望大家不要一門心思撲在代碼上栅迄,多花些精力做項目的總體設(shè)計、需求分析這些皆怕,對個人的成長絕對有好處毅舆。

因為這是個小項目,我就不浪費太多篇幅了愈腾,只對應(yīng)上面的 圖書館 模塊憋活,做一個簡單的需求分析。

第一部分:功能摘要

1.圖書展示

2.圖書管理

3.信息查詢

4.其它功能

第二部分:功能需求

1.圖書展示

該頁面需要良好的圖書展示功能虱黄,能夠反映出圖書的基本信息悦即,并做到簡潔、美觀橱乱,與網(wǎng)站整體風(fēng)格一致辜梳。

圖書需展示的信息如下:

書名、作者泳叠、簡介作瞄、封面等。

2.圖書管理

圖書分類

根據(jù)網(wǎng)站總體設(shè)計危纫,圖書的分類由用戶自定義(可支持多級分類)宗挥,并以標(biāo)簽作為輔助。

分類具有嚴(yán)格的層級關(guān)系种蝶,屬于樹狀結(jié)構(gòu)属韧,而標(biāo)簽則相互獨立。

用戶可利用分類或標(biāo)簽進(jìn)行圖書的篩選蛤吓。

圖書上傳

用戶可以上傳本地電子書或?qū)嶓w書信息至服務(wù)器。

電子書需要的信息有:書名糠赦、作者会傲、簡介、封面拙泽、分類淌山、標(biāo)簽、附件

實體書需要的信息有:書名顾瞻、作者泼疑、簡介、封面荷荤、分類退渗、標(biāo)簽移稳、存放位置

信息維護(hù)

修改: 用戶可以根據(jù)需要修改圖書的信息。除了上傳時的信息外会油,還可以輸入額外的內(nèi)容个粱,如:評分、閱讀情況翻翩、閱讀筆記都许。(可增加自定義欄)

刪除: 用戶可以根據(jù)需要刪除圖書條目。

3.信息查詢

圖書檢索

添加搜索欄嫂冻,進(jìn)行智能全文搜索胶征。(包括對分類和標(biāo)簽的搜索)

圖書排序

根據(jù)名稱、時間桨仿、評分等對圖書排序睛低。

4.其它功能

標(biāo)注

閱讀過程中可以添加筆記并保存。

(持續(xù)開發(fā)中)

二蹬敲、技術(shù)棧

項目比較完整的技術(shù)棧如下暇昂。

1.前端技術(shù)棧

1.Vue.js

2.ElementUI

3.axios

2.后端技術(shù)棧

1.SpringBoot

2.SpringSecurity

3.MySQL

在開發(fā)過程中還會不斷用到一些細(xì)碎的技術(shù),有必要的我會增添上去伴嗡。

---------------------?

作者:Evan-Nightly?

來源:CSDN?

原文:https://blog.csdn.net/Neuf_Soleil/article/details/88925013?

*? 聲明:轉(zhuǎn)載文章和圖片均來自公開網(wǎng)絡(luò)急波,版權(quán)歸作者本人所有。如果出處有誤或侵犯到原作者權(quán)益瘪校,請與我們聯(lián)系刪除或授權(quán)事宜澄暮。

如果您前端學(xué)習(xí)的過程中遇到難題,歡迎關(guān)注微信公眾號【筑夢前端】阱扬,大家一起交流討論解決泣懊!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市麻惶,隨后出現(xiàn)的幾起案子馍刮,更是在濱河造成了極大的恐慌,老刑警劉巖窃蹋,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卡啰,死亡現(xiàn)場離奇詭異,居然都是意外死亡警没,警方通過查閱死者的電腦和手機(jī)匈辱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杀迹,“玉大人亡脸,你說我怎么就攤上這事。” “怎么了浅碾?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵大州,是天一觀的道長。 經(jīng)常有香客問我及穗,道長摧茴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任埂陆,我火速辦了婚禮苛白,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘焚虱。我一直安慰自己购裙,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布鹃栽。 她就那樣靜靜地躺著躏率,像睡著了一般。 火紅的嫁衣襯著肌膚如雪民鼓。 梳的紋絲不亂的頭發(fā)上薇芝,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天,我揣著相機(jī)與錄音丰嘉,去河邊找鬼夯到。 笑死,一個胖子當(dāng)著我的面吹牛饮亏,可吹牛的內(nèi)容都是我干的耍贾。 我是一名探鬼主播,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼路幸,長吁一口氣:“原來是場噩夢啊……” “哼荐开!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起简肴,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤晃听,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后砰识,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杂伟,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年仍翰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片观话。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡予借,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情灵迫,我是刑警寧澤秦叛,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站瀑粥,受9級特大地震影響挣跋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狞换,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一避咆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧修噪,春花似錦查库、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至脏款,卻和暖如春围苫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背撤师。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工剂府, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人丈氓。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓周循,卻偏偏與公主長得像,于是被迫代替她去往敵國和親万俗。 傳聞我的和親對象是個殘疾皇子湾笛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件闰歪、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評論 4 62
  • 似乎最近大家跨過了討論“楚喬傳”的狗血,更多再期待“我的前半生”漸漸沒有亦舒原著味道的表達(dá)…… 從起初對羅子君的厭...
    劉暢國家高級禮儀講師閱讀 511評論 2 1
  • 你回來了教翩,到我的生命里杆勇。 “給你買了圍巾,和我的一模一樣饱亿,回頭帶給你”蚜退,“打折的”很快她又補(bǔ)充了一句闰靴,電話那頭姐高...
    瑛子兒閱讀 597評論 4 2
  • 簡介 本節(jié)主要是介紹計算理論上的一些基本概念, 和一個最簡單的計算模型, 即自動機(jī)模型. 自動機(jī)模型能解決的問題相...
    NeptuneCS閱讀 1,501評論 0 0
  • 【4.】 自從小倩學(xué)姐知道我有加入?大之聲的意向,就無時無刻的向我推銷廣播電臺钻注。雖然我已經(jīng)決定要進(jìn)去了蚂且,但我...
    枯藤_君閱讀 363評論 0 0