图片服务器FastDFS上传(富文本,商品增删改查上下架)

1课程计划

1.图片上传

            a)  图片服务器FastDFS

            b)  图片上传功能实现

2.富文本编辑器的使用KindEditor

3.商品添加功能完成

2图片服务器的安装

搭建参考:图片服务器FastDFS上传(富文本,商品增删改查上下架)

1.存储空间可扩展。

2.提供一个统一的访问方式。

使用FastDFS,分布式文件系统。存储空间可以横向扩展,可以实现服务器的高可用。支持每个节点有备份机

2.1什么是FastDFS?

FastDFS是用c语言编写的一款开源的分布式文件系统。FastDFS为互联网量身定制,充分考虑了冗余备份、负载均衡、线性扩容等机制,并注重高可用、高性能等指标,使用FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。

2.2 FastDFS架构

FastDFS架构包括 Tracker server和Storage server。客户端请求Tracker server进行文件上传、下载,通过Tracker server调度最终由Storage server完成文件上传和下载。

       Tracker server作用是负载均衡和调度,通过Tracker server在文件上传时可以根据一些策略找到Storage server提供文件上传服务。可以将tracker称为追踪服务器或调度服务器。

       Storage server作用是文件存储,客户端上传的文件最终存储在Storage服务器上,Storage server没有实现自己的文件系统而是利用操作系统 的文件系统来管理文件。可以将storage称为存储服务器。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

服务端两个角色:

Tracker:管理集群,tracker也可以实现集群。每个tracker节点地位平等。

收集Storage集群的状态。

Storage:实际保存文件

Storage分为多个组,每个组之间保存的文件是不同的。每个组内部可以有多个成员,组成员内部保存的内容是一样的,组成员的地位是一致的,没有主从的概念。

2.3文件上传的流程

图片服务器FastDFS上传(富文本,商品增删改查上下架)

客户端上传文件后存储服务器将文件ID返回给客户端,此文件ID用于以后访问该文件的索引信息。文件索引信息包括:组名,虚拟磁盘路径,数据两级目录,文件名。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

  1. 组名:文件上传后所在的storage组名称,在文件上传成功后有storage服务器返回,需要客户端自行保存。
  2. 虚拟磁盘路径:storage配置的虚拟路径,与磁盘选项store_path*对应。如果配置了store_path0则是M00,如果配置了store_path1则是M01,以此类推。
  3. 数据两级目录:storage服务器在每个虚拟磁盘路径下创建的两级目录,用于存储数据文件。
  4. 文件名:与文件上传时不同。是由存储服务器根据特定信息生成,文件名包含:源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。

2.4文件下载

图片服务器FastDFS上传(富文本,商品增删改查上下架)

2.5最简单的FastDFS架构

图片服务器FastDFS上传(富文本,商品增删改查上下架)

3图片服务器安装方法

3.1安装步骤

第一步:把图片服务器解压缩。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

第二步:把图片服务器添加到Vmware中。

第三步:Vmware的网络配置。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

第四步:开机

图片服务器FastDFS上传(富文本,商品增删改查上下架)

移动:网络配置不发生变化。要使用图片服务器,需要保证网络配置不变。

复制:重新生成一块网卡mac地址是新地址。

Ip地址:192.168.25.133

用户名root、itcast

密码:itcast

Startx启动桌面

4图片服务器使用

4.1Java客户端:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

Maven环境:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

安装到本地仓库run as->maven install

复制 图片服务器FastDFS上传(富文本,商品增删改查上下架)到common工程pom文件

图片服务器FastDFS上传(富文本,商品增删改查上下架)

4.2上传图片

4.2.1上传步骤

  1. 加载配置文件,配置文件中的内容就是tracker服务的地址。

配置文件内容:tracker_server=192.168.25.133:22122

  1. 创建一个TrackerClient对象。直接new一个。
  2. 使用TrackerClient对象创建连接,获得一个TrackerServer对象。
  3. 创建一个StorageServer的引用,值为null
  4. 创建一个StorageClient对象,需要两个参数TrackerServer对象、StorageServer的引用
  5. 使用StorageClient对象上传图片。
  6. 返回数组。包含组名和图片的路径。

