XBlog： Vue+Express+Mongodb的全棧可擴展的完整博客系統

時間 2019-11-15

標籤 xblog vue+express+mongodb vue express mongodb 可擴展完整博客系統欄目 MongoDB 简体版

原文原文鏈接

地址

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

說明（Instructions）

本項目後臺基於express、mongodb，前臺基於Vue2.0全家桶、bootstrap、scss預編譯器以及一衆工具類插件
項目先後臺代碼在同一個目錄中，AFront中爲前端代碼，build後會打包靜態文件到public文件夾中
鑑於雲服務1M的小水管，項目中靜態文件以及圖片均使用七牛雲CDN（擁有build自動上傳功能）

項目結構（Project structure）

|-AFront                //前端代碼
|----build                //webpack
|----config                //webpack基本配置
|----src                //包含api、全部vue組件、全部插件
|----index.html            //首頁的模板文件
|----package.json        
|-bin                      //啓動文件
|-config                  //配置文件以及數據庫模型
|-controllers              //api路由請求控制
|-md                    //接口文檔
|-public                  //靜態資源文件
|-routes                  //路由
|-utils                  //通用工具類
|-views                  //模板文件（均爲錯誤頁面，首頁會轉向public/index.html）
|-app.js                //express
|-cache.js                //本地緩存控制  
|-package.json

頁面結構（Page structure）

|----前臺展現---- 
|-首頁                  //我的信息和簡單導航    
|-博客  
|-----最新文章             //最近10篇文章
|-----歸檔                //博文時間歸檔
|-----標籤庫            //文章分類
|-音樂  
|-背景切換     
|-登陸            
|----後臺管理----
|-控制檯          //PV統計、訪問地區統計、以及其餘數據統計圖表    
|-個人資料        //我的信息管理 
|-標籤管理      //標籤增刪改查            
|-文章管理        //文章增刪改查（編輯使用markdown）
|-文章評論        //評論查詢、回覆、審覈等
|-退出
|---------------

前端（Front）

特色（Features）

全屏幕自適應html

背景圖片隨意配置和切換前端

...vue

插件（Plugins）

vue-moment（時間格式化）
moment.js(日期格式化)
font-awesome（字體圖標）
vStorage.js（localStorage和sessionStorage管理）
bootstrap(sass版本，按需使用)
jquery(slim版本)
bootstrap-datetimepicker（日期選擇器）
vue-multiselect（多選下拉框組件）
dropzone.js（上傳插件）
fastclick.js（移動端延遲問題）
highlight.js（代碼高亮，用戶後臺文章編輯）
marked（markdown預覽）
clipboard（複製到剪貼板，上傳圖片得到圖片訪問地址）
js-md5（加密）
echarts（儀表盤圖表統計）

配置文件（Config）

前臺配置文件AFront/src/config，此處包含我的信息、全部api地址、靜態資源的CDN地址（音樂、圖片等）node

url：api接口指向的地址，dev環境調試前端代碼時須要提早在後臺作好跨域
MY_INFO_ID：用來獲取我的信息的info_id（後面會詳細解釋用戶註冊接口的字段和規範）
MY：回覆網友評論時的暱稱
EMAIL：回覆網友評論時的郵箱
...

啓動（Start）

cd AFront 
npm i
npm run dev #開發環境 
npm run build #構建

後端（Server）

全局配置（Config）

config/config.js:jquery

配置中包含mongodb數據庫的鏈接配置和七牛雲的文件上傳api須要的配置
關於七牛雲的配置，能夠自行去註冊七牛、申請空間（免費的空間已經夠用了），若是服務器是1M的小水管，靜態文件放CDN後訪問速度仍是至關能夠的

CDN自動上傳配置

utils/cdn_sync.jswebpack

運行 npm run cdnsync, 此處代碼會將public中的全部文件上傳到七牛雲對應的空間
TODO: 後續有時間會加上文件以及文件夾過濾功能，整合成webpack插件

啓動（Start）

Nodejs(6.0.0+)/npm/Mongodb安裝(不會的自行google)；
pm2（項目啓動管理）
進入config/config.js配置數據庫信息以及七牛雲帳號設置
npm run start

註冊我的信息
註冊接口能夠參考API文檔 md/api.md，可使用Postman等模擬工具來進行。git

註冊成功後會返回註冊用戶的_id, 此 _id就是上面說到的MY_INFO_ID，用於用戶登錄的基礎，請保管好。

參數（Post）：github

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://你的頭像地址"
}

結果：web

{
    "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": "登陸時間",
            "login_ip":"登陸ip",
            "_id": "_id"
          }//該帳號登陸記錄
        ]
    }
}