怎么在jsp页面的form表单中加入富文本编辑器？？？并传递数据到后台进行保存
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么在jsp页面的form表单中加入富文本编辑器？？？并传递数据到后台进行保存相关的知识，希望对你有一定的参考价值。
如题。用的ueditor富文本编辑器
参考技术A 一般都是引入富文本的框架，框架会给你处理好。 参考技术B 富文本编辑器框架有封装过的方法,你只需要看他的api进行掉调用即可,参看百度ueditor淘淘商城---8.10
希望大家能尽量跟上。自己动手去实现，说实话我觉得我写的还是比较详细的，每步都写到了，有问题可以赶快给我留言，到后面没时间帮你去整理前面稀碎的知识点了。昨天最后我记得是完成了图片上传吧，那今天继续开始。
1、富文本编辑器
1.1、位置
1.2、使用方法
第一步：在jsp中加入富文本编辑器js的引用
第二步：在富文本编辑器出现的位置添加一个input 类型为textarea
第三步：调用js方法初始化富文本编辑器。
第四步：提交表单时，调用富文本编辑器的同步方法sync，把富文本编辑器中的内容同步到textarea中。
2、商品添加实现
要添加商品，要将表单里面的数据提交到后台，再存入数据库的过程。
2.1、功能分析
1、请求的url：/item/save
2、参数：表单中的内容，$("#itemAddForm").serialize()序列化成key-value形式的字符串。做的是Post请求。
3、响应的内容：可以自定义，这里用已经封装好的TaotaoResult，内容如下。
代码一
package com.taotao.common.pojo;
import java.util.List;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
*
* @ClassName: TaotaoResult
* @Description: TODO(淘淘商城自定义响应结构)
* @author 汪本成
* @date 2016年8月10日 上午2:19:33
*
*/
public class TaotaoResult
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
// 响应业务状态
private Integer status;
// 响应消息
private String msg;
// 响应中的数据
private Object data;
public static TaotaoResult build(Integer status, String msg, Object data)
return new TaotaoResult(status, msg, data);
public static TaotaoResult ok(Object data)
return new TaotaoResult(data);
public static TaotaoResult ok()
return new TaotaoResult(null);
public TaotaoResult()
public static TaotaoResult build(Integer status, String msg)
return new TaotaoResult(status, msg, null);
public TaotaoResult(Integer status, String msg, Object data)
this.status = status;
this.msg = msg;
this.data = data;
public TaotaoResult(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 TaotaoResult formatToPojo(String jsonData, Class<?> clazz)
try
if (clazz == null)
return MAPPER.readValue(jsonData, TaotaoResult.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 TaotaoResult format(String json)
try
return MAPPER.readValue(json, TaotaoResult.class);
catch (Exception e)
e.printStackTrace();
return null;
/**
* Object是集合转化
*
* @param jsonData json数据
* @param clazz 集合中的类型
* @return
*/
public static TaotaoResult 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;
2.2、Dao层
接受表单内容，将商品信息插入到商品表，单表操作，于是可以使用逆向工程生成的代码，这里就不多说了。
2.3、Service层
接受商品的pojo，把商品的pojo的内容补全。然后把商品数据写入到表tb_item中，返回TaotaoResult中。
商品的pojo用逆向工程生成的，TaotaoResult上一步我已经写好，这两个在这里都不需要创建。
tb_item表中的内容：
这里我们要写的是后台表单中没有的内容，在提交上去。
分析可知，没有商品的id，这里我就要考虑自己去生成自己的商品id。到这步你看过我前面开发的过程应该注意的到我在之前写的IDUtils工具类里就写了方法随机生成商品id的方法。没有商品的status（商品状态，1-正常，2-下架，3-删除），和创建时间和更新时间，详情可以参考上面的图片。
代码二
package com.taotao.service.impl;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.taotao.common.pojo.EUDataGridResult;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.common.utils.IDUtils;
import com.taotao.mapper.TbItemMapper;
import com.taotao.pojo.TbItem;
import com.taotao.pojo.TbItemExample;
import com.taotao.pojo.TbItemExample.Criteria;
import com.taotao.service.ItemService;
/**
*
* @ClassName: ItemServiceImpl
* @Description: TODO(商品管理的ItemService)
* @author 汪本成
* @date 2016年8月10日 下午12:02:10
*
*/
@Service
public class ItemServiceImpl implements ItemService
@Autowired
private TbItemMapper itemMapper;
/**
* 根据条件查询商品信息
*/
@Override
public TbItem getItemById(long itemId)
// TODO Auto-generated method stub
/** 1、根据主键查询 **/
//TbItem item = itemMapper.selectByPrimaryKey(itemId);
/** 2、根据条件进行查询 **/
//添加查询条件
TbItemExample example = new TbItemExample();
Criteria criteria = example.createCriteria();
criteria.andIdEqualTo(itemId);
//返回查询结果到List中
List<TbItem> list = itemMapper.selectByExample(example);
//进行判断
if(null != list && list.size() > 0)
TbItem item = list.get(0);
return item;
return null;
/**
* 商品列表查询
*/
@Override
public EUDataGridResult getItemList(int page, int rows)
//查询商品列表
TbItemExample example = new TbItemExample();
//分页处理
PageHelper.startPage(page, rows);
//取出商品列表
List<TbItem> list = itemMapper.selectByExample(example);
//创建一个返回值对象
EUDataGridResult result = new EUDataGridResult();
result.setRows(list);
//取出商品记录总条数
PageInfo<TbItem> pageInfo = new PageInfo<>(list);
result.setTotal(pageInfo.getTotal());
return result;
/**
* 提交商品信息到后台数据库
*/
@Override
public TaotaoResult createItem(TbItem item)
/** 补全商品信息内容 **/
//生成商品id
Long itemId = IDUtils.genItemId();
item.setId(itemId);
//'商品状态，1-正常，2-下架，3-删除'
item.setStatus((byte) 1);
//创建和更新时间
item.setCreated(new Date());
item.setUpdated(new Date());
//插入到数据库
itemMapper.insert(item);
//返回结果
return TaotaoResult.ok();
2.4、Controller
接收表单中的内容，使用一个pojo接收。调用Service，返回TaotaoResult对象。返回json格式数据。需要使用@ResponseBody注解。
这里有个要求就是我们pojo里面的TbItem的字段必须和提交表单中的字段相对应，这里因为我已经写好在jsp里，大家只要知道有这个知识点就行。
代码我都是不断优化，添加功能，尽量能完整的提供给大家，等开发完之后会将完整项目上传，回头将地址发出。
代码三
package com.taotao.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.common.pojo.EUDataGridResult;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.pojo.TbItem;
import com.taotao.service.ItemService;
/**
*
* @ClassName: ItemController
* @Description: TODO(调用ItemService查询商品信息)
* @author 汪本成
* @date 2016年8月6日 下午10:49:53
*
*/
@Controller
public class ItemController
@Autowired
private ItemService itemService;
/**
* 根据商品id查询
* @param itemId 商品id
* @return
*/
@RequestMapping("/item/itemId")
@ResponseBody
public TbItem getItemById(@PathVariable Long itemId)
TbItem tbItem = itemService.getItemById(itemId);
return tbItem;
/**
* 创建分页
* @param page 页数
* @param rows 每页显示的行数
* @return
*/
@RequestMapping("/item/list")
@ResponseBody
public EUDataGridResult getItemList(Integer page, Integer rows)
EUDataGridResult result = itemService.getItemList(page, rows);
return result;
/**
* 创建商品信息并返回
* @param item 商品
* @return
*/
@RequestMapping(value="/item/save", method=RequestMethod.POST)
@ResponseBody
public TaotaoResult createItem(TbItem item)
TaotaoResult result = itemService.createItem(item);
return result;
2.5、测试
在数据库中查看，ok
这部分写完了，但是还是必须跟他家讨论下我的经过，在写这个部分后我刚准备测试，不是要更新common吗，但是一更新之后我的接口和controller报一大堆错，说是找不到我定义的三个接口，但是我确实在代码中导入进去了，这就让我很纳闷了，难道是jar冲突了？但是我后来检查了一下我所在的依赖，发现并没有。百思不得其解，没办法，保存好工程后就重启了下ecplise，但是还是原样，最后一番折腾，我锁定到jdk上面去了，是不是没把我新写的代码没及时编译到class里面。因为你看，我这边虽然报错，但是tomcat服务器能正常启动，后台和数据库连接等也能正常跑起来，所以我就将之前用的jdk1.7.0_79更换成了jdk1.8.0_77，保存和更新了所有工程，然后就解决了。
还需要注意的就是要是上传图片成功但是显示不出来，这是我今天测试到的bug，我给改了，因为我之前配置文件没写好，必须在图片服务器那块添加端口。我的是8188，就写好了，测试成功，这里就不多细讲了，很简单。
大家要是跟我一样遇到了就按照这个处理吧。好继续进行下一步
3、添加商品描述
虽然我们能够提交表单信息，但是富文本编辑器的编辑内容并没有能够保存和上传到数据库中去，所以现在要将这个实现。
3.1、商品描述的保存
后台要接收前台页面提交的商品信息，及商品描述。商品信息保存还要保存商品描述。
数据库中商品信息和商品描述是分开存储的。上图说明的很清楚。
3.2、Dao层
把商品描述信息保存到tb_item_desc表中。因为是单表操作，所以可以使用逆向工程生成的代码
3.3、Service层
1、接收商品描述调用dao把商品描述插入到表中。
2、参数：String 商品描述Desc
3、返回值：TaotaoResult
4、这里我就在创建添加表的商品信息同时插入商品描述，保证他们发生在同一个事务里面。
5、这里需要注意的是如果发生异常我们不能在发生异常的代码块里面进行try...catch，这样会导致spring默认代码没有异常，使事务没有发生回滚，因为默认情况下如果发生异常，sprin会自动帮我们回滚事务，不去提交事务，非常强大，于是这里我们只能抛出异常。
下面都是在原先写的代码基础上进行修改和添加，大家要注意。
代码四
package com.taotao.service;
import com.taotao.common.pojo.EUDataGridResult;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.pojo.TbItem;
/**
*
* @ClassName: ItemService
* @Description: TODO(商品管理的itemService接口)
* @author 汪本成
* @date 2016年8月6日 下午10:31:12
*
*/
public interface ItemService
TbItem getItemById(long itemId);
EUDataGridResult getItemList(int page, int rows);
TaotaoResult createItem(TbItem item, String desc) throws Exception;
代码五
package com.taotao.service.impl;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.taotao.common.pojo.EUDataGridResult;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.common.utils.IDUtils;
import com.taotao.mapper.TbItemDescMapper;
import com.taotao.mapper.TbItemMapper;
import com.taotao.pojo.TbItem;
import com.taotao.pojo.TbItemDesc;
import com.taotao.pojo.TbItemExample;
import com.taotao.pojo.TbItemExample.Criteria;
import com.taotao.service.ItemService;
/**
*
* @ClassName: ItemServiceImpl
* @Description: TODO(商品管理的ItemService)
* @author 汪本成
* @date 2016年8月10日 下午12:02:10
*
*/
@Service
public class ItemServiceImpl implements ItemService
@Autowired
private TbItemMapper itemMapper;
@Autowired
private TbItemDescMapper itemDescMapper;
/**
* 根据条件查询商品信息
*/
@Override
public TbItem getItemById(long itemId)
// TODO Auto-generated method stub
/** 1、根据主键查询 **/
//TbItem item = itemMapper.selectByPrimaryKey(itemId);
/** 2、根据条件进行查询 **/
//添加查询条件
TbItemExample example = new TbItemExample();
Criteria criteria = example.createCriteria();
criteria.andIdEqualTo(itemId);
//返回查询结果到List中
List<TbItem> list = itemMapper.selectByExample(example);
//进行判断
if(null != list && list.size() > 0)
TbItem item = list.get(0);
return item;
return null;
/**
* 商品列表查询
*/
@Override
public EUDataGridResult getItemList(int page, int rows)
//查询商品列表
TbItemExample example = new TbItemExample();
//分页处理
PageHelper.startPage(page, rows);
//取出商品列表
List<TbItem> list = itemMapper.selectByExample(example);
//创建一个返回值对象
EUDataGridResult result = new EUDataGridResult();
result.setRows(list);
//取出商品记录总条数
PageInfo<TbItem> pageInfo = new PageInfo<>(list);
result.setTotal(pageInfo.getTotal());
return result;
/**
* 提交商品信息到后台数据库
* @throws Exception
*/
@Override
public TaotaoResult createItem(TbItem item, String desc) throws Exception
/** 补全商品信息内容 **/
//生成商品id
Long itemId = IDUtils.genItemId();
item.setId(itemId);
//'商品状态，1-正常，2-下架，3-删除'
item.setStatus((byte) 1);
//创建和更新时间
item.setCreated(new Date());
item.setUpdated(new Date());
//插入到数据库
itemMapper.insert(item);
//添加商品描述信息
TaotaoResult result = insertItemDesc(itemId, desc);
//添加判断
if(result.getStatus() != 200)
throw new Exception();
//返回结果
return TaotaoResult.ok();
/**
* 添加商品描述
* @param itemId 商品Id
* @param desc 商品描述
* @return
*/
private TaotaoResult 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 TaotaoResult.ok();
3.4、Controller
只要在之前的controller里面添加进去商品描述信息就行，愿意上面我已经解释了，这里就不说了。
3.5、测试
描述信息插入成功，这部分搞定。
4、商品规格参数实现
4.1、什么是商品规格
规格参数：
规格组
|-规格项：规格值
规律：
1、同一类商品的规格项分组相同。
2、同一类商品的规格项目是相同的。规格项目是跟商品关联。
3、不同商品规格参数的值是不同的
4.2、实现方案一：使用多个表进行存储
4.2.1、方案分析
1、每一类商品有多个分组
2、每个分组下有多个项
3、每个商品对应不同的规格参数
4、使用二维表来维护规格数据。
4.2.2、SQL语句：
SELECT
pg.group_name,pk.param_name,pv.param_value
FROM
tb_item_param_value pv
LEFT JOIN tb_item_param_key pk ON pv.param_id = pk.id
LEFT JOIN tb_item_param_group pg ON pk.group_id = pg.id
WHERE
item_id = 855739
4.2.3、方案存在的问题：
1、需要创建多张表来描述规格参数之间的关系。
2、查询时需要复杂的sql语句查询。
3、规格参数数据量是商品信息的几十倍，数据量十分庞大。查询时效率很低。
4、如果要求新添加的商品规格项发生改变，之前的商品不变是不能实现的。
4.3、方案二：使用JSON模板实现
4.3.1、方案分析
规格参数模板表：
商品的规格参数表：
4.3.2、方案二优点
1、不需要做多表管理。
2、如果要求新添加的商品规格项发生改变，之前的商品不变是很简单的。
4.3.3、方案二存在问题
复杂的表单和json之间的转换。对js的编写要求很高。写到这里，必须得说下其实我js也不是很好，能看会，但是要自己去写还不行，所以我就是直接用了其他人写好的模板来弄了。要是里面代码不会的我不一定能帮上，还要你们自己去学好js技术，，我也在学精，大家可以讨论。
5、创建规格参数模板
5.1、选择商品分类
选择商品分类后根据选择的商品分类到tb_item_param规格参数模板表中取规格模板，取到了说明此商品分类的规格模板已经添加提示不能添加。如果没有取得正常添加。
代码可以参考下面我做标记的几个代码文件，看注释。
5.1.1、功能分析
1、请求的url：/item/param/query/itemcatid/itemCatId
2、参数：itemCatId，从url中获得。
3、返回值：TaotaoResult。自己封装好的，前面已经说过，这里就不介绍了。
5.1.2、Dao层
从tb_item_param表中根据商品分类id查询内容。
单表操作。可以实现逆向工程的代码。
5.1.3、Service层
功能：接收商品分类id。调用mapper查询tb_item_param表，返回结果TaotaoResult。
首先定义一个新的接口ItemParamService
代码六
package com.taotao.service;
import com.taotao.common.pojo.TaotaoResult;
/**
*
* @ClassName: ItemParamService
* @Description: TODO(商品规格参数模板接口)
* @author 汪本成
* @date 2016年8月10日 下午8:10:26
*
*/
public interface ItemParamService
TaotaoResult getItemParamByCid(long cid);
代码七
package com.taotao.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.mapper.TbItemParamMapper;
import com.taotao.pojo.TbItemParam;
import com.taotao.pojo.TbItemParamExample;
import com.taotao.pojo.TbItemParamExample.Criteria;
import com.taotao.service.ItemParamService;
/**
*
* @ClassName: ItemParamServiceImpl
* @Description: TODO(商品规格参数模板)
* @author 汪本成
* @date 2016年8月10日 下午8:11:25
*
*/
@Service
public class ItemParamServiceImpl implements ItemParamService
@Autowired
private TbItemParamMapper itemParamMapper;
@Override
public TaotaoResult getItemParamByCid(long cid)
//创建查询条件
TbItemParamExample example = new TbItemParamExample();
Criteria criteria = example.createCriteria();
criteria.andItemCatIdEqualTo(cid);
//根据cid进行查询
List<TbItemParam> list = itemParamMapper.selectByExample(example);
//判断是否查询到结果
if (list != null && list.size() > 0)
return TaotaoResult.ok(list.get(0));
return TaotaoResult.ok();
5.1.4、Controller
接收cid参数。调用Service查询规格参数模板。返回TaotaoResult。返回json数据。
代码八
package com.taotao.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.service.ItemParamService;
/**
*
* @ClassName: ItemParamController
* @Description: TODO(商品规格参数模板管理Controller)
* @author 汪本成
* @date 2016年8月10日 下午8:19:56
*
*/
@Controller
@RequestMapping("/item/param")
public class ItemParamController
@Autowired
private ItemParamService itemParamService;
/**
* 根据商品分类id查询
* @param itemCid
* @return
*/
@RequestMapping("/query/itemcatid/itemCatId")
@ResponseBody
public TaotaoResult getItemParamByCid(@PathVariable Long itemCid)
TaotaoResult result = itemParamService.getItemParamByCid(itemCid);
return result;
5.1.5、jsp
5.2、提交规格参数
5.2.1、需求分析
1、首先把页面中所有文本框中的内容转换成json数据。把json字符串提交给后台。保存到规格参数表中。
2、请求的url：/item/param/save/cid
3、参数：String paramData
4、返回值：TaotaoResult
5.2.2、Dao层
使用逆向工程生成的pojo
5.2.3、Service层
功能：接收TbitemParam对象，把对象调用mapper插入到tb_item_param表中，返回TaotaoResult。
代码九
package com.taotao.service;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.pojo.TbItemParam;
/**
*
* @ClassName: ItemParamService
* @Description: TODO(商品规格参数模板接口)
* @author 汪本成
* @date 2016年8月10日 下午8:10:26
*
*/
public interface ItemParamService
TaotaoResult getItemParamByCid(long cid);
TaotaoResult insertItemParam(TbItemParam itemParam);
代码十
package com.taotao.service.impl;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.mapper.TbItemParamMapper;
import com.taotao.pojo.TbItemParam;
import com.taotao.pojo.TbItemParamExample;
import com.taotao.pojo.TbItemParamExample.Criteria;
import com.taotao.service.ItemParamService;
/**
*
* @ClassName: ItemParamServiceImpl
* @Description: TODO(商品规格参数模板)
* @author 汪本成
* @date 2016年8月10日 下午8:11:25
*
*/
@Service
public class ItemParamServiceImpl implements ItemParamService
@Autowired
private TbItemParamMapper itemParamMapper;
/**
* 查询商品规格信息
*/
@Override
public TaotaoResult getItemParamByCid(long cid)
//创建查询条件
TbItemParamExample example = new TbItemParamExample();
Criteria criteria = example.createCriteria();
criteria.andItemCatIdEqualTo(cid);
//根据cid进行查询
List<TbItemParam> list = itemParamMapper.selectByExample(example);
//判断是否查询到结果
if (list != null && list.size() > 0)
return TaotaoResult.ok(list.get(0));
return TaotaoResult.ok();
/**
* 插入规格参数到数据库
*/
@Override
public TaotaoResult insertItemParam(TbItemParam itemParam)
//补全pojo
itemParam.setCreated(new Date());
itemParam.setUpdated(new Date());
//插入到规格参数表
itemParamMapper.insert(itemParam);
return TaotaoResult.ok();
5.2.4、Controller
功能：接收cid、规格参数模板。创建一TbItemParam对象。调用Service返回TaotaoResult。返回json数据。
代码十一
package com.taotao.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.pojo.TbItemParam;
import com.taotao.service.ItemParamService;
/**
*
* @ClassName: ItemParamController
* @Description: TODO(商品规格参数模板管理Controller)
* @author 汪本成
* @date 2016年8月10日 下午8:19:56
*
*/
@Controller
@RequestMapping("/item/param")
public class ItemParamController
@Autowired
private ItemParamService itemParamService;
/**
* 根据商品分类id查询规格参数，返回TaotaoResult
* @param itemCid
* @return
*/
@RequestMapping("/query/itemcatid/itemCatId")
@ResponseBody
public TaotaoResult getItemParamByCid(@PathVariable Long itemCid)
TaotaoResult result = itemParamService.getItemParamByCid(itemCid);
return result;
@RequestMapping("/save/cid")
@ResponseBody
public TaotaoResult insertItemParam(@PathVariable Long cid, String paramData)
//创建pojo对象
TbItemParam itemParam = new TbItemParam();
//补全对象信息
itemParam.setId(cid);
itemParam.setParamData(paramData);
TaotaoResult result = itemParamService.insertItemParam(itemParam);
return result;
5.2.5、测试
搞定。
6、根据商品规格参数生成表单
在商品添加功能中，读取此商品对应的规格模板，生成表单。供使用者添加规格参数。
商品添加的时候没有实现这部分规格参数模板这功能，现在实现。6.1、需求分析
6.2、修改Service
6.3、测试
测试ok
7、保存商品的规格参数
7.1、需求分析
1、提交表单之前，先把规格参数表单中的内容转换成json数据然后跟商品基本信息、商品描述同时提交给后台。保存至数据库。
2、转换后把规格参数的信息放到表单的hidden域中，随着表单的提交同时提交。
7.2、Dao层
需要向tb_item_param_item表中添加数据。逆向生成代码可以使用。
7.3、Service层
接收规格参数的内容，和商品id。拼装成pojo调用mapper 的方法tb_item_param_item表中添加数据返回TaotaoResult。
修改itemService接口
修改itemServiceImpl实现类
代码十二
package com.taotao.service.impl;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.taotao.common.pojo.EUDataGridResult;
import com.taotao.common.pojo.TaotaoResult;
import com.taotao.common.utils.IDUtils;
import com.taotao.mapper.TbItemDescMapper;
import com.taotao.mapper.TbItemMapper;
import com.taotao.mapper.TbItemParamItemMapper;
import com.taotao.pojo.TbItem;
import com.taotao.pojo.TbItemDesc;
import com.taotao.pojo.TbItemExample;
import com.taotao.pojo.TbItemExample.Criteria;
import com.taotao.pojo.TbItemParamItem;
import com.taotao.service.ItemService;
/**
*
* @ClassName: ItemServiceImpl
* @Description: TODO(商品管理的ItemService)
* @author 汪本成
* @date 2016年8月10日 下午12:02:10
*
*/
@Service
public class ItemServiceImpl implements ItemService
@Autowired
private TbItemMapper itemMapper;
@Autowired
private TbItemDescMapper itemDescMapper;
@Autowired
private TbItemParamItemMapper itemParamItemMapper;
/**
* 根据条件查询商品信息
*/
@Override
public TbItem getItemById(long itemId)
// TODO Auto-generated method stub
/** 1、根据主键查询 **/
//TbItem item = itemMapper.selectByPrimaryKey(itemId);
/** 2、根据条件进行查询 **/
//添加查询条件
TbItemExample example = new TbItemExample();
Criteria criteria = example.createCriteria();
criteria.andIdEqualTo(itemId);
//返回查询结果到List中
List<TbItem> list = itemMapper.selectByExample(example);
//进行判断
if(null != list && list.size() > 0)
TbItem item = list.get(0);
return item;
return null;
/**
* 商品列表查询
*/
@Override
public EUDataGridResult getItemList(int page, int rows)
//查询商品列表
TbItemExample example = new TbItemExample();
//分页处理
PageHelper.startPage(page, rows);
//取出商品列表
List<TbItem> list = itemMapper.selectByExample(example);
//创建一个返回值对象
EUDataGridResult result = new EUDataGridResult();
result.setRows(list);
//取出商品记录总条数
PageInfo<TbItem> pageInfo = new PageInfo<>(list);
result.setTotal(pageInfo.getTotal());
return result;
/**
* 提交商品信息到后台数据库
* @throws Exception
*/
@Override
public TaotaoResult createItem(TbItem item, String desc, String itemParam) throws Exception
/** 补全商品信息内容 **/
//生成商品id
Long itemId = IDUtils.genItemId();
item.setId(itemId);
//'商品状态，1-正常，2-下架，3-删除'
item.setStatus((byte) 1);
//创建和更新时间
item.setCreated(new Date());
item.setUpdated(new Date());
//插入到数据库
itemMapper.insert(item);
//添加商品描述信息
TaotaoResult result = insertItemDesc(itemId, desc);
if(result.getStatus() != 200)
throw new Exception();
//添加商品规格参数
result = insertItemParam(itemId, itemParam);
if(result.getStatus() != 200)
throw new Exception();
return TaotaoResult.ok();
/**
* 添加商品描述
* @param itemId 商品Id
* @param desc 商品描述
* @return
*/
private TaotaoResult 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 TaotaoResult.ok();
/**
* 添加商品规格参数
* @param itemId
* @param itemParam
* @return
*/
private TaotaoResult insertItemParam(Long itemId, String itemParam)
//创建一个pojo
TbItemParamItem itemParamItem = new TbItemParamItem();
//补全pojo信息
itemParamItem.setItemId(itemId);
itemParamItem.setParamData(itemParam);
itemParamItem.setCreated(new Date());
itemParamItem.setUpdated(new Date());
//向表中插入数据
itemParamItemMapper.insert(itemParamItem);
return TaotaoResult.ok();
7.4、表现层(Controller)
7.5、测试
查询数据库：
测试ok
8、展示规格参数
当现实商品详情页面时，需要把商品的规格参数根据商品id取出来，生成html展示到页面。
8.1、Dao层
根据商品id查询规格参数，单表查询。逆向工程。
8.2、Service层
接收商品id查询规格参数表。根据返回的规格参数生成html返回html。这是业务逻辑。
新建ItemParamItemService接口
代码十三
package com.taotao.service;
/**
*
* @ClassName: ItemParamItemService
* @Description: TODO(返回html的字符串)
* @author 汪本成
* @date 2016年8月10日 下午11:36:40
*
*/
public interface ItemParamItemService
public String getItemParamByItemId(Long itemId);
代码十四
package com.taotao.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.taotao.common.utils.JsonUtils;
import com.taotao.mapper.TbItemParamItemMapper;
import com.taotao.pojo.TbItemParamItem;
import com.taotao.pojo.TbItemParamItemExample;
import com.taotao.pojo.TbItemParamItemExample.Criteria;
import com.taotao.service.ItemParamItemService;
/**
*
* @ClassName: ItemParamItemServiceImpl
* @Description: TODO(展示商品规格参数)
* @author 汪本成
* @date 2016年8月10日 下午11:38:17
*
*/
@Service
public class ItemParamItemServiceImpl implements ItemParamItemService
@Autowired
private TbItemParamItemMapper itemParamItemMapper;
@Override
public String getItemParamByItemId(Long itemId)
//根据商品id查询规格参数
TbItemParamItemExample example = new TbItemParamItemExample();
Criteria criteria = example.createCriteria();
criteria.andItemIdEqualTo(itemId);
//执行查询
List<TbItemParamItem> list = itemParamItemMapper.selectByExampleWithBLOBs(example);
if(list == null || list.size() == 0)
return "";
//取商品规格参数信息
TbItemParamItem itemParamItem = list.get(0);
String paramData = itemParamItem.getParamData();
//生成html
//把规格参数的json数据转换成java对象
List<Map> jsonList = JsonUtils.jsonToList(paramData, Map.class);
StringBuffer sb = new StringBuffer();
sb.append("<table cellpadding=\\"0\\" cellspacing=\\"1\\" width=\\"100%\\" border=\\"1\\" class=\\"Ptable\\">\\n");
sb.append(" <tbody>\\n");
for(Map m1:jsonList)
sb.append(" <tr>\\n");
sb.append(" <th class=\\"tdTitle\\" colspan=\\"2\\">"+m1.get("group")+"</th>\\n");
sb.append(" </tr>\\n");
List<Map> list2 = (List<Map>) m1.get("params");
for(Map m2:list2)
sb.append(" <tr>\\n");
sb.append(" <td class=\\"tdTitle\\">"+m2.get("k")+"</td>\\n");
sb.append(" <td>"+m2.get("v")+"</td>\\n");
sb.append(" </tr>\\n");
sb.append(" </tbody>\\n");
sb.append("</table>");
return sb.toString();
8.3、Controller
接收商品id调用Service查询规格参数信息，得到规格参数的html。返回一个逻辑视图。把html展示到页面。
代码十五package com.taotao.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import com.taotao.service.ItemParamItemService;
/**
*
* @ClassName: ItemParamItemController
* @Description: TODO(实现商品规格参数的展示)
* @author 汪本成
* @date 2016年8月11日 上午12:12:40
*
*/
@Controller
public class ItemParamItemController
@Autowired
private ItemParamItemService itemParamItemService;
@RequestMapping("/showitem/itemId")
public String showItemParam(@PathVariable Long itemId, Model model)
String result = itemParamItemService.getItemParamByItemId(itemId);
model.addAttribute("itemParam", result);
return "item";
8.4、测试
在jsp目录下新建一个item.jsp展示页面，如下
代码十六
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
$itemParam
</body>
</html>
成功显示数据，美化部分后面会进行。
今天就写到这，内容很多，希望大家好好消化，都是我一字一画写的，好好学习。明天继续。晚安！
以上是关于怎么在jsp页面的form表单中加入富文本编辑器？？？并传递数据到后台进行保存的主要内容，如果未能解决你的问题，请参考以下文章
jsp页面的form表单action提交数据但不跳转页面，后台返回的数据需要在当前页进行处理，怎么做？