個人博客項目概述

本項目源碼gitee鏈接

此項目為一個博客項目，仿照簡書平臺。用戶可以登陸和注冊賬號、發(fā)布和預(yù)覽文章、對文章進行評論。主要有四部分構(gòu)成：首頁、登錄頁面、發(fā)布文章頁面、查看文章頁面(含評論發(fā)布和預(yù)覽)。使用ajax獲取數(shù)據(jù)，使用express搭建服務(wù)器，使用moogose中間件調(diào)用mongodb數(shù)據(jù)庫，使用jwt進行鑒權(quán)。

首頁

正逢冬奧會開幕所以給冰墩墩做了個博客空間，配色也以藍白為主調(diào)。

構(gòu)成

首頁主要分為以下幾個部分：

博客頭部：網(wǎng)站名稱+個人主頁入口

博客左部：最新文章+最新文章列表+最新文章列表分頁

博客右部：熱度文章排行榜+最新評論排行榜

功能實現(xiàn)

服務(wù)器搭建

使用express框架搭建服務(wù)器，引入路由文件夾和靜態(tài)文件目錄

數(shù)據(jù)部分

使用mongoose搭建數(shù)據(jù)庫，mongoDB中間件新建數(shù)據(jù)，在頁面功能搭建完成后可以通過瀏覽器進行文章和評論的發(fā)表并同步到數(shù)據(jù)庫

個人主頁入口

在用戶點擊的時候，利用jwt進行登錄權(quán)限驗證，如果登錄狀態(tài)存在則跳轉(zhuǎn)至個人主頁，無則跳轉(zhuǎn)到登陸頁面

最新文章

此部分顯示最新發(fā)表文章的部分信息，即文章名稱、文章類別、文章發(fā)布時間和部分文章內(nèi)容，點擊按鈕即可跳轉(zhuǎn)到文章頁面瀏覽完整文章內(nèi)容

最新文章列表

利用MongoDB選擇性提取文章，并渲染在列表中，實現(xiàn)分頁功能

熱度文章

渲染點擊量最高的六篇文章，點擊文章標題可跳轉(zhuǎn)至對應(yīng)的文章頁面

最新評論

渲染最新的六條評論，每條評論綁定了對應(yīng)的文章id，點擊可跳轉(zhuǎn)至對應(yīng)的文章頁面

文章頁面

構(gòu)成

頁面頭部：網(wǎng)站名稱

頁面中部：文章的全部內(nèi)容以及對應(yīng)數(shù)據(jù)

頁面底部：提交評論區(qū)+評論區(qū)

功能實現(xiàn)

文章內(nèi)容

根據(jù)此時瀏覽器地址欄的地址中包含的query語句，獲取到id之后發(fā)起服務(wù)器的請求，服務(wù)器獲取id，然后根據(jù)id查詢數(shù)據(jù)庫，最后將這一篇文章的內(nèi)容發(fā)送到瀏覽器，瀏覽器在進行渲染即可。

評論部分

此部分需要實現(xiàn)添加評論和顯示評論。對于添加評論部分，當用戶輸入完評論內(nèi)容后點擊提交評論按鈕將內(nèi)容提交到服務(wù)器，服務(wù)器接受內(nèi)容并且調(diào)用評論集合的插入功能，將評論插入數(shù)據(jù)庫，插入成功之后給瀏覽器一個響應(yīng)，瀏覽器將響應(yīng)的內(nèi)容通過一個彈窗提示用戶。

登錄頁面

功能實現(xiàn)

在用戶登錄的時候，使用jwt生成一個token，在用于訪問添加文章頁面所有的接口邏輯的時候，使用jwt進行token的驗證。登陸成功后使用彈窗顯示登陸成功的通知，點擊確認后自動跳轉(zhuǎn)到個人主頁。在token存在時間內(nèi)再次從首頁進入個人時不需要重復(fù)登陸

個人主頁

構(gòu)成

主頁左部：添加文章按鈕+查看文章劉表按鈕，點擊不同按鈕渲染不同的主頁右部

主頁右部：默認處于查看文章列表對應(yīng)的渲染部分，點擊左部按鈕切換

功能實現(xiàn)

頁面切換功能

在之前的css中設(shè)置了一個class為active的樣式，內(nèi)部設(shè)置兩個css模塊的不同z-index值。在點擊按鈕時將active賦值給對應(yīng)css模塊，從而實現(xiàn)頁面切換功能

查看文章列表

點擊查看文章列表，將博主發(fā)表的所有文章渲染到頁面上，需要到數(shù)據(jù)庫去獲取數(shù)據(jù)并渲染，并對每個文章添加了刪除按鈕，當點擊這個button的時候，獲取data-index里邊的值，發(fā)起對/admin/deleteArticle接口的請求，并將id發(fā)送到服務(wù)器，服務(wù)器根據(jù)傳遞的id刪除數(shù)據(jù)庫中對應(yīng)的文章，最后返回刪除成功的結(jié)果給前端。

添加文章

點擊添加文章，進入發(fā)表文章頁面，填寫完文章后點擊提交即完成文章的發(fā)表。瀏覽器首先獲取文章數(shù)據(jù)后發(fā)起POST請求服務(wù)器接收到請求并且將數(shù)據(jù)保存在數(shù)據(jù)庫之后，給前端一個響應(yīng)。當請求成功之后，使用彈窗顯示成功的信息，并且將數(shù)據(jù)框中的值全部清空。

總結(jié)

以上是生活随笔為你收集整理的个人博客网站项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。