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

oliverhuang 发布于2019-08-21 17:16 / 2167人阅读

摘要：牛牛图床脚手架构建的七牛图片管理图床单页应用基于，前后端分离。后端基于及七牛开发，服务原本部署在，由于服务响应速度慢的原因，已将服务部署在朋友的华为云服务器上。部分资源库采用方式引入，由提供若有任何问题反馈或者建议，请提交中。

牛牛图床

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

项目地址：

源码地址：https://github.com/alex1504/v...
在线地址：http://cowbed.huzerui.com

功能开发

[x] 私人空间、公共空间切换

[x] 控件上传、拖拽本地图片上传、在线图片URL上传

[x] 外链复制（markdown）

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

服务器托管混合云构建基于通讯的云服务器基于webrtc的sdk 基于lte-fi车载云主机的构建基于lte-fi车载云vps的构建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89340.html

2017-10-27 前端日报

摘要：前端日报精选装饰器场景实战配置之后端渲染理解同步异步和事件循环编写高性能注意点线性渐变实现虚线等简单实用图形中文服务端渲染开发指南个人文章系列之事件类型个人文章使用必记掘金简介掘金性能大乱斗前端杂谈中简单的数据图形化 2017-10-27 前端日报精选 JS 装饰器（Decorator）场景实战webpack配置之后端渲染JavaScript：理解同步、异步和事件循环编写高性能js注...

Jeffrrey 2019-08-21 17:18 评论0 收藏0
element 上传组件 el-upload 的经验总结

摘要：正文上传图片到七牛云这个需要前后端的配合才能实现，这里是官方的参考链接。参考链接组件的怎么获取进度值谷歌找到的其一谷歌找到的其二完前言最近在做后台管理项目，采用的 vue-element-admin ，上传图片是一个很常用的功能，也遇到了很多问题，刚好趁此机会做一些总结。初步总结下会提到的问题，目录如下： el-upload 自定义上传方法图片上传到七牛云图片压缩后再上传（...

Neilyo 2019-08-26 10:24 评论0 收藏0
用纯Javascript实现React Native的文件上传

摘要：是上传到服务器的文件名，是请求令牌。七牛云将持续发布服务于企业的云服务，也会在第一时间发布平台的，让使用的小伙伴在第一时间集成七牛云的最新服务。 React Native 是最近两年最值得花时间跟进的移动开发技术，这个项目始于2013年Facebook内部的一个黑客马拉松项目，在2014年7月之前这个项目都偏向于实验性质，直到广告管理团队想要构建一个独立的iOS应用，然而这个团队并没有...

JasonZhang 2019-08-19 18:12 评论0 收藏0
Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两年前...

Richard_Gao 2019-05-22 18:23 评论0 收藏0