node-blog用 Node 搭建的個人開源博客

這個項目是為了學(xué)習(xí) node 而建的，從前端到后端一手包辦。相對來說，還是有一定難度的，適合有一定編程基礎(chǔ)的人進(jìn)階學(xué)習(xí)。

如果有問題，歡迎提 issues

注意，本項目的前后端代碼都是放在一起的，前端代碼放在 src 目錄，后端代碼放在 server 目錄。

在線預(yù)覽

由于服務(wù)器網(wǎng)速原因，加載時間較久

相關(guān)文檔

• 多個請求下 loading 的展示與關(guān)閉
• Vue 實現(xiàn)前進(jìn)刷新，后退不刷新的效果
• Vue 頁面權(quán)限控制和登陸驗證
• 用 node 搭建個人博客（一）：代碼熱更新
• 用 node 搭建個人博客（二）：導(dǎo)出模塊同時兼容 import 和 require
• 用 node 搭建個人博客（三）：token
• 用 node 搭建個人博客（四）：評論功能
• 用 node 搭建個人博客（五）：數(shù)據(jù)庫
• 阿里云服務(wù)器部署個人網(wǎng)站
• 性能優(yōu)化--開啟 gzip 壓縮

前端頁面

• 首頁(index)

  包含內(nèi)容及標(biāo)簽子頁面

• 編輯(editor)

• 登陸(login)

• 管理(manage)

使用的庫、框架

前端

• vue
• vue-router
• vuex
• vue-markdown
• iview
• axios

后端

• node
• express
• jsonwebtoken

數(shù)據(jù)庫

• mongodb

測試

• mocha

使用

注意

1. 登陸入口在頁面腳部的 Copyright ?2019 woai3c
2. 博客內(nèi)容、評論使用的都是 markdown 語法

需要先下載 mongodb，建議按照windows 安裝教程一步步安裝。

• mongodb 教程一
• mongodb 教程二

在安裝完 mongodb 后，克隆項目。

git clone https://github.com/woai3c/node-blog.git

在運(yùn)行前還得進(jìn)行一些準(zhǔn)備工作：

因為沒有注冊功能，所以在使用前需要先把用戶信息添加到數(shù)據(jù)庫。

打開 mongod.exe，再打開 mongo.exe，在 mongo.exe 打開的命令行進(jìn)行如下操作：

創(chuàng)建數(shù)據(jù)庫

use blog

創(chuàng)建 user 集合，用來保存用戶信息

db.createCollection('user')

添加用戶信息

db.user.insert({
    user: 'admin', // 用戶名 隨意填寫
    password: 'admin', // 密碼 隨意填寫
    visits: 0, // 博客訪問次數(shù) 每次刷新網(wǎng)站 自增1
    token: '', // 用戶登錄創(chuàng)建 token 后，保存在這
})

接下來就可以開始運(yùn)行項目了。

安裝依賴

npm i

開發(fā)環(huán)境（前端代碼熱更新，修改完即可查看效果，后端代碼修改完需要重啟服務(wù)）

npm run dev

生產(chǎn)環(huán)境 （打包并開啟服務(wù)，打包過程有點長，需要等待）

npm run build

測試

npm run test

訪問地址

http://localhost:8080/