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

fizz 發布于2019-06-26 17:39 / 3330人閱讀

摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。

地址

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, 此處代碼會將public中的所有文件上傳到七牛云對應的空間

TODO: 后續有時間會加上文件以及文件夾過濾功能，整合成webpack插件

啟動（Start）

Nodejs(6.0.0+)/npm/Mongodb安裝(不會的自行google)；

pm2（項目啟動管理）

進入config/config.js配置數據庫信息以及七牛云賬號設置

npm run start

注冊個人信息
注冊接口可以參考API文檔?md/api.md，可以使用Postman等模擬工具來進行。

注冊成功后會返回注冊用戶的_id, 此 _id就是上面說到的MY_INFO_ID，用于用戶登陸的基礎，請保管好。

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

結果：

{
    "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轉碼工具

代碼高亮工具

...

GPU云服務器云服務器 Vue+Express 最快的全排列算法 html網頁的全選 mysql擴展開啟MongoDB

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19258.html

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

摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions）本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預編譯器以及一眾工具類插件項目前后臺代碼在同一個目錄中...

Salamander 2019-08-22 16:43 評論0 收藏0
XBlog： Vue+Express+Mongodb的全棧可擴展的完整博客系統

摘要：注冊成功后會返回注冊用戶的此就是上面說到的，用于用戶登陸的基礎，請保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 說明（Instructions）本項目后臺基于express、mongodb，前臺基于Vue2.0全家桶、bootstrap、scss預編譯器以及一眾工具類插件項目前后臺代碼在同一個目錄中...

banana_pi 2019-08-29 15:11 評論0 收藏0
react + node + express + ant + mongodb 的簡潔兼時尚的博客網站

摘要：前言此項目是用于構建博客網站的，由三部分組成，包含前臺展示管理后臺和后端。體驗地址網站主頁網站首頁管理后臺計劃這次是一個完整的全棧式開發，只要部署了這三個項目的代碼，是完全可以搭建好博客網站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言此項目是用于構建博客網站的，由三部分組成，包含前臺展示、管理...

fish 2019-06-26 17:54 評論0 收藏0
仿美團外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習

摘要：前端項目包含多個路由，涉及到文件有個，功能設計登錄，定位，瀏覽商品，加購物車，下訂單，支付支持微信和支付寶的掃碼支付和調起支付，評價，個人信息更改，是一個較為完整的項目。關于 2019屆大三學生，前段時間一直想一個人單獨開發一個較為完整的項目，在眾多應用中，考慮之后選擇了美團外賣來模仿，這段時間就利用課余時間進行開發，前端用vue+vuex+vue-router+axios，因為需要...

anRui 2019-06-26 17:38 評論0 收藏0
仿美團外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習

摘要：前端項目包含多個路由，涉及到文件有個，功能設計登錄，定位，瀏覽商品，加購物車，下訂單，支付支持微信和支付寶的掃碼支付和調起支付，評價，個人信息更改，是一個較為完整的項目。關于 2019屆大三學生，前段時間一直想一個人單獨開發一個較為完整的項目，在眾多應用中，考慮之后選擇了美團外賣來模仿，這段時間就利用課余時間進行開發，前端用vue+vuex+vue-router+axios，因為需要...

iflove 2019-08-22 16:09 評論0 收藏0