XBlog： Vue+Express+Mongodb的全棧可擴(kuò)展的完整博客系統(tǒng)

banana_pi 發(fā)布于2019-08-29 15:11 / 787人閱讀

摘要：注冊(cè)成功后會(huì)返回注冊(cè)用戶的此就是上面說(shuō)到的，用于用戶登陸的基礎(chǔ)，請(qǐng)保管好。

地址

https://github.com/billyhoomm...
http://blog.billyhu.com

說(shuō)明（Instructions）

本項(xiàng)目后臺(tái)基于express、mongodb，前臺(tái)基于Vue2.0全家桶、bootstrap、scss預(yù)編譯器以及一眾工具類插件

項(xiàng)目前后臺(tái)代碼在同一個(gè)目錄中，AFront中為前端代碼，build后會(huì)打包靜態(tài)文件到public文件夾中

鑒于云服務(wù)1M的小水管，項(xiàng)目中靜態(tài)文件以及圖片均使用七牛云CDN（擁有build自動(dòng)上傳功能）

項(xiàng)目結(jié)構(gòu)（Project structure）

|-AFront                //前端代碼
|----build                //webpack
|----config                //webpack基本配置
|----src                //包含api、所有vue組件、所有插件
|----index.html            //首頁(yè)的模板文件
|----package.json        
|-bin                      //啟動(dòng)文件
|-config                  //配置文件以及數(shù)據(jù)庫(kù)模型
|-controllers              //api路由請(qǐng)求控制
|-md                    //接口文檔
|-public                  //靜態(tài)資源文件
|-routes                  //路由
|-utils                  //通用工具類
|-views                  //模板文件（均為錯(cuò)誤頁(yè)面，首頁(yè)會(huì)轉(zhuǎn)向public/index.html）
|-app.js                //express
|-cache.js                //本地緩存控制  
|-package.json

頁(yè)面結(jié)構(gòu)（Page structure）

|----前臺(tái)展示---- 
|-首頁(yè)                  //個(gè)人信息和簡(jiǎn)單導(dǎo)航    
|-博客  
|-----最新文章             //最近10篇文章
|-----歸檔                //博文時(shí)間歸檔
|-----標(biāo)簽庫(kù)            //文章分類
|-音樂(lè)  
|-背景切換     
|-登錄            
|----后臺(tái)管理----
|-控制臺(tái)          //PV統(tǒng)計(jì)、訪問(wèn)地區(qū)統(tǒng)計(jì)、以及其他數(shù)據(jù)統(tǒng)計(jì)圖表    
|-我的資料        //個(gè)人信息管理 
|-標(biāo)簽管理      //標(biāo)簽增刪改查            
|-文章管理        //文章增刪改查（編輯使用markdown）
|-文章評(píng)論        //評(píng)論查詢、回復(fù)、審核等
|-退出
|---------------

前端（Front）

特點(diǎn)（Features）

全屏幕自適應(yīng)

背景圖片隨意配置和切換

...

插件（Plugins）

vue-moment（時(shí)間格式化）

moment.js(日期格式化)

font-awesome（字體圖標(biāo)）

vStorage.js（localStorage和sessionStorage管理）

bootstrap(sass版本，按需使用)

jquery(slim版本)

bootstrap-datetimepicker（日期選擇器）

vue-multiselect（多選下拉框組件）

dropzone.js（上傳插件）

fastclick.js（移動(dòng)端延遲問(wèn)題）

highlight.js（代碼高亮，用戶后臺(tái)文章編輯）

marked（markdown預(yù)覽）

clipboard（復(fù)制到剪貼板，上傳圖片獲得圖片訪問(wèn)地址）

js-md5（加密）

echarts（儀表盤圖表統(tǒng)計(jì)）

配置文件（Config）

前臺(tái)配置文件AFront/src/config，此處包含個(gè)人信息、所有api地址、靜態(tài)資源的CDN地址（音樂(lè)、圖片等）

url：api接口指向的地址，dev環(huán)境調(diào)試前端代碼時(shí)需要提前在后臺(tái)做好跨域

MY_INFO_ID：用來(lái)獲取個(gè)人信息的info_id（后面會(huì)詳細(xì)解釋用戶注冊(cè)接口的字段和規(guī)范）

MY：回復(fù)網(wǎng)友評(píng)論時(shí)的昵稱

EMAIL：回復(fù)網(wǎng)友評(píng)論時(shí)的郵箱

...

啟動(dòng)（Start）

cd AFront 
npm i
npm run dev #開(kāi)發(fā)環(huán)境 
npm run build #構(gòu)建

后端（Server）

全局配置（Config）

config/config.js:

配置中包含mongodb數(shù)據(jù)庫(kù)的連接配置和七牛云的文件上傳api需要的配置

關(guān)于七牛云的配置，可以自行去注冊(cè)七牛、申請(qǐng)空間（免費(fèi)的空間已經(jīng)夠用了），如果服務(wù)器是1M的小水管，靜態(tài)文件放CDN后訪問(wèn)速度還是相當(dāng)可以的

CDN自動(dòng)上傳配置

utils/cdn_sync.js

運(yùn)行?npm run cdnsync, 此處代碼會(huì)將public中的所有文件上傳到七牛云對(duì)應(yīng)的空間

TODO: 后續(xù)有時(shí)間會(huì)加上文件以及文件夾過(guò)濾功能，整合成webpack插件

啟動(dòng)（Start）

Nodejs(6.0.0+)/npm/Mongodb安裝(不會(huì)的自行g(shù)oogle)；

pm2（項(xiàng)目啟動(dòng)管理）

進(jìn)入config/config.js配置數(shù)據(jù)庫(kù)信息以及七牛云賬號(hào)設(shè)置

npm run start

注冊(cè)個(gè)人信息
注冊(cè)接口可以參考API文檔?md/api.md，可以使用Postman等模擬工具來(lái)進(jìn)行。

注冊(cè)成功后會(huì)返回注冊(cè)用戶的_id, 此 _id就是上面說(shuō)到的MY_INFO_ID，用于用戶登陸的基礎(chǔ)，請(qǐng)保管好。

參數(shù)（Post）：

url:/api/register
header:Content-Type   application/json; charset=utf-8
{
    "username": "登錄用戶名",
    "password": "密碼",
    "is_admin":true,    //是否是admin用戶
    "full_name":"昵稱",
    "position":"你的職位",
    "address":"你的地址",
    "motto":"你的心情",
    "personal_state":"你的自我介紹",
    "img_url":"http://你的頭像地址"
}

結(jié)果：

{
    "code": "1",
    "msg": "user added and login success!",
    "token": "XXXXXXXXXXXXXXXXXXXXXXXXXX",
    "data": {
        "username": "登錄用戶名",
        "password": "密碼",
        "is_admin":true,
        "full_name": "昵稱",
        "position": "你的職位",
        "address": "你的地址",
        "motto": "你的心情",
        "personal_state": "你的自我介紹",
        "img_url": "http://你的頭像地址",
        "_id": "用戶_id",
        "login_info": [
          {
            "login_time": "登錄時(shí)間",
            "login_ip":"登錄ip",
            "_id": "_id"
          }//該賬號(hào)登錄記錄
        ]
    }
}

登錄（使用上面注冊(cè)的用戶名和密碼）

7.如果有問(wèn)題的歡迎提issue或者在我博客留言或者郵件我

參考文檔

Vue2.0文檔

WebPack中文文檔

MongooseAPI參考手冊(cè)

Mongoose的Population連表操作

Express 4.x API手冊(cè)

Echarts

Markdown轉(zhuǎn)碼工具

代碼高亮工具

...