4.2.2代码

public class FastDFSTest {

 

      @Test

      public void testFileUpload() throws Exception {

           // 1、加载配置文件,配置文件中的内容就是tracker服务的地址。

           ClientGlobal.init("D:/workspaces-itcast/e3-manager-web/src/main/resources/resource/client.conf");

           // 2、创建一个TrackerClient对象。直接new一个。

           TrackerClient trackerClient = new TrackerClient();

           // 3、使用TrackerClient对象创建连接,获得一个TrackerServer对象。

           TrackerServer trackerServer = trackerClient.getConnection();

           // 4、创建一个StorageServer的引用,值为null

           StorageServer storageServer = null;

           // 5、创建一个StorageClient对象,需要两个参数TrackerServer对象、StorageServer的引用

           StorageClient storageClient = new StorageClient(trackerServer, storageServer);

           // 6、使用StorageClient对象上传图片。

           //扩展名不带“.”

           String[] strings = storageClient.upload_file("D:/Documents/Pictures/images/200811281555127886.jpg", "jpg", null);

           // 7、返回数组。包含组名和图片的路径。

           for (String string : strings) {

                 System.out.println(string);

           }

      }

}

4.3使用工具类上传

@Test

      public void testFastDfsClient() throws Exception {

           FastDFSClient fastDFSClient = new FastDFSClient("D:/workspaces-itcast/e3-manager-web/src/main/resources/resource/client.conf");

           String file = fastDFSClient.uploadFile("D:/Documents/Pictures/images/2f2eb938943d.jpg");

           System.out.println(file);

      }

5图片上传功能

5.1功能分析

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

使用的是KindEditor的多图片上传插件。

KindEditor 4.x 文档

http://kindeditor.net/doc.php

请求的url:/pic/upload

参数:MultiPartFile uploadFile

返回值:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

可以创建一个pojo对应返回值。可以使用map

 

业务逻辑:

1、接收页面传递的图片信息uploadFile

2、把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。

3、图片服务器返回图片的url

4、将图片的url补充完整,返回一个完整的url。

5、把返回结果封装到一个Map对象中返回。

 

1、需要把commons-io(common工程)、fileupload(web工程) 的jar包添加到工程中。

e3-manager-web工程:图片服务器FastDFS上传(富文本,商品增删改查上下架)

e3-common工程:图片服务器FastDFS上传(富文本,商品增删改查上下架)

2、在spring-mvc.xml下配置多媒体解析器。

<!-- 定义文件上传解析器 -->

      <bean id="multipartResolver"

           class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

           <!-- 设定默认编码 -->

           <property name="defaultEncoding" value="UTF-8"></property>

           <!-- 设定文件上传的最大值5MB,5*1024*1024 -->

           <property name="maxUploadSize" value="5242880"></property>

      </bean>

加入e3-manager-web配置文件:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

resource.properties:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

在spring-mvc.xml读取配置文件:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

client.conf:

配置文件在controller中读取

5.2Controller

@Controller

public class PictureController {

     

      @Value("${IMAGE_SERVER_URL}")

      private String IMAGE_SERVER_URL;

 

      @RequestMapping("/pic/upload")

      @ResponseBody

      public Map fileUpload(MultipartFile uploadFile) {

           try {

                 //1、取文件的扩展名

                 String originalFilename = uploadFile.getOriginalFilename();

                 String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);

                 //2、创建一个FastDFS的客户端  读取图片服务器配置文件

                 FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");

                 //3、执行上传处理

                 String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);

                 //4、拼接返回的urlip地址,拼装成完整的url

                 String url = IMAGE_SERVER_URL + path;

                 //5、返回map

                 Map result = new HashMap<>();

                 result.put("error", 0);

                 result.put("url", url);

