no-image

XBlog: Vue Express Mongodb的全棧可擴充套件的完整部落格系統

                                    

地址

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

說明(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)

全螢幕自適應

背景圖片隨意配置和切換

外掛(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地址(音樂、圖片等)

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:

配置中包含mongodb資料庫的連線配置和七牛雲的檔案上傳api需要的配置
關於七牛雲的配置,可以自行去註冊七牛、申請空間(免費的空間已經夠用了),如果伺服器是1M的小水管,靜態檔案放CDN後訪問速度還是相當可以的

CDN自動上傳配置

utils/cdn_sync.js

執行 npm run cdnsync

結果:

{
    "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"
          }//該賬號登入記錄
        ]
    }
}

登入(使用上面註冊的使用者名稱和密碼)

7.如果有問題的歡迎提issue或者在我部落格留言或者郵件我

參考文件

Vue2.0文件
WebPack中文文件
MongooseAPI參考手冊
Mongoose的Population連表操作
Express 4.x API手冊
Echarts
Markdown轉碼工具
程式碼高亮工具

關聯文章