複習電商筆記-11
阿新 • • 發佈：2018-11-14
Mybatis那些事-攔截器(Plugin+Interceptor)
參考連結：https://blog.csdn.net/yhjyumi/article/details/49188051
EasyUI分頁和返回結果集物件
Service層程式碼：
//帶分頁查詢，並返回EasyUI所學結果集供EasyUI grid控制元件繫結資料 public EasyUIResult queryList(Integer page, Integer rows){ PageHelper.startPage(page, rows);// 設定分頁資訊 List<Item> oList = itemMapper.queryListOrderByUpdated(); PageInfo<Item> pageInfo = new PageInfo<Item>(oList); return new EasyUIResult(pageInfo.getTotal(),pageInfo.getList()); }
Controller層程式碼：
@RequestMapping("query")
@ResponseBody
public EasyUIResult list(Integer page, Integer rows){
return itemService.queryList(page, rows);
}
開發步驟
第一步：列表頁面item-list.jsp引入EasyUI的列表控制元件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <table class="easyui-datagrid" id="itemList" title="商品列表" data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:30,toolbar:toolbar"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'id',width:60">商品ID</th> <th data-options="field:'title',width:200">商品標題</th> <th data-options="field:'cid',width:100">葉子分類</th> <th data-options="field:'sellPoint',width:100">賣點</th> <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th> <th data-options="field:'num',width:70,align:'right'">庫存數量</th> <th data-options="field:'barcode',width:100">條形碼</th> <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th> <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">建立日期</th> <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th> </tr> </thead> </table> <div id="itemEditWindow" class="easyui-window" title="編輯商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/page/item-edit'" style="width:80%;height:80%;padding:10px;"> </div> <script> function getSelectionsIds(){ var itemList = $("#itemList"); var sels = itemList.datagrid("getSelections"); var ids = []; for(var i in sels){ ids.push(sels[i].id); } ids = ids.join(","); return ids; } var toolbar = [{ text:'新增', iconCls:'icon-add', handler:function(){ $(".tree-title:contains('新增商品')").parent().click(); } },{ text:'編輯', iconCls:'icon-edit', handler:function(){ var ids = getSelectionsIds(); if(ids.length == 0){ $.messager.alert('提示','必須選擇一個商品才能編輯!'); return ; } if(ids.indexOf(',') > 0){ $.messager.alert('提示','只能選擇一個商品!'); return ; } $("#itemEditWindow").window({ onLoad :function(){ //回顯資料 var data = $("#itemList").datagrid("getSelections")[0]; data.priceView = KindEditorUtil.formatPrice(data.price); $("#itemeEditForm").form("load",data); // 載入商品描述 $.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); } }); //載入商品規格 $.getJSON('/item/param/item/query/'+data.id,function(_data){ if(_data && _data.status == 200 && _data.data && _data.data.paramData){ $("#itemeEditForm .params").show(); $("#itemeEditForm [name=itemParams]").val(_data.data.paramData); $("#itemeEditForm [name=itemParamId]").val(_data.data.id); //回顯商品規格 var paramData = JSON.parse(_data.data.paramData); var html = "<ul>"; for(var i in paramData){ var pd = paramData[i]; html+="<li><table>"; html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>"; for(var j in pd.params){ var ps = pd.params[j]; html+="<tr><td class=\"param\"><span>"+ps.k+"</span>: </td><td><input autocomplete=\"off\" type=\"text\" value='"+ps.v+"'/></td></tr>"; } html+="</li></table>"; } html+= "</ul>"; $("#itemeEditForm .params td").eq(1).html(html); } }); KindEditorUtil.init({ "pics" : data.image, "cid" : data.cid, fun:function(node){ KindEditorUtil.changeItemParam(node, "itemeEditForm"); } }); } }).window("open"); } },{ text:'刪除', iconCls:'icon-cancel', handler:function(){ var ids = getSelectionsIds(); if(ids.length == 0){ $.messager.alert('提示','未選中商品!'); return ; } $.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"); }); } }); } }); } },'-',{ text:'下架', iconCls:'icon-remove', handler:function(){ var ids = getSelectionsIds(); if(ids.length == 0){ $.messager.alert('提示','未選中商品!'); return ; } $.messager.confirm('確認','確定下架ID為 '+ids+' 的商品嗎？',function(r){ if (r){ var params = {"ids":ids}; $.post("/rest/item/instock",params, function(data){ if(data.status == 200){ $.messager.alert('提示','下架商品成功!',undefined,function(){ $("#itemList").datagrid("reload"); }); } }); } }); } },{ text:'上架', iconCls:'icon-remove', handler:function(){ var ids = getSelectionsIds(); if(ids.length == 0){ $.messager.alert('提示','未選中商品!'); return ; } $.messager.confirm('確認','確定上架ID為 '+ids+' 的商品嗎？',function(r){ if (r){ var params = {"ids":ids}; $.post("/rest/item/reshelf",params, function(data){ if(data.status == 200){ $.messager.alert('提示','上架商品成功!',undefined,function(){ $("#itemList").datagrid("reload"); }); } }); } }); } }]; </script>
訪問的/item/query連結，採用get方法訪問。返回EasyUIResult。
第二步：在ItemController中增加查詢方法
@RequestMapping("query")
@ResponseBody
public EasyUIResult queryList(@RequestParam("page") Integer page, @RequestParam("rows") Integer rows) {
return this.itemService.queryList(page, rows);
}第三步：在ItemService中新增查詢方法
/** * 查詢商品列表 * @param page * @param rows * @return */ public EasyUIResult queryList(Integer page, Integer rows) { PageHelper.startPage(page, rows, true);//設定分頁資訊 List<Item> items = itemMapper.queryListOrderByUpdated();//按照更新時間倒序排序 PageInfo<Item> pageInfo = new PageInfo<Item>(items); return new EasyUIResult(pageInfo.getTotal(), pageInfo.getList()); }
第四步：在ItemMapper中新增查詢方法，按修改時間倒敘
package com.jt.manage.mapper;
import java.util.List;
import com.jt.manage.mapper.base.mapper.SysMapper;
import com.jt.manage.pojo.Item;
public interface ItemMapper extends SysMapper<Item>{
public List<Item> queryListOrderByUpdated();
}
第五步：ItemMapper.xml
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.manage.mapper.ItemMapper">
<select id="queryListOrderByUpdated" resultType="Item">
SELECT * FROM tb_item ORDER BY updated DESC
</select>
</mapper>
按修改時間倒敘排列。
列表頁面顯示出所有商品資訊
資料二次加工
價格修飾，日期修飾，狀態顯示中文，回顯商品分類名稱。
宣告js函式
var TT = KindEditorUtil = {
// 格式化價格
formatPrice : function(val,row){
return (val/100).toFixed(2);
},
// 格式化商品的狀態
formatItemStatus : function formatStatus(val,row){
if (val == 1){
return '正常';
} else if(val == 2){
return '<span style="color:red;">下架</span>';
} else {
return '未知';
}
},
// 商品分類id轉名稱
formatItemCat : function(val,row){
var result = ""; //接收返回值
//jQuery提供$.get、$.post、$.ajax三種方式
$.ajax({
type: "POST",
url: "/item/cat/"+val,
contentType: "application/json;charset=utf-8",
dataType: "json",
async: false, //同步，必須設定為同步，非同步無法獲取返回值
success: function (data) {
result = data.name+"("+val+")";
}, failure: function () {
result = "";
}
})
return result;
}
};
列表中呼叫
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.formatItemCat">商品分類</th>
<th data-options="field:'sellPoint',width:100">賣點</th>
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th>
<th data-options="field:'num',width:70,align:'right'">庫存數量</th>
<th data-options="field:'barcode',width:100">條形碼</th>
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th>
<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">建立日期</th>
<th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
controller支援
@RequestMapping("/{id}")
@ResponseBody //必須使用物件，jackson內部有中文轉碼，防止亂碼
public ItemCat getItemCatName(@PathVariable Long id){
return itemCatService.queryById(id);
}