程序员必看：Spring Boot+Vue.js+FastDFS实现分布式图片服务器！( 四 ) _程序员

在fastDFS入门程序上继续开发：
1）创建模型

文章插图

文章插图

2）创建controller

文章插图

3)创建application.yml

文章插图

4）创建spring boot启动类

文章插图

4.3.3 管理系统前端
管理员通过管理系统前端上传文件、查询文件、删除文件等操作。
管理系统前端与文件管理服务器通过http交互，这当前流行的前后端分离的架构。
管理系统前端采用当前浏览器的vue.js前端框架实现。
1、创建前端工程
使用webstorm创建前端工程
工程需要导入vue.js及element-ui

文章插图

2、创建upload.html
该文件实现文件上传及预览
1）导入js及 css

文章插图

2)创建vue实例

文章插图

3）添加element-ui的文件上传组件

文章插图

定义数据对象及方法：

文章插图

文章插图

4）配置 nginx虚拟目录

文章插图

5）测试

文章插图

4.3.4 课程图片浏览
网友（学习者）输入www.itcast.cn网址进入免费视频下载页面，浏览器根据页面上的图片地址请求图片服务代理，由代理将请求转发到fastDFS storage server上，最终在浏览器看到图片。
上章节实现图片上传后已经实现图片的预览，本功能实现略。
5 总结通过本次课程的学习您要达到以下目标：
1）了解分布式文件系统的概念及应用场景
分布式文件系统是通过网络将单机上的文件系统组成一个网络文件系统。
分布式文件系统主要应用在大型互联网项目中，实现图片存储、音视频存储等服务。
分布式文件系统的优点：可以快速扩容存储，提高文件访问速度。
2）理解fastDFS的工作原理
fastDFS由tracker和storage组成，它们都可以部署集群。
tracker负责调度，storage负责存储。
3）掌握fastDFS存取文件方法
客户端与fastDFS采用socket协议通信，可以采用官方提供的java版本的fastDSF-client快速开发。
4）能够动手搭建一个fastDSF文件服务器