富文本编辑器的使用：
对于富文本编辑器的使用，首先应该包含其对应的js代码，也需要将其相应的资源放置到webapp项目中，把它放置到建好的js目录中：
在需要使用富文本编辑器的jsp页面中添加对其引用：
查看，我们得到需要创建一个textarea标签，并初始化富文本编辑器：
可以看到其可见性为Hidden，并且也可以知道，此位置的id为desc，也就是说这个控件存在但是不可见，其次，一般的，在整个页面加载完毕之后，需要将富文本编辑器进行初始化，首先，我们找到页面加载完毕后立即执行的方法：
然后再对应的commons.js代码中找到对应的NESTYLES，以及对应的富文本编辑器所对应的初始化的create方法的定义的位置，需要一个控件来进行初始化：
可以看到，这里需要两个参数，一个是要传递要初始化的富文本编辑器的位置，从上图中可以看到其id为itemForm，之后还传递了定义的NEWSTYLS（NS）中的参数，其中定义了kingEditorParams参数，其包含了如下内容：
这样就可以将富文本编辑器进行初始化了。然而，考虑到最后我们需要提交的为form表单的形式，这就需要我们 在提交之前，需要将textarea和富文本编辑器中的内容进行同步，把相应的内容同步到textarea中就可以实现提交了。下面看下是如何同步的：
这样的话就可以实现同步的提交富文本编辑器中的内容了。
商品添加功能的实现：
页面中，图片上传已经实现了，选择类目也实现了，所以我们可以最后设计表单提交的功能了：
首先，分析一下，点击提交我们需要指定到提交的位置：在上面的图片中可以看到，我们提交时先做一个验证，提示如果有空置的项则提示需要填写完整，之后，获取的价格需要做一下转换，因为数据库中商品价格为分，所以在这里做一步转换，对商品价格的值做转换。然而在提交表单时，在EasyUI中全部都是Ajax请求：
post方法为JQuery的方法，“/item/save”为请求的url，此请求请求的内容为表单中的内容，后面的内容为将表单中的内容转换为key，value的格式，也就是序列化一定的格式的过程；响应的内容为自定义的内容，对于自定义，我们制定了一个自定义关于响应结果的pojo类--NestylesResult类：
/**
* newstyles自定义响应结构
*/
public class NewstylesResult {
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
// 响应业务状态
private Integer status;
// 响应消息
private String msg;
// 响应中的数据
private Object data;
public static NewstylesResult build(Integer status, String msg, Object data) {
return new NewstylesResult(status, msg, data);
}
public static NewstylesResult ok(Object data) {
return new NewstylesResult(data);
}
public static NewstylesResult ok() {
return new NewstylesResult(null);
}
public NewstylesResult() {
}
public static NewstylesResult build(Integer status, String msg) {
return new NewstylesResult(status, msg, null);
}
public NewstylesResult(Integer status, String msg, Object data) {
this.status = status;
this.msg = msg;
this.data = data;
}
public NewstylesResult(Object data) {
this.status = 200;
this.msg = "OK";
this.data = data;
}
// public Boolean isOK() {
// return this.status == 200;
// }
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
/**
* 将json结果集转化为TaotaoResult对象
*
* @param jsonData json数据
* @param clazz TaotaoResult中的object类型
* @return
*/
public static NewstylesResult formatToPojo(String jsonData, Class<?> clazz) {
try {
if (clazz == null) {
return MAPPER.readValue(jsonData, NewstylesResult.class);
}
JsonNode jsonNode = MAPPER.readTree(jsonData);
JsonNode data = jsonNode.get("data");
Object obj = null;
if (clazz != null) {
if (data.isObject()) {
obj = MAPPER.readValue(data.traverse(), clazz);
} else if (data.isTextual()) {
obj = MAPPER.readValue(data.asText(), clazz);
}
}
return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
} catch (Exception e) {
return null;
}
}
/**
* 没有object对象的转化
*
* @param json
* @return
*/
public static NewstylesResult format(String json) {
try {
return MAPPER.readValue(json, NewstylesResult.class);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* Object是集合转化
*
* @param jsonData json数据
* @param clazz 集合中的类型
* @return
*/
public static NewstylesResult formatToList(String jsonData, Class<?> clazz) {
try {
JsonNode jsonNode = MAPPER.readTree(jsonData);
JsonNode data = jsonNode.get("data");
Object obj = null;
if (data.isArray() && data.size() > 0) {
obj = MAPPER.readValue(data.traverse(),
MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
}
return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
} catch (Exception e) {
return null;
}
}
}
Dao层：
可以发现这个功能对应的数据库的操作为单表操作，所以，我们可以直接利用mybatis逆向工程生成的代码。
Service层：
接收一个商品的pojo，将这个pojo的内容先进行补全的操作，例如，时间，上架等，将这些数据写入到tb_item表中，操作完成后，返回NewstylesResult；
之后在ItemService接口中，定义createItem方法：
NewstylesResult createItem(TbItem item); public NewstylesResult createItem(TbItem item){
//将item补全
//1.生成商品id，可以使用uuid，不过在url中使用时，不美观
//可以使用IDUtils类生城
Long itemId = IDUtils.getItemId();
item.setId(itemId);
//设置商品的状态，1正常，2，下架，3，删除
item.setStatus((byte)1);
//商品的创建时间和更新时间
item.setCreated(new Date());
item.setUpdated(new Date());
//插入到数据库
itemMapper.insert(item);
return NewstylesResult.ok();
}
实现好了service层之后，接下来实现Controller层，在这里使用一个pojo来接收表单内容，要把内容放到pojo中，不过要注意的是，pojo的属性和表单中的内容要一致。调用service后返回NewstylesTesult类型的对象，返回的是一个json数据，这时候使用ResponseBody注解：
@RequestMapping(value ="item/save",method = RequestMethod.POST)
@ResponseBody
//修改createItem方法
private NewstylesResult createItem(TbItem item) throws Exception{
NewstylesResult result = itemService.createItem(item);
return result;
}
然而，我们仔细观察可以发下，在tb_item表的字段中，并没有商品描述对应的字段desc，但我们可以发现一张表记录了这个对于商品的描述，首先分析为什么要将这个表单独拿出来？这是因为，商品的描述大多数是文本量很大的，如果方到同一个表中，就要会出现问题，页面的响应的效率就会下降，如果将其单独拿出来，这样可以提高一定的响应时间，同时也能够减小数据库的压力。
那么我们如何在添加的其他表单信息的同时，还可以添加描述信息到tb_item_desc表中呢（假设存放商品描述的表为tb_item_desc）
从上面的分析可以得到，我们可以将富文本框得到的内容同步到textarea中，这样通过Ajax请求来实现更改，所以我们需要修改原来的service层：
public NewstylesResult createItem(TbItem item,String desc) throws Exception{
//将item补全
//1.生成商品id，可以使用uuid，不过在url中使用时，不美观
//可以使用IDUtils类生城
Long itemId = IDUtils.getItemId();
item.setId(itemId);
//设置商品的状态，1正常，2，下架，3，删除
item.setStatus((byte)1);
//商品的创建时间和更新时间
item.setCreated(new Date());
item.setUpdated(new Date());
//插入到数据库
itemMapper.insert(item);
//添加商品描述
NewstylesResult result = insertItemDesc(itemId, desc);
if(result.getStatus() != 200){
throw new Exception();
}
return NewstylesResult.ok();
}
private NewstylesResult insertItemDesc (long itemId,String desc){
TbItemDesc itemDesc = new TbItemDesc();
itemDesc.setItemId(itemId);
itemDesc.setItemDesc(desc);
itemDesc.setCreated(new Date());
itemDesc.setUpdated(new Date());
//插入到数据库
itemDescMapper.insert(itemDesc);
return NewstylesResult.ok();
}
这样，在createItem方法中调用这个关于商品描述的ItemDesc方法，并修改createItem方法的参数列表，使得其能够通过外键itemId进行关联，同时提交，这样再修改一下Controller层：
@RequestMapping(value ="item/save",method = RequestMethod.POST)
@ResponseBody
//修改createItem方法
private NewstylesResult createItem(TbItem item,String desc) throws Exception{
NewstylesResult result = itemService.createItem(item,desc);
return result;
}
可以看到，对应itemId的对应的商品描述，也添加到tb_item_desc中，这样商品添加的功能，也有了照片的上传的功能，也有了表单信息提交的功能，同时也能够同步的将商品的描述添加到对应的表格中，这样商品添加的功能暂时可以放一放了。
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
