博客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)第三方認證登錄橄霉，可能會遇到接口請求慢的情況窃爷，可以通過翻墻軟件設(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)站迁央，都有詳細的說明哦滥崩！

需要看詳細文檔的 https://github.com/Aimee1608