基於七牛SDK構建的Vue單頁圖片管理應用

牛牛圖牀

Vue-cli腳手架構建的七牛圖片管理圖牀單頁應用（基於museui），先後端分離。後端基於express及七牛nodejs-SDK開發，服務本來部署在Heroku，因爲服務響應速度慢的緣由，已將服務部署在朋友的華爲雲服務器上。

項目地址：

源碼地址：https://github.com/alex1504/v...
在線地址：http://cowbed.huzerui.com

功能開發

• [x] 私人空間、公共空間切換
• [x] 控件上傳、拖拽本地圖片上傳、在線圖片URL上傳
• [x] 外鏈複製（markdown）
• [x] 圖片管理、預覽、下載、批量刪除
• [ ] 圖片分日期管理
• [ ] 圖片重命名

技術棧

前端：

• Vue2：Vue2.0漸進式MVVM框架
• Vuex：實現不一樣組件之間的狀態共享
• Vue-router：單頁應用路由管理插件
• Axios：Http請求工具
• SASS(SCSS)：css預處理語言
• Webpack：自動化構建工具
• Localstorage：本地存儲

後端：

• Express：簡潔而靈活的 node.js Web應用框架
• cors（中間件）：跨域資源共享
• body-parse（中間件）：對請求體進行解析
• formidable（中間件）：解析表單數據（form-data）的Node.js模塊
• nodemon：監聽修改自動重啓node服務插件

主要語法：

• 前端ES6，後端ES5（部分開發時間是在公司，因爲某些緣由沒法使用高版本node）

本地預覽

git clone https://github.com/alex1504/vue-qiniu-image-bed.git
cd https://github.com/alex1504/vue-qiniu-image-bed.git
// 安裝前端依賴
npm install
cd server
// 安裝後端依賴
npm install
cd ../
npm run dev
// 開啓另外一個git進程
npm run server

其餘

1. 項目前端使用localStorage保存你的七牛受權鑰匙，並不會保存你的受權數據到數據庫。
2. 部分資源庫採用CDN方式引入，由bootCDN提供
3. 如有任何問題、反饋或者建議，請提交issue中。
4. 歡迎fork及star，你的支持是我前進的動力。