                 return result;

           } catch (Exception e) {

                 e.printStackTrace();

                 //5、返回map

                 Map result = new HashMap<>();

                 result.put("error", 1);

                 result.put("message", "图片上传失败");

                 return result;

           }

      }

}

5.3解决浏览器兼容性的问题

KindEditor的图片上传插件,对浏览器兼容性不好。

使用@ResponseBody注解返回java对象,

Content-Type:application/json;charset=UTF-8

 

返回字符串时:

Content-Type:text/plan;charset=UTF-8

图片服务器FastDFS上传(富文本,商品增删改查上下架)

指定响应结果的content-type:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

6富文本编辑器的使用方法

6.1富文本编辑器介绍

图片服务器FastDFS上传(富文本,商品增删改查上下架)

KindEditor

http://kindeditor.net/

UEditor:百度编辑器

http://ueditor.baidu.com/website/

CKEditor

http://ckeditor.com/

纯js开发,跟后台语言没有关系。

6.2使用方法

第一步:在jsp中引入KindEditor的css和js代码。

第二步:在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

第三步:初始化富文本编辑器。使用官方提供的方法初始化。

图片服务器FastDFS上传(富文本,商品增删改查上下架)

common.js(富文本编辑器也需要上传):

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

第四步:取富文本编辑器的内容。

表单提交之前,把富文本编辑器的内容同步到textarea控件中。

item-add.jsp:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

7商品添加功能实现

7.1功能分析

请求的url:/item/save

参数:表单的数据。可以使用pojo接收表单的数据,要求pojo的属性和input的name属性要一致。

使用TbItem对象接收表单的数据。

TbItem item,String desc

返回值:

Json数据。应该包含一个status的属性。

可以使用E3Result,放到e3-common中。

 

业务逻辑:

  1. 生成商品id

实现方案:

     a)  aUuid,字符串,不推荐使用。

     b)  数值类型,不重复。日期+时间+随机数20160402151333123123

     c)  可以直接去毫秒值+随机数。可以使用。

     d)  使用redis。Incr。推荐使用。

使用IDUtils生成商品id

  1. 补全TbItem对象的属性
  2. 向商品表插入数据
  3. 创建一个TbItemDesc对象
  4. 补全TbItemDesc的属性
  5. 向商品描述表插入数据
  6. E3Result.ok()

7.2Dao层

向tb_item, tb_item_desc表中插入数据

可以使用****

7.3Service层

参数:TbItem item,String desc

业务逻辑:略,参加上面

返回值:E3Result

@Override

      public E3Result addItem(TbItem item, String desc) {

           // 1、生成商品id

           long itemId = IDUtils.genItemId();

           // 2、补全TbItem对象的属性

           item.setId(itemId);

           //商品状态,1-正常,2-下架,3-删除

           item.setStatus((byte) 1);

           Date date = new Date();

           item.setCreated(date);

           item.setUpdated(date);

           // 3、向商品表插入数据

           itemMapper.insert(item);

           // 4、创建一个TbItemDesc对象

           TbItemDesc itemDesc = new TbItemDesc();

           // 5、补全TbItemDesc的属性

           itemDesc.setItemId(itemId);

           itemDesc.setItemDesc(desc);

           itemDesc.setCreated(date);

           itemDesc.setUpdated(date);

           // 6、向商品描述表插入数据

           itemDescMapper.insert(itemDesc);

           // 7E3Result.ok()

           return E3Result.ok();

      }

发布服务

7.4表现层

引用服务

7.4.1Controller

请求的url:/item/save

参数:TbItem item,String desc

返回值:E3Result

@RequestMapping("/save")

      @ResponseBody

      public E3Result saveItem(TbItem item, String desc) {

           E3Result result = itemService.addItem(item, desc);

           return result;

      }

7.5作业

商品修改:

item-list:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

商品删除:

item-list:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

上架下架:

item-list:

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)

图片服务器FastDFS上传(富文本,商品增删改查上下架)