基于七牛SDK构建的Vue单页图片管理应用

牛牛图床

Vue-cli脚手架构建的七牛图片管理图床单页应用（基于museui），前后端分离。后端基于express及七牛nodejs-SDK开发，服务原本部署在Heroku，由于服务响应速度慢的原因，已将服务部署在云服务器上。

项目地址：

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

功能开发

• 私人空间、公共空间切换
• 控件上传、拖拽本地图片上传、在线图片URL上传
• 外链复制（markdown）
• 图片管理、预览、下载、批量删除
• 图片广场，分享图片到广场
• 图片分日期管理
• 图片重命名
• 音频、视频资源管理

技术栈

前端：

• 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，你的支持是我前进的动力。

PS：更多前端资讯、技术干货，请关注公众号「前端新视界」，后台回复 “1” 获取100本PDF前端电子书
回复 “2” 获取小编精选的Python编程电子书