地點
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或許在我博客留言或許郵件我
