牛牛圖牀
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
其他
- 項目前端使用localStorage保存七牛授權數據
- 部分資源庫採用CDN方式引入，由bootCDN提供
- 若有任何問題、反饋或者建議，請提交issue中。
- 歡迎fork及star，你的支持是我前進的動力。
PS：更多前端資訊、技術乾貨，請關注公衆號「前端新視界」，後臺回覆 “1” 獲取100本PDF前端電子書
回覆 “2” 獲取小編精選的Python編程電子書
