作者：學(xué)Java的冬瓜
博客主頁：?冬瓜的主頁??
專欄：【JavaEE】
分享:
徘徊著的 在路上的 你要走嗎
易碎的 驕傲著
那也曾是我的模樣
——《平凡之路》

主要內(nèi)容：顯示用戶信息、上傳頭像、新增博客、刪除博客、修改博客。

一、顯示用戶信息

分兩個子功能：列表頁顯示登錄用戶信息；詳情頁顯示博客作者信息。

1）列表頁顯示登錄用戶信息

1>約定前后端交互接口

2>編寫前端代碼

理解：在blog_list.html中，在寫驗證登陸時，就把user作為json格式的字符串響應(yīng)給前端，在這里前端只需要新增一點東西，即驗證登錄成功后，取出username顯示在頁面上。

3>編寫后端代碼

理解：在loginServlet的doGet方法中，在寫驗證登陸時，就把user作為json格式的字符串響應(yīng)給前端，和其他地方的驗證登錄一樣，如果未登錄(session為null，或session中沒有當(dāng)前用戶的會話)，則返回一個userId為null的user對象。如果已經(jīng)登錄，那么就根據(jù)userId查詢數(shù)據(jù)庫，再響應(yīng)從數(shù)據(jù)庫中根據(jù)userId查出來的user給前端。

2）詳情頁顯示博客作者信息

1>約定前后端交互接口

理解：從博客列表頁跳轉(zhuǎn)到博客詳情頁時，帶了博客的id，在發(fā)ajax請求時，把博客id帶上，到后端去查詢該篇博客對應(yīng)的用戶id，再查出該用戶寫回給前端。

2>編寫前端代碼
在blog_detail.html中：

3>編寫后端代碼
在AuthorServlet的get方法中：

二、上傳頭像

分兩個子功能：上傳頭像、顯示頭像。

1）上傳頭像

思路：前端使用file控件將文件上傳后，后端需要讀取這個上傳的文件并把它保存在另外一個路徑下，并且得保證這個路徑是唯一的(所以用uuid作為另存的文件名)，然后需要把路徑保存在當(dāng)前修改頭像對應(yīng)的用戶在數(shù)據(jù)庫的用戶信息。

1>約定前后端交互接口

multipart/form-data請求體格式：

2>編寫前端代碼

理解：在card_upload.html頁面中，提交POST請求，并給上傳的標(biāo)簽input文件加上name屬性便于后端使用getPart()方法獲取上傳的文件。

3>編寫后端代碼

在LoadCardServlet的doPost方法中，使用req.getPart()獲取上傳的文件，然后再獲取上傳文件的流。生成uuid作為另存文件名(保證文件的唯一，保證多用戶同時修改頭像不出問題)。
1>并另存該上傳文件在web項目中，路徑為：路徑：/static/upload/uuid.png；
2>然后根據(jù)session中的會話取出當(dāng)前登錄用戶，并把uuid.png保存在數(shù)據(jù)庫對應(yīng)的用戶的信息中。
3>寫一個a標(biāo)簽，用于頭像上傳成功后，跳轉(zhuǎn)到博客列表頁面。

2）顯示頭像

思路：使用GET方法，請求獲取頭像。從數(shù)據(jù)庫中查出這個唯一的路徑，并響應(yīng)給前端(可以使用靜態(tài)資源配置，我弄了半天沒弄出來，等以后有機(jī)會再弄)，前端將這個路徑作為相對路徑解析，補(bǔ)全網(wǎng)絡(luò)路徑，去除字符串拼接引號帶來的影響。最后將這個路徑賦值給對應(yīng)頭像位置img的src屬性。

1> 列表頁顯示登錄用戶頭像

1>約定前后端交互接口

2>編寫前端代碼

在blog_list.html頁面中，在寫驗證登陸時，就把user作為json格式的字符串響應(yīng)給前端blog_list.html，在前端blog_list.html，顯示用戶名時，只需要新增一處，即驗證登錄成功后，取出username顯示在頁面上。
同時驗證登陸成功后，如果此時登陸用戶的headpPath為null，則直接返回，即：使用默認(rèn)的頭像。如果此時headPath不為null，那么發(fā)送請求獲取頭像，如下圖：
后端給響應(yīng)結(jié)果路徑：/uploads/uuid.png，在前端這里補(bǔ)滿路徑，再給img的src賦值，自動獲取圖像。

3>編寫后端代碼

通過blog_list.html的獲取頭像的請求，來到了LoadCardServlet的doGet方法中，（前端傳輸?shù)牡刂窓谏蠜]有blogId）在這里獲取當(dāng)前登錄的用戶id，根據(jù)當(dāng)前登錄的id去查詢數(shù)據(jù)庫，查出uuid.png，并把/uploads加在這個文件名前。寫回給前端。




