1.商品后台业务操作
1.1 工具栏实现
1.1.1 工具栏入门案例
/*定义工具栏 */
toolbar: [{
iconCls: 'icon-edit', //图标的样式
handler: function(){alert("点击工具栏")} //回显的弹窗
},'-',{
iconCls: 'icon-help', //图标的样式
handler: function(){alert('帮助工具栏')}
},'-',{
iconCls: 'icon-save', //图标的样式
handler: function(){alert('保存工具栏')}
}],
1.2 商品分类名称回显
分析商品回显：
function getSelectionsIds(){
//选中的是所有表格数据的信息
var itemList = $("#itemList");//商品目录
//获取用户选中元素
var sels = itemList.datagrid("getSelections");
//console.log(sels);
var ids = [];
//in i index下标 of 对象
for(var i in sels){
//将用户获取的id封装到新的数组中
ids.push(sels[i].id);
}
//设定连接符，拼接字符串[1,2,3,4,5] => 1,2,3,4,5
//回后续做考虑，1,2,3能打包向后传，数组则不能
ids = ids.join(",");
return ids;
}
编辑页面JS
item-list.jsp
//根据id 动态获取商品分类名称
var cid = data.cid;
//通过ajax请求程序动态获取用户数据
$.get("/itemCat/findItemCatById",{id: cid},function(data){
var name = data.name
//如何将name属性绑定到分类表格中?
//.val("xxxx") value属性值 .text("xxxxx") 标签中间的文本值
$("#itemeEditForm input[name='cid']").prev().text(name)
})
页面效果:
1.3 商品更新操作
1.3.1 页面分析
1.3.2 页面JS分析
$("#itemeEditForm [name=itemParams]").val(paramJson);
//data 回调函数
$.post("/item/update",$("#itemeEditForm").serialize(), function(data){
if(data.status == 200){ //如果回调函数=200
$.messager.alert('提示','修改商品成功!','info',function(){//就提示 修改商品成功
$("#itemEditWindow").window('close'); //关闭弹窗
$("#itemList").datagrid("reload"); //刷新
});
}else{
$.message.alert("提示",data.msg);
}
});
1.3.3 编辑ItemController
/**
* 完成商品修改操作
* url地址: http://localhost:8091/item/update
* 参数: form表单
* 返回值: SysResult对象
*/
@RequestMapping("/update")
public SysResult updateItem(Item item){
itemService.updateItem(item);
return SysResult.success();
}
1.3.4 编辑ItemServiceImpl
@Override
@Transactional
public void updateItem(Item item) {
itemMapper.updateById(item);
}
1.4 商品删除
1.4.1 页面URL分析
1.4.2 页面参数
1.4.3 页面JS
$.messager.confirm('确认','确定删除ID为 '+ids+' 的商品吗？',function(r){
if (r){
var params = {"ids":ids};
$.post("/item/delete",params, function(data){
if(data.status == 200){
$.messager.alert('提示','删除商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}else{
$.messager.alert("提示",data.msg);
}
});
}
});
1.4.4 编辑ItemController
/**
* 批量删除商品
* url地址: http://localhost:8091/item/delete
* 参数: ids=100,101,102
* 返回值: SysResult对象
* 简化操作: 当参数采用,号分隔时,会自动的转化为数组.
* SpringMVC 底层实现servlet
*/
@RequestMapping("/delete")
public SysResult deleteItems(Long... ids){
itemService.deleteItems(ids);
return SysResult.success();
}
1.4.5 编辑ItemService
@Transactional
@Override
public void deleteItems(Long[] ids) {
itemMapper.deleteIds(ids);
}
1.4.6 编辑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.ItemMapper">
<!--
提示:void deleteIds(Long[] ids);
原理:
1.Mybatis原生支持单值传参
2.如果遇到多值传参,则Mybatis会将多值封装为单值.
利用Map集合进行封装
3.Mybatis升级之后,会自动的封装数据.
原则:
1.如果mybatis 进行单值传参
数据: collection="array"
list集合: collection="list"
Map集合: collection="Map中的key"
-->
<delete id="deleteIds">
delete from tb_item where id in
<foreach collection="array" open="(" close=")"
separator="," item="id">
#{id}
</foreach>
</delete>
</mapper>
1.5 商品上架/下架操作
1.5.1 页面URL分析
需求: 能否利用一个方法,实现通用的上架/下架操作.
1.下架操作
2).上架操作
3).参数分析
4).页面JS分析
$.messager.confirm('确认','确定下架ID为 '+ids+' 的商品吗？',function(r){
if (r){
var params = {"ids":ids};
$.post("/item/instock",params, function(data){
if(data.status == 200){
$.messager.alert('提示','下架商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}
});
1.5.2 restFul风格优化
将页面URL路径封装为restFul风格,之后动态获取参数,实现状态的更新。
/item/updateStatus/1
$.messager.confirm('确认','确定上架ID为 '+ids+' 的商品吗？',function(r){
if (r){
var params = {"ids":ids};
$.post("/item/updateStatus/1",params, function(data){
if(data.status == 200){
$.messager.alert('提示','上架商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}
});
1.5.3 编辑ItemController
/**
* 实现上架/下架通用操作
* url: /item/reshelf 上架操作 status=1
* url: /item/instock 下架操作 status=2
* restFUl操作方法
* URL优化: url: /item/updateStatus/2
*/
@RequestMapping("/updateStatus/{status}")
public SysResult updateStatus(@PathVariable Integer status,Long... ids){
itemService.updateStatus(status,ids);
return SysResult.success();
}
1.5.4 编辑ItemService
/**
* Sql: update tb_item set updated = #{updated},status = #{status}
* where id in (xx,xx,xx,xx)
* @param status
* @param ids
*/
@Override
public void updateStatus(Integer status, Long[] ids) {
//参数1:实体对象 将要修改的数据封装
Item item = new Item();
item.setStatus(status);
//参数2:条件构造器 动态拼接where条件
UpdateWrapper updateWrapper = new UpdateWrapper();
List<Long> idList = Arrays.asList(ids);
updateWrapper.in("id", idList);
itemMapper.update(item,updateWrapper);
}
1.6 富文本编辑器实现
1.6.1 商品与商品分类表结构
1.6.2 入门案例
<%@ 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">
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
KindEditor.ready(function(){
KindEditor.create("#editor")
})
})
</script>
</head>
<body>
<h1>富文本编辑器</h1>
<textarea style="width:700px;height:350px" id="editor"></textarea>
</body>
</html>
1.6.3 封装商品详情信息
@TableName("tb_item_desc")
@Data
@Accessors(chain = true)
public class ItemDesc extends BasePojo{
@TableId
private Long itemId; //itemId与商品表的Id值一致.
private String itemDesc; //商品详情信息
}
1.6.4 编辑 ItemDescMapper
package com.jt.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.ItemDesc;
public interface ItemDescMapper extends BaseMapper<ItemDesc> {
}
1.7 重构商品新增操作
1.7.1 参数分析
1.7.2 编辑ItemController
/**
* 业务说明: 商品新增
* URL地址: http://localhost:8091/item/save
* 请求参数: form表单 item对象接收
* 返回值: SysResult对象
*/
@RequestMapping("/save")
public SysResult saveItem(Item item, ItemDesc itemDesc){
try {
itemService.saveItem(item,itemDesc);
return SysResult.success();
}catch (Exception e){
e.printStackTrace();
return SysResult.fail();
}
}
1.7.3 编辑ItemService
/**
*<insert id="xxxxx" useGeneratedKeys="true" keyProperty="itemId" keyColumn="item_id">
*
* </insert>
*/
@Transactional //标记方式使用事务控制
@Override
public void saveItem(Item item, ItemDesc itemDesc) {
//主键自增 入库之后才有主键，问题：如何将对象的主键动态的回显？
//利用mybatis的主键自动回显的功能实现。。。
item.setStatus(1); //设定启动状态
//.setCreated(new Date())
//.setUpdated(item.getCreated());
itemMapper.insert(item);
//商品详情表中的主键应该与商品表中的主键一致
itemDesc.setItemId(null);
itemDescMapper.insert(itemDesc);
}
1.8 重构商品管理删除操作
1.8.1 业务说明
由于商品与商品详情是一对一的关联关系,所以当删除商品时,应该关联删除商品详情.
1.8.2 关联删除商品
@Override
@Transactional//事务控制
public void deleteItems(Long[] ids) {
//删除商品信息
itemMapper.deleteIds(ids);
//删除商品详细信息
List<Long> idList= Arrays.asList(ids);
itemDescMapper.deleteBatchIds(idList);
}
1.9 商品详情回显
1.9.1 业务说明
当点击商品编辑按钮时,应该根据Id,查询商品详情信息.之后将html代码片段,以html的展现形式给用户展现。
1.9.2 编辑页面JS
item-list.jsp
// 加载商品描述
$.getJSON('/item/query/item/desc/'+data.id,function(_data){
if(_data.status == 200){
//系统返回值对象
console.log(_data);
//服务器返回的业务数据
console.log(_data.data);
//获取html数据信息
console.log(_data.data.itemDesc)
itemEditEditor.html(_data.data.itemDesc);//html的代码片段
}
});
1.9.3 编辑ItemController
/**
* 根据id查询商品分类名称
* URL地址: /item/query/item/desc/'+data.id
* 参数: id
* 返回值: SysResult对象(itemDesc对象)
*/
@RequestMapping("/query/item/desc/{id}")
public SysResult findItemDescById(@PathVariable Long id){
ItemDesc itemDesc = itemService.findItemDescById(id);
return SysResult.success(itemDesc);
}
1.9.4 编辑ItemService
@Override
public ItemDesc findItemDescById(Long id) {
return itemDescMapper.selectById(id);
}
1.10 重构商品编辑
1.10.1 页面分析
1.页面URL
2.提交参数
1.10.2 编辑ItemController
/**
* 完成商品修改操作
* url地址: http://localhost:8091/item/update
* 参数: form表单
* 返回值: SysResult对象
*/
@RequestMapping("/update")
public SysResult updateItem(Item item,ItemDesc itemDesc){
itemService.updateItem(item,itemDesc);
return SysResult.success();
}
1.10.3 编辑ItemService
@Override
@Transactional //注意事务控制
public void updateItem(Item item, ItemDesc itemDesc) {
itemMapper.updateById(item);
itemDesc.setItemId(item.getId());
itemDescMapper.updateById(itemDesc);
}
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
