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

最新推荐文章于 2024-12-20 08:24:42 发布

原创最新推荐文章于 2024-12-20 08:24:42 发布 · 654 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #七牛图床

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了基于Vue-cli脚手架构建的七牛图片管理图床单页应用。前后端分离，后端原部署在Heroku，现改至云服务器。项目具备私人与公共空间切换、多种上传方式等功能。前端采用Vue2等技术，后端用Express等框架，还介绍了本地预览等相关内容。

牛牛图床

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

项目地址：

源码地址：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