問題：這里如果直接從session中取出登錄用戶，然后直接取出headPath行不行？
理解：不行！因為登陸時，session創(chuàng)建并把我的登錄信息保存在session中，但是在這之后我修改了頭像，那如果我直接從session里的用戶的headPath取出，這個headPath是我頭像修改前的路徑，就出問題了！
同時因為這里獲取用戶頭像的請求是在checkLogin()方法的檢驗登陸的回調(diào)函數(shù)中發(fā)起的，所以發(fā)起檢驗請求時，在LoginServlet類中，如果檢驗登錄通過，應(yīng)當(dāng)從數(shù)據(jù)庫查出該user，再返回給前端，確保發(fā)起獲取頭像請求的條件成立(即檢驗請求的響應(yīng)是user，user的頭像路徑屬性不為null)。

2> 詳情頁顯示博客作者頭像

1>約定前后端交互接口

2>編寫前端代碼

理解：在blog_detail.html頁面中，在發(fā)起檢查當(dāng)前狀態(tài)是否登錄的回調(diào)函數(shù)中，如果返回的user的userId=0，那么當(dāng)前未登錄，需要強(qiáng)制跳轉(zhuǎn)到登陸頁面。如果user的的屬性headPath為null，那么只需要修改用戶名，不需要修改頭像。如果user的屬性headPath不為null，那就再發(fā)起一個獲取頭像的請求，該請求帶上該篇博客blogId以便后端查詢到該篇博客對應(yīng)的作者?；卣{(diào)函數(shù)返回/uploads/uuid.png，把它補(bǔ)全為一個網(wǎng)路路徑，再賦值給img的src，就可以獲取頭像。

3>編寫后端代碼
通過前端的請求，來到了LoadCardServlet的doGet方法中，先判斷blogId是否為null，為null代表是博客列表頁發(fā)起的獲取頭像請求，不為null，則代表是博客詳情頁發(fā)起的獲取頭像請求，需要通過博客id查數(shù)據(jù)庫找到該篇博客blog，再通過該篇博客的userId屬性找到對應(yīng)作者user，再把對應(yīng)作者的屬性headPath(uuid.png)前加上/uploads/響應(yīng)給前端。

3> 簡述修改geet地址統(tǒng)計博客數(shù)量及博客分類

補(bǔ)充：個人信息的小卡片：

• 注：在小卡片上，還有g(shù)itee地址，文章數(shù)量，文章分類。修改gitee功能就是修改路徑，然后個人文章數(shù)量和博客類型，可以由以下思路去實現(xiàn)。
  統(tǒng)計博客數(shù)量：后端提供一個查詢當(dāng)前用戶的博客數(shù)據(jù)統(tǒng)計的接口，從數(shù)據(jù)庫blog表查詢出來當(dāng)前用戶的博客數(shù)量，顯示在前端頁面上。
  博客分類：再使用一張表flg(類型表)，這張表中的類型和博客的關(guān)系是多對多關(guān)系。需要使用另一張表設(shè)置blog表和flag表的外鍵，來建立相互之間的聯(lián)系。

三、新增博客

說明：除了登錄、注冊頁面，其他頁面(要求強(qiáng)制登錄才可訪問博客系統(tǒng))，都可以點擊導(dǎo)航欄上的寫博客，跳轉(zhuǎn)到寫博客的頁面。
一篇博客，內(nèi)容包含博客Id，標(biāo)題title，正文content，發(fā)布時間postTime，作者id。在這里博客id可以設(shè)置主鍵自增，發(fā)布時間和作者id都可以在后臺設(shè)置，因此前端只需要輸入標(biāo)題title和正文content即可。

1>約定前后端交互接口

2>編寫前端代碼

理解：在blog_edit.html頁面中，需要對markdown編輯器進(jìn)行初始化，調(diào)用editormd()方法可完成初始化。點擊發(fā)布文章，就把title和content提交到后端。

3>編寫后端代碼

理解：點擊發(fā)表文章，就把title和content發(fā)送到了BlogServlet的doPost()方法中。在BlogServlet的doPost()方法中，獲取文章標(biāo)題和正文(主要：獲取前先把req的字符集設(shè)置成utf8，防止亂碼問題)，并獲取登錄會話從而獲取到當(dāng)前登錄的userId，同時new TimeStamp()參數(shù)是當(dāng)前時間戳生成時間。然后將title，content，postTime，userId裝入一個Blog對象中，再進(jìn)行數(shù)據(jù)庫插入博客操作。插入成功后，重定向到博客列表頁面，列表頁面自己再發(fā)送ajax請求獲取當(dāng)前博客列表數(shù)據(jù)，這篇博客就展示到列表頁面了。

四、顯示刪除和編輯按鈕

說明：
1> 對于博客的刪除和編輯來說，都應(yīng)該是博客作者才有的權(quán)限，非作者只能瀏覽博客。因此這個功能就是為了實現(xiàn)這而寫的，具體為：如果當(dāng)前登錄用戶和博客作者是一個人，就在前端給出刪除和編輯按鈕，否則沒有這兩個按鈕。
2> 因為刪除、修改博客，需要后端使用blogId去定位要刪除博客，因此可以將刪除和修改兩個按鈕放在博客詳情頁，因為博客列表頁到詳情頁帶了blogId，從詳情頁到刪除和修改請求就可以在前端使用location.search帶上blogId，很方便。

1>約定前后端交互接口

2>編寫前端代碼

理解：在blog_detail.list頁面中，發(fā)送檢查當(dāng)前登錄用戶是否是一個人的請求后，后端響應(yīng)給前端一個json格式的blog字符串。前端jQuery封裝的Ajax將它解析為json格式的blog對象(js對象)，然后如果userId=0，那么消除兩個a標(biāo)簽的樣式。如果userId>0，那么就給a標(biāo)簽加上名稱和路徑，刪除的路徑是像后端發(fā)起一個get請求，編輯則是跳轉(zhuǎn)到blog_edit.html頁面，注意兩個路徑都會帶上blogId。

3>編寫后端代碼

理解：在CheckLoginUserAndAuthor類的doGet方法中，從會話session中取出當(dāng)前登錄用戶，并通過blogId獲取該篇博客從而獲取這篇博客的userId（authorId），再和登錄用戶的id比較，不相等則new一個blog對象，這個對象的成員全部為初始值，要么為null，要么為0，并將這個對象響應(yīng)給前端。如果authorId和登錄用戶的id相等，那么直接響應(yīng)給前端已經(jīng)從數(shù)據(jù)庫查出的blog對象。

五、刪除博客

1>約定前后端交互接口

2>編寫前端代碼

在bolg_detail.html中，當(dāng)當(dāng)前登錄用戶和博客作者是同一個人時，顯示了刪除按鈕，點擊這按鈕，就觸發(fā)get請求給后端。

3>編寫后端代碼

當(dāng)當(dāng)前登錄用戶和博客作者是同一個人時，點擊刪除博客按鈕，跳轉(zhuǎn)到DeleteBlogServlet的doGet方法中，先獲取當(dāng)前博客的id，然后查詢數(shù)據(jù)庫是否有該博客id，有的話最后刪除并跳轉(zhuǎn)回blog_list.html頁面。

六、修改博客

1>約定前后端交互接口
獲取博客請求：

修改博客請求：

2>編寫前端代碼

說明：在bolg_detail.html中，當(dāng)當(dāng)前登錄用戶和博客作者是同一個人時，顯示了編輯按鈕，點擊這按鈕，跳轉(zhuǎn)到blog_edit.html頁面，這個跳轉(zhuǎn)的請求我就不解釋了，重點在blog_edit.html中怎么講博客的原來的信息展示在編輯頁的markdown文檔中。
在blog_edit.html中，判斷從其他地方跳轉(zhuǎn)到當(dāng)前頁面時，有沒有query string，沒有query string，就認(rèn)為是點擊寫博客觸發(fā)跳轉(zhuǎn)到blog_edit.html頁面；而如果有query string，就認(rèn)為是點擊編輯按鈕觸發(fā)跳轉(zhuǎn)到blog_edit.html頁面。我們剛才也說了，從blog_detail.html頁面點擊編輯博客會帶上博客Id，因此此時是帶有blogId，即有query string，因此下面的代碼就不是在if條件中進(jìn)行markdown初始化，而是在else條件中對blogId對應(yīng)的這篇博客進(jìn)行markdown編輯頁面的信息填充。


注意：修改操作至少涉及到三個比較關(guān)鍵的請求：
1>從blog_detail.html跳轉(zhuǎn)到blog_edit.html。
2>將該篇博客信息在markdown編輯器中填充，這里通過發(fā)送ajax請求，來在前端獲取該篇博客，并將博客信息(title和content)展示在markdown編輯器中。
3> 發(fā)布文章的路徑修改，并且復(fù)用上傳博客時的html代碼，將發(fā)布文章的請求路徑修改成edit?blogId="博客Id"，

3>編寫后端代碼

第一個請求前端可以直接跳轉(zhuǎn)，tomcat自動幫它跳轉(zhuǎn)。
第二個請求，即獲取當(dāng)前博客信息的請求，后端代碼就是復(fù)用BlogServlet的doGet方法，并通過blogId從數(shù)據(jù)庫查出blog，把blog以json格式的字符串寫給前端，這樣就可以將該篇編輯的博客的內(nèi)容寫到markdown編輯器上。
第三個請求，即真正的修改的請求，點擊發(fā)布文章，路徑會跳轉(zhuǎn)到EditBlogServlet的Post方法中，該方法會像點擊寫博客后發(fā)布博客那樣，只是此時blogId，postTime和userId應(yīng)當(dāng)是固定不變的(和原來一樣)，然后在數(shù)據(jù)庫中只需修改博客標(biāo)題title和博客正文content。
最后重定向到blog_list.html頁面，獲取新的博客列表信息。
文章來源地址http://www.zghlxwxcb.cn/news/detail-515297.html

到了這里，關(guān)于【Java EE】-博客系統(tǒng)二(前后端分離)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！