18.03.17，web学习第七十八天，day04，FastDFS、富文本编辑器、KindEditor

78.商城day04

1. 图片上传具备可扩容，高可用

1）FastDFS

   分布式文件系统

2）图片服务器的安装

   1.存储空间可扩展，

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

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

3）fstDfs使用c语言编写的一款开源的分布式文件系统、支持线性扩

   容、冗余备份、负载均衡。

4）Tracker：纤夫、追踪者....用来管理storage集群的

5）Storage群、tracker群

   组成员之间保持内容一致，组和组之间不一致。

   Tracker是服务器的入口。

 

6）FastDFS还提供了java开发jar包以实现客户端

7）最简单的FastDfS安装也得一天，没什么意义,掌握客户端怎么使用

   即可。

 

服务端两个角色：

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

收集Storage集群的状态。

Storage：实际保存文件

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

8）文件上传流程

 

 

9）文件下载流程

图片服务器FastDFS的搭建（抽出）

FastDFS客户端的使用步骤（抽出）

2. 结合工程进行图片上传

1）下图是个KindEditor，直接调用

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

KindEditor 4.x 文档

http://kindeditor.net/doc.php

 

 

2）返回的json数据格式？

 

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

3）开始开发

springMVC做图片上传需要jar包作为前提

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

2、配置多媒体解析器。

3、在springmvc.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>

 

4）创建ctroller层

@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、拼接返回的url和ip地址，拼装成完整的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）springmvc配置资源文件扫描

<!-- 加载配置文件 -->

<context:property-placeholder location="classpath:conf/resource.properties" />

 

6）测试 上传成功，但图片不显示！！！！

    浏览器不兼容

3. 解决图片上传浏览器兼容问题

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

2）这个responseBody相当于response.getWritter(*).write(*);

   但是返回值是一个对象的话，它的默认行为会把对象转为json再

   响应。如果直接返回String，就不转换了，浏览器能直接识别。

   那我返回map手工转为json吧。

 

指定响应结果的content-type：

 

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

3）那么那返回的contentType就是：text/plain,这样它就认为这是普

   通字符串而不是json

 

 

4）这个上传用的是flash插件，火狐的fireBUg是抓不到的，谷歌是

   可以抓到的。

4. 富文本编辑器

KindEditor

http://kindeditor.net/

UEditor：百度编辑器

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

CKEditor

http://ckeditor.com/

 

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

1）使用

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

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

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

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

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

 

 

语言包默认是中文

需要的textarea，填写的内容将会放到这个控件里提交。

引入js+配置一个textarea+这个创建的代码就可以了

 

2）如何让它随着表单一起提交到服务器

下图是提交表单时先同步编辑内容到元素中。

 

 

5. 添加商品案例

1）向商品表里添加数据时主键不是自增长咋办？

   方案一：毫秒加两位随机数

提供生成主键工具类：

 

2）接收表单数据使用pojo

****可以做增删改，单表查！！！

3）ctroller层限定为post请求

 

4）dubbo的服务默认调三次

请求的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()

 

1.1. Dao层

向tb_item, tb_item_desc表中插入数据

可以使用****

 

1.2. Service层

参数：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);
// 7、E3Result.ok()
return E3Result.ok();
}

发布服务

1.3. 表现层

引用服务

 

1.3.1. Controller

请求的url：/item/save

参数：TbItem item,String desc

返回值：E3Result

 

@RequestMapping(value="/item/save",method=RequestMethod.POST)
@ResponseBody
public E3Result saveItem(TbItem item, String desc) {
E3Result result = itemService.addItem(item, desc);
return result;
}

 

@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);
// 7、E3Result.ok()
return E3Result.ok();
}