编辑POJO
@TableName("tb_item_cat")
@Data
@Accessors(chain=true)
public class ItemCat extends BasePojo{ //注意事项: POJO中的属性都使用包装类型
@TableId(type=IdType.AUTO) //主键自增
private Long id; //商品分类ID信息
private Long parentId; //父级ID
private String name; //商品分类名称
private Integer status; //1正常,2删除'
private Integer sortOrder; //排序号
private Boolean isParent; //是否为父级. 基本类型有默认值 false
//mp查询方式 itemcatMapper.selectOne(itemCat)根据对象中不为null的属性当作where条件
}
编辑ItemCatMapper
public interface ItemCatMapper extends BaseMapper<ItemCat>{
}
编辑ItemCatMapper.xml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.mapper.ItemCatMapper">
</mapper>
页面JS
//格式化名称
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName",
data:{itemCatId:val},
//cache:true, //缓存
async:false, //表示同步 默认的是异步的true ???
dataType:"text",//表示返回值参数类型
success:function(data){
name = data;
}
});
return name;
},
编辑ItemCatController
@RestController
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 业务:根据商品分类id信息,查询数据库记录
* url : /item/cat/queryItemName
* 参数 : itemCatId:val
* 返回值: 商品分类名称
*/
@RequestMapping("/queryItemName")
public String findItemCatById(Long itemCatId) {
ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
return itemCat.getName();
}
}
编辑ItemCatService
@Service
public class ItemCatServiceImpl implements ItemCatService {
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public ItemCat findItemCatById(Long itemCatId) {
return itemCatMapper.selectById(itemCatId);
}
}
EasyUITree VO对象
@Data
@Accessors(chain=true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree {
//封装树形结构数据 {"id":"1","text":"吃鸡游戏","state":"open/closed"}
private Long id; //与后台数据库记录保持一致
private String text; //节点名称
private String state; //表示节点开关. open/closed
}
页面分析
$("").css({padding:"5px"}).html(""
)
.window({
width:'500',
height:"450",
modal:true,
closed:true,
iconCls:'icon-save',
title:'选择类目',
onOpen : function(){ //当窗口打开后执行
var _win = this;
$("ul",_win).tree({
url:'/item/cat/list',
animate:true,
onClick : function(node){...}}
编辑ItemCatController
/**
* 业务需求:查询商品分类信息.并且进行树形结构展现
* url地址:http://localhost:8091/item/cat/list
* 参数:parentId
* 查询一级商品分类信息 则parent_id=0
SELECT * FROM tb_item_cat WHERE parent_id=0
查询二级商品分类信息
SELECT * FROM tb_item_cat WHERE parent_id=1
查询三级商品分类信息
SELECT * FROM tb_item_cat WHERE parent_id=2
* 返回值: 树形结构展现 EasyUITree
*/
@RequestMapping("/list")
public List<EasyUITree> findItemCatListByParentId(Long parentId){
//1.暂时只查询一级商品分类信息
parentId = 0L;
return itemCatService.findItemCatListByParentId(parentId);
}
编辑ItemCatService
/**
* 目的查询树形结构数据.返回VO对象
* 数据库中查询的是ItemCat POJO对象
* 数据转化的过程 将POJO转化为VO对象
*/
@Override
public List<EasyUITree> findItemCatListByParentId(Long parentId) {
List<EasyUITree> treeList = new ArrayList<EasyUITree>();
//根据parentId查询子级信息
List<ItemCat> itemCatList = findItemCatByParentId(parentId);
for (ItemCat itemCat : itemCatList) {
Long id = itemCat.getId(); //获取id数据
String text = itemCat.getName(); //获取分类名称
//如果是父级元素则关闭,否则打开
String state = itemCat.getIsParent()?"closed":"open";
EasyUITree easyUITree = new EasyUITree(id, text, state);
treeList.add(easyUITree);
}
return treeList;
}
private List<ItemCat> findItemCatByParentId(Long parentId) {
QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
//查询并且根据排序号 排序
queryWrapper.eq("parent_id", parentId).orderByAsc("sort_order");
return itemCatMapper.selectList(queryWrapper);
}
动态获取节点ID
@RequestMapping("/list")
public List<EasyUITree> findItemCatListByParentId
(@RequestParam(name="id",defaultValue="0")Long parentId){
return itemCatService.findItemCatListByParentId(parentId);
}
商品新增
编辑页面JS
function submitForm(){
//表单校验
if(!$('#itemAddForm').form('validate')){
$.messager.alert('提示','表单还未填写完成!');
return ; //让JS程序结束
}
//转化价格单位,将元转化为分 $("price").val(300) 进行算术运算函数eval("100")*100
$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
itemAddEditor.sync();//将输入的内容同步到多行文本中
/*$.post/get(url,JSON,function(data){....})
?id=1&title="天龙八部&key=value...."
*/
//alert($("#itemAddForm").serialize());
$.post("/item/save",$("#itemAddForm").serialize(), function(data){
if(data.status == 200){
$.messager.alert('提示','新增商品成功!');
}else{
$.messager.alert("提示","新增商品失败!");
}
});
}
编辑系统返回值VO对象----SysResult对象
@Data
@Accessors(chain=true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {
//封装系统返回值VO对象
private Integer status; //状态码 200成功 201失败
private String msg; //服务器提示信息
private Object data; //服务器返回值数据
public static SysResult fail() {
return new SysResult(201, "服务调用失败", null);
}
public static SysResult success() {
return new SysResult(200, "服务器执行成功", null);
}
//如果需要给前台服务器返回字符串
public static SysResult success(Object data) {
return new SysResult(200, "服务器执行成功", data);
}
public static SysResult success(String msg,Object data) {
return new SysResult(200, msg, data);
}
}
编辑ItemController
/**
* 业务需求:完成商品新增操作
* url:/item/save
* 参数: form表单提交数据
* 返回值: SysResult对象
*/
@RequestMapping("/save")
public SysResult saveItem(Item item) {
try {
itemService.saveItem(item);
return SysResult.success();
} catch (Exception e) {
e.printStackTrace();
return SysResult.fail(); //统一异常处理机制
}
}
编辑ItemService
/**
* 注意事项:
* 1.补全数据 status 状态信息 时间
* 2.事务控制 但凡涉及到数据库操作 事务控制必须添加
*/
@Override
@Transactional //进行事物控制
public void saveItem(Item item) {
item.setStatus(1)
.setCreated(new Date())
.setUpdated(item.getCreated());
itemMapper.insert(item);
}
全局异常处理机制
@RestControllerAdvice //controller的通知
@Slf4j //动态生成日志
public class SystemExceptionAOP {
//当遇到运行时异常,则执行该方法. 以后写代码时注意异常的范文.
@ExceptionHandler(Exception.class)
public Object runtimeAOP(Exception exception) {
exception.printStackTrace(); //调错方便
log.info("{"+exception.getMessage()+"}");
return SysResult.fail();
}
}
商品分类信息回显
页面JS分析
function getSelectionsIds(){
var itemList = $("#itemList");
/*[item,item,item,item]*/
var sels = itemList.datagrid("getSelections");
var ids = [];
for(var i in sels){
ids.push(sels[i].id);
}
//将数组拼接成串 1,2,3,4,5
ids = ids.join(",");
return ids;
}
编辑页面JS
{
text:'编辑',
iconCls:'icon-edit',
handler:function(){ //点击按钮时的操作
//获取用户选中的数据
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','必须选择一个商品才能编辑!');
return ;
}
//id=10,11,12,13
if(ids.indexOf(',') > 0){
$.messager.alert('提示','只能选择一个商品!');
return ;
}
$("#itemEditWindow").window({
//加载数据
onLoad :function(){
//1.动态获取用户选中的记录
var data = $("#itemList").datagrid("getSelections")[0];
//数据库中获取的商品价格为整数.而给用户显示的是小数.
data.priceView = KindEditorUtil.formatPrice(data.price);
//loadform表达数据的加载 填充的数据data
$("#itemeEditForm").form("load",data);
// 加载商品描述
//_data = SysResult.ok(itemDesc)
$.getJSON('/item/query/item/desc/'+data.id,function(_data){
if(_data.status == 200){
//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
itemEditEditor.html(_data.data.itemDesc);
}
});
}).window("open");
}
}
编辑Item-list页面
/动态实现商品分类名称回显
//1.利用jQuery选择器动态选择cid,
//2.获取cid的兄弟元素 span标签
//3.通过ajax请求动态获取cid所对应的name属性的值
//加载顺序的问题!!!!!.
var cid = data.cid;
$.get("/item/cat/queryItemName",{"itemCatId":cid},function(data){
$("#itemeEditForm [name='cid']").siblings("span").text(data);
})
页面修改操作
页面分析
$.post("/item/update",$("#itemeEditForm").serialize(), function(data){
if(data.status == 200){
$.messager.alert('提示','修改商品成功!','info',function(){
$("#itemEditWindow").window('close');
$("#itemList").datagrid("reload");
});
}else{
$.message.alert("提示",data.msg);
}
});
编辑ItemController
@RequestMapping("/update")
public SysResult updateItem(Item item) {
itemService.updateItem(item);
return SysResult.success();
}
编辑ItemService
@Transactional
@Override
public void updateItem(Item item) {
item.setUpdated(new Date());
//根据主键进行更新操作
itemMapper.updateById(item);
}
商品删除
分析页面JS
$.post("/item/delete",params, function(data){
if(data.status == 200){ //返回值SysResult对象
$.messager.alert('提示','删除商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}else{
$.messager.alert("提示",data.msg);
}
});
编辑ItemController
/**
* 业务: 完成商品删除操作
* url:/item/delete
* 参数: {"ids":"1474392200,1474392189,1474392187"}
* 返回值:SysResult
*/
@RequestMapping("/delete")
public SysResult deleteItems(Long[] ids) {
itemService.deleteItems(ids);
return SysResult.success();
}
编辑ItemService
@Override
@Transactional
public void deleteItems(Long[] ids) {
//1.利用mp方式删除
//List idList = Arrays.asList(ids);
//itemMapper.deleteBatchIds(idList);
//2.使用sql方式删除
itemMapper.deleteItems(ids);
}
编辑Mapper接口
public interface ItemMapper extends BaseMapper<Item>{
List<Item> findItemByPage(Integer start, Integer rows);
//什么时候可以将数据封装为Map集合????
//旧版本中不允许多值传参,则必须封装为Map集合.利用@Param注解
//新版本中理论上可以进行多值传参.如果设计到循环遍历时,最好添加@Param注解,好区分
void deleteItems(Long[] ids);
}
xml映射文件
<mapper namespace="com.jt.mapper.ItemMapper">
<select id="findItemByPage" resultType="Item">
SELECT * FROM tb_item ORDER BY updated DESC LIMIT #{start},#{rows}
</select>
<!--需要将数组进行循环遍历之后动态获取
1.数组 collection="array"
2.list集合 collection="list"
3.Map集合(多值) collection="map中的key"
-->
<delete id="deleteItems">
DELETE FROM tb_item WHERE id IN (
<foreach collection="array" item="id" separator=",">
#{id}
</foreach>
)
</delete>
</mapper>
商品上架/下架
页面url分析
$.post("/item/reshelf",params, function(data){
if(data.status == 200){
$.messager.alert('提示','上架商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}
});
编辑ItemController
/**
* 业务: 修改商品的状态信息
* url: /item/reshelf
* 参数: ids=1,2,3,4,5
* 返回值:SysResult对象
*/
@RequestMapping("/reshelf")
public SysResult reshelf(Long... ids) {
int status = 1;
itemService.updateItemStatus(ids,status);
return SysResult.success();
}
//下架 /item/instock
@RequestMapping("/instock")
public SysResult instock(Long... ids) {
int status = 2;
itemService.updateItemStatus(ids,status);
return SysResult.success();
}
编辑ItemService
/**
* sql语句:
* update tb_item set status=#{status},updated=#{updated}
* where id in (1,2,3,4,5)
*/
@Override
public void updateItemStatus(Long[] ids, Integer status) {
//1.MP方式实现数据的修改
/*Item itemTemp = new Item();
itemTemp.setStatus(status).setUpdated(new Date());
UpdateWrapper- updateWrapper = new UpdateWrapper<>();
List
idList = Arrays.asList(ids);
updateWrapper.in("id", idList);
itemMapper.update(itemTemp, updateWrapper);*/
//2.利用Sql方式实现
Date updated = new Date();
itemMapper.updateItemStatus(ids,status,updated);
}
编辑ItemMapper/xml映射文件
public interface ItemMapper extends BaseMapper<Item>{
List<Item> findItemByPage(Integer start, Integer rows);
//什么时候可以将数据封装为Map集合????
//旧版本中不允许多值传参,则必须封装为Map集合.利用@Param注解
//新版本中理论上可以进行多值传参.如果设计到循环遍历时,最好添加@Param注解,好区分
//新版本中如果遇到多值传参 会自动的封装为map集合,其中的key就是参数的名称
void deleteItems(Long[] ids);
void updateItemStatus(Long[] ids,
Integer status,
Date updated);
}
XML映射文件
<!--更新商品状态 -->
<update id="updateItemStatus">
update tb_item set status=#{status},updated=#{updated}
where id in (
<foreach collection="ids" item="id" separator=",">
#{id}
</foreach>
)
</update>
商品详情
编辑POJO
@TableName("tb_item_desc")
public class ItemDesc extends BasePojo{
@TableId
private Long itemId; //应该与商品表Id一致的
private String itemDesc;
}
编辑Mapper接口
public interface ItemDescMapper extends BaseMapper<ItemDesc>{
}
重构商品新增
编辑ItemController
@RequestMapping("/save")
public SysResult saveItem(Item item,ItemDesc itemDesc) {
itemService.saveItem(item,itemDesc);
return SysResult.success();
/*try {
itemService.saveItem(item);
return SysResult.success();
} catch (Exception e) {
e.printStackTrace();
return SysResult.fail(); //统一异常处理机制
}*/
}
编辑ItemService
//同时入库item/itemDesc表
@Override
@Transactional
public void saveItem(Item item, ItemDesc itemDesc) {
item.setStatus(1)
.setCreated(new Date())
.setUpdated(item.getCreated()); //item中的ID没有值
itemMapper.insert(item); //当入库之后才能获取自增的ID
//思路:MP能够实现数据入库之后,动态的实现数据回显
itemDesc.setItemId(item.getId())
.setCreated(new Date())
.setUpdated(item.getCreated());
itemDescMapper.insert(itemDesc);
}
商品描述回显
页面JS
$.getJSON('/item/query/item/desc/'+data.id,function(_data){
if(_data.status == 200){
//发起ajax请求,之后动态获取商品详情页面数据
itemEditEditor.html(_data.data.itemDesc);
}
});
编辑ItemController
/**
* 业务需求:根据商品Id动态查询商品详情信息
* url: http://localhost:8091/item/query/item/desc/1474392202
* 参数: itemId
* 返回值: SysResult(itemDesc)
*/
@RequestMapping("/query/item/desc/{itemId}")
public SysResult findItemDescById(@PathVariable Long itemId) {
ItemDesc itemDesc = itemService.findItemDescById(itemId);
return SysResult.success(itemDesc);
}
编辑ItemService
@Override
public ItemDesc findItemDescById(Long itemId) {
return itemDescMapper.selectById(itemId);
}
商品详情更新操作
重构ItemController
@RequestMapping("/update")
public SysResult updateItem(Item item,ItemDesc itemDesc) {
itemService.updateItem(item,itemDesc);
return SysResult.success();
}
重构ItemService
@Override
@Transactional
public void updateItem(Item item, ItemDesc itemDesc) {
//1.更新item表
item.setUpdated(new Date());
//根据主键进行更新操作
itemMapper.updateById(item);
//2.更新itemDesc表
itemDesc.setItemId(item.getId())
.setUpdated(item.getUpdated()); //时间保持一致
itemDescMapper.updateById(itemDesc);
}
删除商品详情
重构ItemService
@Override
@Transactional
public void deleteItems(Long[] ids) {
//1.利用mp方式删除
//List idList = Arrays.asList(ids);
//itemMapper.deleteBatchIds(idList);
//2.使用sql方式删除
itemMapper.deleteItems(ids);
List<Long> idList = Arrays.asList(ids);
itemDescMapper.deleteBatchIds(idList);
}