在這里插入圖片描述

作者：曾中杰

有多少人只顧著眼前的六便士，卻不曾抬頭看看皎潔的月亮

項(xiàng)目地址一覽： https://www.zengzhongjie.com

GitHub源碼下載地址： https://github.com/Mretron

背景：

????博主是一名大二軟件工程的學(xué)生。堅(jiān)持學(xué)習(xí)課堂上未曾教授的java以及javaweb相關(guān)的知識(shí)，乃至學(xué)習(xí)Spring一系列的框架的過(guò)程尤為枯燥。每天看視頻學(xué)習(xí)編程，“copy”視頻中的代碼運(yùn)行讓我就像是機(jī)器一樣日復(fù)一日地重復(fù)著那些操作。而使得我能夠堅(jiān)持下去的興趣，就是能夠在不久的將來(lái)完成我自己的項(xiàng)目。也就有了我的個(gè)人博客網(wǎng)站。

網(wǎng)站一覽：

首頁(yè)

在這里插入圖片描述

分類頁(yè)面

在這里插入圖片描述

歸檔頁(yè)面

在這里插入圖片描述

后臺(tái)管理頁(yè)面

在這里插入圖片描述

后臺(tái)發(fā)布文章頁(yè)面

在這里插入圖片描述

技術(shù)組合：

• 后端：SpringBoot + Mysql + JPA + Maven + 阿里云OSS + thymeleaf模板
• 前端：Semantic UI框架 + html + css + js + jQuery + editor.md等

插件集成（相關(guān)下載地址后文提到）

• 編輯器 markdown
• 內(nèi)容排版 typo
• 動(dòng)畫(huà) animate
• 代碼高亮 prism
• 目錄生成 Tocbot
• 滾動(dòng)偵測(cè) waypoints
• 平滑滾動(dòng) jquery.scrollTo
• 二維碼生成 qrcode.js
• MarkDown轉(zhuǎn)HTML
• 簡(jiǎn)單的爬蟲(chóng)技術(shù)實(shí)現(xiàn)翻譯單詞功能 jsoup.jar

工具與環(huán)境:

• IDEA
• Maven 3
• JDK 8

從中有什么收獲？

• 基于SpringBoot的完整全棧式的開(kāi)發(fā)套路
• Semantic UI框架的使用
• 后端使用SpringBoot+JPA，相比于SSM框架大量的配置開(kāi)發(fā)更為方便，作為新手練手的javaweb項(xiàng)目來(lái)說(shuō)是富有意義的：激發(fā)自己編程熱情+熟悉SpringBoot整個(gè)開(kāi)發(fā)流程+完成過(guò)后提高自己的成就感。
• JPA的簡(jiǎn)單使用（JPA和MyBatis的對(duì)比，其實(shí)就是Hibernate和MyBatis的對(duì)比，對(duì)于數(shù)據(jù)的操作，hibernate是面向?qū)ο蟮?，而MyBatis是面向關(guān)系的。對(duì)于我的個(gè)人博客網(wǎng)站來(lái)說(shuō)，面向?qū)ο蟾鼮榉奖阕约豪斫鈽I(yè)務(wù)邏輯，開(kāi)發(fā)過(guò)程中建表也更為方便）。
• 懂得根據(jù)需求去GitHub上面使用優(yōu)秀的開(kāi)源插件，使得自己的項(xiàng)目錦上添花。
• 對(duì)頁(yè)面引擎 thymeleaf模板 的熟悉掌握。相比于連SpringBoot都官方遺棄的jsp來(lái)說(shuō)，掌握thymeleaf是刻不容緩的。（JSP本質(zhì)上是servlet，內(nèi)含java代碼，實(shí)際上沒(méi)有做到前后端分離，所以在大環(huán)境都推崇前后端分離的情況下，著實(shí)不必再使用JSP）
• 與我而言，最大的收獲便是在茫茫互聯(lián)網(wǎng)的大海里面，有了屬于我的一葉扁舟，能夠在扁舟上不斷地分享我的故事給陌生人，老朋友，便是我的榮幸。

小福利

通過(guò)此次開(kāi)發(fā)個(gè)人博客網(wǎng)站，除了學(xué)會(huì)集成上面提到的一些開(kāi)源優(yōu)秀插件，還有一些實(shí)用但是鮮有人知的對(duì)開(kāi)發(fā)起到錦上添花的網(wǎng)站。在此分享給大家。

