基于七牛SDK构建的Vue单页图片管理应用
发布在yibuyisheng 的专栏2017年11月1日view:275Vue.jsvuevuex
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

牛牛图床

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

项目地址:

源码地址: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,你的支持是我前进的动力。
评论
发表评论
16小时前

web学习交流请与我联系

WRITTEN BY
Jerry丶卍
A passionate front-end developer. 个人主页:http:/huzerui.com
TA的新浪微博
PUBLISHED IN
yibuyisheng 的专栏

关于 web 技术的胡言乱语

我的收藏