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

晚風輕拂發表於2019-02-22
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，你的支援是我前進的動力。

相關文章