博客2.0更新啦！

博客地址：mangoya.cn

整體樣式基本沒有變化，主要變化是前后端重構(gòu)，之前的1.0版本后端為php，并非博主所開發(fā)，這次重構(gòu)調(diào)整了數(shù)據(jù)結(jié)構(gòu)和所熟悉的語言，采用koa2+mongodb。

廢話不多說，下面介紹博客的搭建教程和思路。

技術(shù)棧：

• 博客主頁：vue2
• 管理后臺：vue3
• 后端：koa2+mongodb

博客主要功能：

• 文章：列表、分類、詳情、點贊、收藏、評論
• 用戶中心：登錄/注冊、收藏列表、點贊列表、設(shè)置友鏈
• 其他：靜態(tài)信息展示、留言板、點贊、最受歡迎文章排行榜、友鏈

前端模塊拆分：

博客主頁主要為展示信息和用戶留言等信息模塊，其中評論和留言板可以復(fù)用一個組件，首頁列表和點贊收藏列表也可以復(fù)用一個的組件，頁面整體為頭部、左側(cè) 和右側(cè)，其中只有左側(cè)內(nèi)容為頁面切換內(nèi)容，頭部和右側(cè)則固定不變。

管理后臺包含文章、分類、標(biāo)簽、用戶、留言等管理功能。

后端數(shù)據(jù)文檔劃分：

• 文章
• 文章分類
• 文章標(biāo)簽
• 留言
• 點贊
• 收藏
• 瀏覽
• 網(wǎng)站點贊
• 用戶
• 資源

主要功能點介紹：

用戶登錄注冊：
使用github oauth 實現(xiàn)第三方認(rèn)證登錄，可能會遇到接口請求慢的情況，可以通過翻墻軟件設(shè)置代理訪問。

瀏覽量：
由時間戳+ua+隨機數(shù) 加密生成log_id設(shè)置2個小時有效期的cookie，訪問頁面詳情時，通過log_id和文章id去重存儲瀏覽表。

留言和評論：
留言關(guān)于我等設(shè)置為固定的留言文章id，和文章一樣存儲用戶信息，并添加回復(fù)的父級id存儲，查詢時遞歸獲取并返回數(shù)據(jù)。

收藏和點贊：
分別存儲收藏表和點贊表，包含用戶id/文章id。

資源：
使用koa-body 實現(xiàn)文件上傳功能，將資源保存在某個目錄，并設(shè)置對應(yīng)的url，存資源列表。

源碼：

博客前端：https://github.com/Aimee1608/myblog2.0
管理后臺：https://github.com/Aimee1608/myblog2.0-admin
服務(wù)端：https://github.com/Aimee1608/myblog2.0-server

版本要求：

• node>=12
• koa2
• mongodb4
• vue2.0/3.0

安裝mongodb后，啟動服務(wù)，即可運行。

歡迎點贊和評論~

博客1.0

為何選擇vue.js搭建博客

為什么會選擇使用vue.js框架搭建博客呢？原因有多個。作為前后端分離的多數(shù)據(jù)綁定項目，首選的就是mvc 以及mvvm等框架，也就是主流的react 和vue；在使用vue.js框架快速完成美食網(wǎng)站后，更加離不開這個框架了，簡單方便，易于管理和后期的維護。

個人博客框架

image.png

如圖所示，頁面整體可分為幾大主模塊，有首頁、分類、實驗室、贊賞、伙伴、留言板、關(guān)于、登錄注冊、用戶個人中心，這些主模塊通過路由跳轉(zhuǎn)切換；然后還有幾個公共模塊，如頭部和尾部，以及其他的一些公用模塊，這些子模塊嵌套在主模塊中，用于公用樣式和公用功能的實現(xiàn)。

image.png

image.png

項目基于node.js npm 安裝vue-cli 腳手架后 的目錄結(jié)構(gòu)，如下圖，根據(jù)項目的需求選擇性的安裝依賴和插件

image.png

搭建博客所安裝的插件和依賴，如下圖，我使用了 element-ui組件來開發(fā)樣式，還有vue-resource和vue-router 以及css-loader等樣式加載依賴，安裝成功后，在webpack.config.js上寫上相應(yīng)的配置

image.png

得在上圖中的routes完成主路由模塊的配置，并且export出來，這里需要注意的是，可以通過component: resolve 來設(shè)置懶加載，對于帶寬為1M的服務(wù)器來說，這點非常重要，不然打開頁面需要好幾分鐘，還需要在webpack.config.js中注釋掉 devtool: '#eval-source-map'，這個是項目webpack打包的時候設(shè)置的參數(shù)，使用webpack -p 這個命令打包，即為壓縮打包，打包的文件更小，除去不需要的注釋

接著是入口文件文件的配置，根據(jù)自己的需求，引入對應(yīng)的模塊和路由等文件

image.png

運行項目

使用命令窗口，cd到當(dāng)前目錄，使用npm run dev ，就可以打開運行項目，編輯項目保存的同時，頁面會自動更新，即為實時監(jiān)控。

模塊化開發(fā)

之所以使用vue.js來開發(fā)博客項目，其中看中的一點就是模塊化開發(fā)，就以打開頁面的首頁為例，如上面的結(jié)構(gòu)介紹圖，我分別使用了頭部、尾部、右側(cè)、文章列表這四個子模塊組成，就如下圖所示

image.png

子模塊的結(jié)構(gòu)和主模塊一樣，如果子模塊中還需嵌套子模塊，同上面一樣

image.png

按照上面的步驟根據(jù)自己的需求添加自己的模塊，整個博客網(wǎng)站就搭建完成啦，是不是很簡單呢！如果需要了解vue.js具體的api 和element-ui組件的用法，可以訪問官方網(wǎng)站，都有詳細(xì)的說明哦！

需要看詳細(xì)文檔的 https://github.com/Aimee1608