• Font Awesome : 小圖標(biāo)icon網(wǎng)站，你想要的精美小圖標(biāo)，應(yīng)該都能找到 https://fontawesome.com/
• Subtle Patterns ：全是精美設(shè)計(jì)的背景圖 https://www.toptal.com/designers/subtlepatterns/

1、需求與功能

1.1個(gè)人博客系統(tǒng)的用戶故事：

角色：普通訪客，管理員(我)

普通訪客：

• 查看所有發(fā)布的博客
• 查看博客的公布的所有信息
• 所有博客分類
• 所有博客標(biāo)簽
• 根據(jù)年份劃分的博客信息
• 所有友鏈的信息
• 根據(jù)權(quán)限訪問(wèn)首頁(yè)“小世界”模塊
• 首頁(yè)公告板
• 訪問(wèn)關(guān)于我和關(guān)于本站的頁(yè)面
• 查看所有留言的側(cè)邊欄和提供留言的版塊
• 全局搜索所有的博客
• 查看我分享的所有信息，如：二維碼，導(dǎo)向至GitHub，csdn,微博的圖標(biāo)等

管理員(我):

• 根據(jù)賬號(hào)密碼登錄后臺(tái)管理
• 后臺(tái)增刪改查所有博客
• 后臺(tái)增刪改查所有分類
• 后臺(tái)增刪改查所有便簽
• 后臺(tái)增刪改查公告板
• 后臺(tái)增刪改查留言
• 后臺(tái)增刪改查友鏈信息
• 后臺(tái)增刪改查自己的信息

1.2功能規(guī)劃

在這里插入圖片描述

2、頁(yè)面設(shè)計(jì)與開(kāi)發(fā)

2.1設(shè)計(jì)

頁(yè)面規(guī)劃：

• 前端展示:首頁(yè)、分類頁(yè)、標(biāo)簽頁(yè)、歸檔頁(yè)、本站、友鏈。關(guān)于我
• 后臺(tái)管理：登錄頁(yè)面、博客管理、分類管理、標(biāo)簽管理、公告管理、友鏈管理、留言管理、個(gè)人信息管理

2.2頁(yè)面開(kāi)發(fā)

• Semantic UI官網(wǎng) https://semantic-ui.com/
• Semantic UI中文官網(wǎng) https://onebugman.cn/semantic-ui/
• 背景圖片資源 https://www.toptal.com/designers/subtlepatterns/

2.3插件集成

3、框架搭建

3.1構(gòu)建

IDEA 引入SpringBoot模塊

• web ：springboot集成了tomcat和springmvc的一些模塊
• Thymeleaf ： 前端的模板 和jsp的最終的目的一樣的
• Jpa ： 規(guī)范數(shù)據(jù)操作的工具
• MySql ：數(shù)據(jù)庫(kù)
• Aspects ： 集成SpringAOP的模塊，這里使用切面來(lái)實(shí)現(xiàn)日志
• DevTools：熱部署，幫助我們開(kāi)發(fā)過(guò)程中不用每次都重新啟動(dòng)項(xiàng)目啟動(dòng)

3.2異常處理

錯(cuò)誤頁(yè)面：

• 404： 訪問(wèn)的資源不存在或者頁(yè)面不存在，這種情況跳轉(zhuǎn)404
• 500： SpringBoot后臺(tái)發(fā)生了一些異常信息的時(shí)候跳轉(zhuǎn)的頁(yè)面，這種跳轉(zhuǎn)500
• ERROR： 我們自己定義的錯(cuò)誤頁(yè)面，方便開(kāi)發(fā)者調(diào)試，可以便捷的查看

3.3日志處理

記錄日志內(nèi)容

• 請(qǐng)求url
• 訪問(wèn)者ip
• 調(diào)用方法 classMethod
• 參數(shù)args
• 返回內(nèi)容

4、設(shè)計(jì)與規(guī)范

4.1實(shí)體設(shè)計(jì)

實(shí)體類

• 博客Blog
• 博客分類Type
• 博客標(biāo)簽Tag
• 博客評(píng)論Comment
• 用戶User
• 公告欄Bulletin
• 朋友Friend
• 留言Message

舉例兩個(gè)數(shù)據(jù)庫(kù)表：

博客表t_blog

用戶表t_user

4.2應(yīng)用分層

