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

牛牛圖牀

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

項目地址：

源碼地址：https://github.com/alex1504/vue-qiniu-image-bed 在線地址：http://cowbed.huzerui.com

功能開發

• [x] 私人空間、公共空間切換
• [x] 控件上傳、拖拽本地圖片上傳、在線圖片URL上傳
• [x] 外鏈複製（markdown）
• [x] 圖片管理、預覽、下載、批量刪除
• [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，你的支持是我前進的動力。