淘淘商城第28讲——解决KindEditor上传图片浏览器兼容性问题

上文我们已实现了图片上传这个功能，但是还有一个问题，那就是对浏览器兼容性不够，因为Map类型的返回值在火狐浏览器中无法识别，如下图所示。

注意：以上火狐浏览器中添加图片的按钮没出来，即说明火狐浏览器中还没安装Adobe Flash Player插件，如何安装请读者自行百度。

我们都知道SpringMVC中的@ResponseBody注解是将对象转变为json再响应给客户端（即浏览器）。其实，@ResponseBody注解实际上是直接通过response对象来响应给浏览器的，响应的数据类型有很多种，而浏览器可以直接解析字符串，因此我们就可以直接把一个String类型的字符串响应给浏览器，这其实就相当于使用response对象的write方法往浏览器写字符串。

如果此时Controller返回的是一个Map集合类型的对象，又因为对象不能直接响应给浏览器，因此就需要把这个对象转成json串再响应。而如果Controller返回的就是一个String类型的字符串，那么就不用做转换了，直接响应给浏览器就行，因为浏览器可以直接解析字符串。

这样的话，为了解决这个兼容性问题，我们就需要修改下Controller中返回值的类型了，即将Map类型变为String类型（也就是json串），我们至少可以使用以下两种方案来解决。

使用fastjson来实现转换
使用已有的jackson来实现转换

先来看第一种解决方案，即使用fastjson来实现转换。首先，在taoao-common工程的pom文件中添加对fastjson的依赖，之所以把这个依赖放到taotao-common工程下是因为这样的转换操作可能在多个工程都用得着，因此把对fastjson的依赖放到taotao-common工程中更为合适。

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.25</version>
</dependency>

温馨提示：我们可以从中央仓库复制fastjson的依赖坐标，如上所示，版本有很多，我只是随便选了一个。

由于我们是在taotao-parent工程中统一定义maven依赖版本，因此我们便在taotao-parent工程的pom文件中添加如下图所示的内容。注意，这里只定义版本，不实际依赖。

然后，我们在taotao-common工程中添加对fastjson的实际依赖，如下图所示。

由于我们刚才修改了taotao-parent和taotao-common这两个工程，因此需要对这两个工程打下包，如何打包不用我说了吧，懂的自然懂。

我们的taotao-manager-web工程是依赖taotao-common工程的，因此它自动就会把fastjson给加到它的maven依赖当中了，接着我们便可以直接使用fastjson的功能了，如下图所示。

最后，我们重启taotao-manager和taotao-manager-web这两个工程，用火狐浏览器再次尝试上传图片，如下图所示，发现成功了。

接下来，再来讲第二种解决方案。我们知道SpringMVC的@ResponseBody注解是将对象转变为json传到前台展示，而帮我们做转换操作的便是jackson。那么我们怎样使用jackson来处理这个转换操作呢？

我们可以封装一个自定义工具类，例如JsonUtils.java，将其放到taotao-common工程下，如下图所示。

为了大家方便复制，下面将JsonUtils类的代码贴出。

package com.taotao.common.utils;import java.util.List;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;/*** 淘淘商城自定义响应结构*/
public class JsonUtils {// 定义jackson对象private static final ObjectMapper MAPPER = new ObjectMapper();/*** 将对象转换成json字符串。* <p>Title: pojoToJson</p>* <p>Description: </p>* @param data* @return*/public static String objectToJson(Object data) {try {String string = MAPPER.writeValueAsString(data);return string;} catch (JsonProcessingException e) {e.printStackTrace();}return null;}/*** 将json结果集转化为对象* * @param jsonData json数据* @param clazz 对象中的object类型* @return*/public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {try {T t = MAPPER.readValue(jsonData, beanType);return t;} catch (Exception e) {e.printStackTrace();}return null;}/*** 将json数据转换成pojo对象list* <p>Title: jsonToList</p>* <p>Description: </p>* @param jsonData* @param beanType* @return*/public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);try {List<T> list = MAPPER.readValue(jsonData, javaType);return list;} catch (Exception e) {e.printStackTrace();}return null;}}

温馨提示：由于taotao-common工程新添加了一个工具类，因此需要重新打下包。

下面使用JsonUtils工具类来做json转换，这样我们的PictureController类的代码就要改为如下图所示的样子了。

温馨提示：使用@ResponseBody注解返回Java对象时，Content-Type响应头的值默认为application/json;charset=UTF-8，而要解决浏览器兼容性问题，则需要返回字符串，并且Content-Type响应头的值要为text/plan;charset=UTF-8。

最后我们再重启taotao-manager和taotao-manager-web这两个工程，重启成功后，用火狐浏览器再次尝试上传图片，图片上传肯定会成功的，不信，你可以亲自测试一下。希望不要啪啪啪打我的脸。

淘淘商城第28讲——解决KindEditor上传图片浏览器兼容性问题相关推荐

(转）淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
http://blog.csdn.net/yerenyuan_pku/article/details/72808229 上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map ...
一条代码解决各种IE浏览器兼容性问题
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下 <!Doctype html> ...
Mac电脑安装win7系统，解决前端IE浏览器兼容性问题
1.下载Parallels Desktop Business Edition 2.下载迅雷 3.下载windows镜像 1.下载PD,直接上链接. PD下载链接 2.到这个网站上找windows的镜像 ...
一个淘淘商城项目送给你，愿你有一个灿烂的前程！
写在前面今天是2020年6月23日,星期二,天气晴.2020年已过一半,回想一下,这真是一个多灾多难的年份啊!可生活依然要继续,活着的人依然要继续前行.这是没道理的事情. 好了,回到主题,说说写这篇 ...
常见浏览器兼容性问题与解决方式
所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的 ...
（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
淘淘商城第69讲——安装ActiveMQ
准备工作新建一台虚拟机首先,新建一台虚拟机,而且最好设置为固定IP地址,别跟我说你不知道怎么做,要是你真不晓得,那么可以参考我下面的两篇文章. Linux入门第三讲--VMware Worksta ...
淘淘商城第8讲——向SVN服务器提交代码
回顾一下之前所新建的SVN仓库在上一讲中,我们一起学习了如何来安装SVN服务器并且新建了一个名称为taotao-javaee的空的仓库,如下图所示. 从上图中我们可以清楚地看到taotao-java ...

淘淘商城第28讲——解决KindEditor上传图片浏览器兼容性问题

淘淘商城第28讲——解决KindEditor上传图片浏览器兼容性问题相关推荐

最新文章

热门文章