在這里插入圖片描述

5、開(kāi)發(fā)流程

5.1開(kāi)發(fā)

• 剛開(kāi)始使用手繪或者專門的畫(huà)圖工具畫(huà)出網(wǎng)站的原型
• 在WebStorm中通過(guò)semantic UI根據(jù)設(shè)計(jì)的原型將前端網(wǎng)頁(yè)碼出來(lái)
• 接著使用IDEA，構(gòu)建SpringBoot環(huán)境進(jìn)行后端的編寫(xiě)

1. dao持久層通過(guò)接口繼承JPARepository即可得到CRUD的標(biāo)準(zhǔn)方法，如果需要特定的查詢方法，根據(jù)Jpa命名規(guī)則或者使用@Query注解即可
2. service業(yè)務(wù)邏輯層先編寫(xiě)一系列接口及其想實(shí)現(xiàn)的方法，再通過(guò)類去實(shí)現(xiàn)相應(yīng)的接口，注意添加@Service注解放進(jìn)IOC容器中。提供給Controller層調(diào)用
3. 在service業(yè)務(wù)邏輯層的實(shí)體類中的方法加上@Transactional事務(wù)注解，實(shí)現(xiàn)開(kāi)啟事務(wù)
4. Web層的Controller再通過(guò)依賴注入service即可完成相應(yīng)的業(yè)務(wù)邏輯
5. 通過(guò)thymeleaf前端引擎進(jìn)行渲染數(shù)據(jù)

• 后端完成過(guò)后，進(jìn)行整體細(xì)節(jié)處理，進(jìn)一步完善整個(gè)網(wǎng)站的正常運(yùn)行

5.2部署

• 采用的是SpringBoot自帶的 jar包的 部署方式
• 通過(guò)maven 的 intall 命令得到 xxx.jar
• 放到阿里云Linux服務(wù)器中
• 使用 nohup java -jar xxx.jar & 命令 使得項(xiàng)目可以后臺(tái)運(yùn)行

值得一提

• 對(duì)于這個(gè)項(xiàng)目的開(kāi)發(fā)能夠較為順利地進(jìn)行，得益于李仁密老師的網(wǎng)絡(luò)視頻，在此特地感謝他。
• Semantic UI 是一種語(yǔ)義化的前端框架，只要稍微熟悉，就能構(gòu)建精美的頁(yè)面，特此感謝semantic UI。
• 作為一名java后端人員，前端免不了遇到各種各樣的錯(cuò)誤，在此感謝我的前端大佬好朋友龔皓的支持，幫助我解決了很多前端的問(wèn)題。
• 整個(gè)項(xiàng)目完成過(guò)后，最為讓我煎熬的居然是備案。在大陸的網(wǎng)絡(luò)服務(wù)器要想和你的域名進(jìn)行DNS綁定，必須經(jīng)過(guò)備案，而港澳臺(tái)等地則不需要。而備案過(guò)程中耗時(shí)最長(zhǎng)的便是郵寄資料過(guò)去，等待阿里審核更新你的網(wǎng)站備案信息。

不足之處：

• 頁(yè)面還是因?yàn)椴皇煜で岸说讓?，有一些bug需要修復(fù)
• 后端只是基本的邏輯實(shí)現(xiàn)，接下來(lái)需要加入新的技術(shù)，提高整體網(wǎng)站的性能。如：Redis緩存實(shí)現(xiàn)
• 針對(duì)博客頁(yè)面的二級(jí)回復(fù)目前待完善。
• 博客的首頁(yè)小世界欄目頁(yè)面待完成。
• 上傳圖片到阿里云OSS存儲(chǔ)對(duì)象的功能待完成。
• 全局搜索博客的功能待完成。
• SSL認(rèn)證,http自動(dòng)轉(zhuǎn)https(完成)
• 各種語(yǔ)言代碼都支持高亮顯示(完成)
• 文章頁(yè)面增加翻譯單詞功能(完成)

秉承開(kāi)源原則，該項(xiàng)目完整代碼均能在我的github上面下載得到。能夠幫到有需要的朋友那是再好不過(guò)。
覺(jué)得博主的分享還不錯(cuò)，不妨在github上star一下博主，激勵(lì)博主更新更多實(shí)用的功能。

項(xiàng)目地址一覽： https://www.zengzhongjie.com

GitHub源碼下載地址： https://github.com/Mretron