Fork me on GitHub

四.宜立方商城——图片服务器&副文本编辑框&商品添加功能

发表于

唉，昨天是花了时间花了钱，还没有回家，这国庆怕是回不去了，唉，学习吧！！！

一.课程计划：

1
2
3
4
5
1、图片上传
    a)图片服务器FastDFS(分布式文件系统)
    b)图片上传功能实现
2、富文本编辑器的使用KindEditor
3、商品添加功能完成

二.图片服务器安装须知：


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称为存储服务器。


image

服务端两个角色：

Tracker：管理集群，tracker也可以实现集群。每个tracker节点地位平等。
收集Storage集群的状态。

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

  2.3 文件上传的流程：



image

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

image

组名：文件上传后所在的storage组名称，在文件上传成功后有storage服务器返回，需要客户端自行保存。

虚拟磁盘路径：storage配置的虚拟路径，与磁盘选项store_path*对应。如果配置了store_path0则是M00，如果配置了store_path1则是M01，以此类推。

数据两级目录：storage服务器在每个虚拟磁盘路径下创建的两级目录，用于存储数据文件。

文件名：与文件上传时不同。是由存储服务器根据特定信息生成，文件名包含：源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。
###   2.4 文件下载：
image

  2.5 最简单的FastDFS架构：

image

三.图片服务器安装方法：

  安装步骤:

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

image

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

第三步：Vmware的网络配置。

image

因为我们在这里用的是别人搭建好的图片服务器，所以在这里网段要和别人的一样

第四步：开机

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

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

Ip地址：192.168.25.133

用户名root

密码：itcast

四.图片服务器的使用：

  4.1 Java客户端:

image

  4.2 上传图片:

     4.2.1 上传步骤:

  1. 加载配置文件，配置文件中的内容就是tracker服务的地址。
    配置文件内容：tracker_server=192.168.25.133:22122
  2. 创建一个TrackerClient对象。直接new一个。
  3. 使用TrackerClient对象创建连接，获得一个TrackerServer对象。
  4. 创建一个StorageServer的引用，值为null
  5. 创建一个StorageClient对象，需要两个参数TrackerServer对象、StorageServer的引用
  6. 使用StorageClient对象上传图片。
  7. 返回数组。包含组名和图片的路径。

     4.2.2 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
 * @author RickYinPeng
 * @ClassName FastDfsTest
 * @Description
 * @date 2018/10/5/13:37
 */
public class FastDfsTest {

    @Test
    public void testUpload() throws Exception{
        //创建一个配置文件，文件名任意。内容就是tracker服务器的地址
        //使用全局对象加载配置文件
        ClientGlobal.init("E:\\IdeaWorpace\\e_Store\\e3_manager_web\\src\\main\\resources\\conf\\client.conf");

        //创建TrackerClient对象
        TrackerClient trackerClient = new TrackerClient();
        //通过TrackerClient获得一个TrackerServer对象
        TrackerServer trackerServer = trackerClient.getConnection();
        //创建一个StorageServer的引用，可以是null
        StorageServer storageServer = null;
        //创建一个StorageCilent，参数需要TrackServer和StorageServer
        StorageClient storageClient = new StorageClient(trackerServer,storageServer);
        //使用StorageCilent上传文件
        String[] strings = storageClient.upload_file(
                "C:\\Users\\鹏哥\\Desktop\\照片\\韩花花\\QQ图片20171117214144.jpg",
                "jpg",
                null);
        for (String string: strings) {
            System.out.println(string);
        }
    }
}

效果：
image

以上是博主喜欢的人，嘻嘻（不过我们分手了，我很爱她）

  4.3 使用工具类上传:

image

工具类代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
public class FastDFSClient {

	private TrackerClient trackerClient = null;
	private TrackerServer trackerServer = null;
	private StorageServer storageServer = null;
	private StorageClient1 storageClient = null;
	
	public FastDFSClient(String conf) throws Exception {
		if (conf.contains("classpath:")) {
			conf = conf.replace("classpath:", this.getClass().getResource("/").getPath());
		}
		ClientGlobal.init(conf);
		trackerClient = new TrackerClient();
		trackerServer = trackerClient.getConnection();
		storageServer = null;
		storageClient = new StorageClient1(trackerServer, storageServer);
	}
	
	/**
	 * 上传文件方法
	 * <p>Title: uploadFile</p>
	 * <p>Description: </p>
	 * @param fileName 文件全路径
	 * @param extName 文件扩展名，不包含（.）
	 * @param metas 文件扩展信息
	 * @return
	 * @throws Exception
	 */
	public String uploadFile(String fileName, String extName, NameValuePair[] metas) throws Exception {
		String result = storageClient.upload_file1(fileName, extName, metas);
		return result;
	}
	
	public String uploadFile(String fileName) throws Exception {
		return uploadFile(fileName, null, null);
	}
	
	public String uploadFile(String fileName, String extName) throws Exception {
		return uploadFile(fileName, extName, null);
	}
	
	/**
	 * 上传文件方法
	 * <p>Title: uploadFile</p>
	 * <p>Description: </p>
	 * @param fileContent 文件的内容，字节数组
	 * @param extName 文件扩展名
	 * @param metas 文件扩展信息
	 * @return
	 * @throws Exception
	 */
	public String uploadFile(byte[] fileContent, String extName, NameValuePair[] metas) throws Exception {
		
		String result = storageClient.upload_file1(fileContent, extName, metas);
		return result;
	}
	
	public String uploadFile(byte[] fileContent) throws Exception {
		return uploadFile(fileContent, null, null);
	}
	
	public String uploadFile(byte[] fileContent, String extName) throws Exception {
		return uploadFile(fileContent, extName, null);
	}
}

使用工具类代码：

1
2
3
4
5
6
@Test
public void testFastDfsClient() throws Exception{
    FastDFSClient fastDFSClient = new FastDFSClient("E:\\IdeaWorpace\\e_Store\\e3_manager_web\\src\\main\\resources\\conf\\client.conf");
    String s = fastDFSClient.uploadFile("C:\\Users\\鹏哥\\Desktop\\照片\\韩花花\\韩花花mmexport1507127507770.jpg");
    System.out.println(s);
}

五.图片上传功能:

  5.1 功能分析

image

image

image

image

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

KindEditor 4.x 文档

http://kindeditor.net/doc.php

请求的url：/pic/upload

参数：MultiPartFile uploadFile

返回值：

image

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

1
2
3
4
5
6
业务逻辑：
1、接收页面传递的图片信息uploadFile
2、把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。
3、图片服务器返回图片的url
4、将图片的url补充完整，返回一个完整的url。
5、把返回结果封装到一个Map对象中返回。
  1. 需要把commons-io、fileupload 的jar包添加到工程中。
  2. 配置多媒体解析器。
1
2
3
4
5
6
7
8
<!-- 定义文件上传解析器 -->
	<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>

  5.2 Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * @author RickYinPeng
 * @ClassName PictureController
 * @Description 图片上传处理Controller
 * @date 2018/10/5/16:05
 */

@Controller
public class PictureController {

    @Value("${IMAGE_SERVER_URL}")
    private String IMAGE_SERVER_URL;

    @RequestMapping(value = "/pic/upload" ,produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
    @ResponseBody
    public String uploadFile(MultipartFile uploadFile){
        //把图片上传到图片服务器
        try {
            FastDFSClient fastDFSClient = new FastDFSClient("classpath:conf/client.conf");

            //得到一个图片的地址和文件名
            String originalFilename = uploadFile.getOriginalFilename();
            String extName = originalFilename.substring(originalFilename.indexOf(".")+1);
            String url = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
            //补充为完整的url
            url = IMAGE_SERVER_URL+url;
            //封装到map中返回
            Map result = new HashMap<Integer,String>();
            result.put("error",0);
            result.put("url",url);
            return JsonUtils.objectToJson(result);

        } catch (Exception e) {
            e.printStackTrace();
            Map result = new HashMap<Integer,String>();
            result.put("error",1);
            result.put("message","图片上传失败！！！");
            return JsonUtils.objectToJson(result);
        }
    }
}

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

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

使用@ResponseBody注解返回java对象，页面中的请求头部分为

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

返回字符串时：

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

image

指定响应结果的content-type：

image

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

image

六.富文本编辑器的使用方法

  6.1 富文本编辑器介绍

image

1
2
3
4
5
6
7
8
KindEditor
http://kindeditor.net/
UEditor：百度编辑器
http://ueditor.baidu.com/website/
CKEditor
http://ckeditor.com/

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

  6.2 使用方法：

1
2
3
4
5
第一步：在jsp中引入KindEditor的css和js代码。
第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。
第三步：初始化富文本编辑器。使用官方提供的方法初始化。
第四步：取富文本编辑器的内容。
表单提交之前，把富文本编辑器的内容同步到textarea控件中。

七.商品添加功能实现

  7.1功能分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
请求的url：/item/save
参数：表单的数据。可以使用pojo接收表单的数据，要求pojo的属性和input的name属性要一致。
使用TbItem对象接收表单的数据。
TbItem item,String desc
返回值：
Json数据。应该包含一个status的属性。
可以使用E3Result，放到e3-common中。

业务逻辑：
1、生成商品id
实现方案：
a)Uuid，字符串，不推荐使用。
b)数值类型，不重复。日期+时间+随机数20160402151333123123
c)可以直接去毫秒值+随机数。可以使用。
d)使用redis。Incr。推荐使用。
使用IDUtils生成商品id
2、补全TbItem对象的属性
3、向商品表插入数据
4、创建一个TbItemDesc对象
5、补全TbItemDesc的属性
6、向商品描述表插入数据
7、E3Result.ok()

  7.2Dao层

向tb_item, tb_item_desc表中插入数据

可以使用逆向工程

  7.3Service层

参数：TbItem item,String desc

业务逻辑：略，参加上面

返回值：E3Result

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@Override
   public E3Result addItem(TbItem tbItem, String desc) {
       //拿到的TbItem缺少ID，因为表单中的是cid，是商品的类目id，并不是商品的ID
       //所以我们需要先生成商品的ID

       //生成商品ID
       long itemId = IDUtils.genItemId();

       //补全TbItem的属性
       tbItem.setId(itemId);
       //商品状态，1-正常，2-下架，3-删除
       tbItem.setStatus((byte)1);
       //创建时间
       tbItem.setCreated(new Date());
       //更新时间
       tbItem.setUpdated(new Date());

       //向商品表插入数据
       tbItemMapper.insert(tbItem);

       //创建商品描述表对应的pojo对象
       TbItemDesc itemDesc = new TbItemDesc();
       itemDesc.setItemId(itemId);
       itemDesc.setItemDesc(desc);
       itemDesc.setCreated(new Date());
       itemDesc.setUpdated(new Date());

       //向商品描述表插入数据
       tbItemDescMapper.insert(itemDesc);

       //返回成功

    return E3Result.ok();
   }

发布服务

  7.4 表现层

引用服务

  7.4.1 Controller

请求的url：/item/save

参数：TbItem item,String desc

返回值：E3Result

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 商品添加功能
 * @param tbItem
 * @param desc
 * @return
 */
@RequestMapping(value = "/item/save",method = RequestMethod.POST)
@ResponseBody
public E3Result addItem(TbItem tbItem,String desc){
    E3Result e3Result = itemService.addItem(tbItem, desc);
    return e3Result;
}