1.京淘商品后臺管理實作
1.1 商品串列展現
1.1.1 商品POJO物件
package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;
import lombok.experimental.Accessors;
@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON轉化時忽略未知屬性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
@TableId(type=IdType.AUTO) //主鍵自增
private Long id; //商品id
private String title; //商品標題
private String sellPoint; //商品賣點資訊
private Long price; //商品價格 double精度問題 num *100 /100 long
private Integer num; //商品數量
private String barcode; //條形碼
private String image; //商品圖片資訊 1.jpg,2.jpg,3.jpg
private Long cid; //表示商品的分類id
private Integer status; //1正常，2下架
//為了滿足頁面呼叫需求,添加get方法
public String[] getImages(){
return image.split(",");
}
}
1.1.2 表格資料頁面結構
<table class="easyui-datagrid" id="itemList" title="商品串列"
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,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,align:'center',formatter:KindEditorUtil.findItemCatName">葉子類目</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>
1.1.3 請求URL地址
說明:如果采用UI框架并且添加了分頁插件,則會自動的形成如下的URL請求地址
1.1.4 編輯ItemController
package com.jt.controller;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.jt.service.ItemService;
import org.springframework.web.bind.annotation.RestController;
@RestController //回傳值都是JSON資料
@RequestMapping("/item")
public class ItemController {
@Autowired
private ItemService itemService;
/**
* 業務需求:
* 以分頁的形式查詢商品串列資訊.
* 業務介面檔案:
* url地址: http://localhost:8091/item/query?page=1&rows=20
* 引數資訊: page 當前頁數 rows 每頁展現的行數
* 回傳值: EasyUITable物件
* 方法1: 手寫sql方式實作分頁
* 方法2: 利用MP方式實作分頁
*/
@RequestMapping("/query")
public EasyUITable findItemByPage(int page,int rows){
return itemService.findItemByPage(page,rows);
}
}
1.1.5 編輯ItemService
package com.jt.service;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.jt.mapper.ItemMapper;
import java.util.List;
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
/*
SELECT * FROM tb_item LIMIT 0, 20 /*第一頁 0-19
SELECT * FROM tb_item LIMIT 20,20 /*第二頁 20-39
SELECT * FROM tb_item LIMIT 40,20 /*第三頁 40-59
SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS 40-59*/
/**
* 1.后端查詢資料庫記錄
* 2.將后端資料通過業務呼叫轉化為VO物件
* 3.前端通過VO物件的JSON進行資料的決議
*
*執行的sql:
* select * from tb_item order by updated desc LIMIT 0, 20
* @param page
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(int page, int rows) {
//1.total 獲取資料庫總記錄數
long total = itemMapper.selectCount(null);
//2.rows 商品分頁查詢的結果
int startNum = (page-1)*rows;
List<Item> itemList = itemMapper.findItemByPage(startNum,rows);
//3.將回傳值結果封裝
return new EasyUITable(total,itemList);
}
}
1.1.6 編輯ItemMapper
手動編輯分頁操作
public interface ItemMapper extends BaseMapper<Item>{
//注意事項: 以后寫sql陳述句時 欄位名稱/表名注意大小寫問題.
@Select("SELECT * FROM tb_item ORDER BY updated DESC LIMIT #{startNum}, #{rows}")
List<Item> findItemByPage(int startNum, int rows);
}
1.2 MybatisPlus實作分頁查詢
1.2.1 編輯業務呼叫
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
@Override
public EasyUITable findItemByPage(int page, int rows) {
//1.需要使用MP的方式進行分頁
IPage<Item> iPage = new Page<>(page,rows);
QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("updated");
//MP通過分頁操作將分頁的相關資料統一封裝到IPage物件中
iPage = itemMapper.selectPage(iPage,queryWrapper);
return new EasyUITable(iPage.getTotal(),iPage.getRecords());
}
}
1.2.2 編輯MybatisPlus配置類
說明:在jt-common中添加MP的組態檔
package com.jt.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration //標識配置類
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 設定請求的頁面大于最大頁后操作， true調回到首頁，false 繼續請求 默認false
// paginationInterceptor.setOverflow(false);
// 設定最大單頁限制數量，默認 500 條，-1 不受限制
// paginationInterceptor.setLimit(500);
// 開啟 count 的 join 優化,只針對部分 left join
paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}
2.商品分類目錄實作
2.1 封裝POJO物件
@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{
@TableId(type = IdType.AUTO)
private Long id; //主鍵ID
private Long parentId; //父級ID
private String name; //分類名稱
private Integer status; //狀態
private Integer sortOrder; //排序號
private Boolean isParent; //是否為父級
}
2.2 頁面JS引入程序
2.2.1 引入JS/CSS樣式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 自己實作業務邏輯 -->
<script type="text/javascript" src="/js/common.js"></script>
2.2.2 引入common.jsp
2.3 資料格式化
2.3.1 格式化價格
1.頁面標簽
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th>
2.頁面JS
formatPrice : function(val,row){
return (val/100).toFixed(2);
},
2.3.2 格式化狀態
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th>
// 格式化商品的狀態
formatItemStatus : function formatStatus(val,row){
if (val == 1){
return '<span style="color:green;">正常</span>';
} else if(val == 2){
return '<span style="color:red;">下架</span>';
} else {
return '未知';
}
},
2.4 格式化商品分類目錄
2.4.1 頁面結構分析
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">葉子類目</th>
//格式化名稱
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;
},
2.4.2 編輯ItemCatController
@RestController //要求回傳JSON資料
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 業務: 根據商品分類的ID,查詢商品分類的名稱
* url: /item/cat/queryItemName
* 引數: itemCatId 商品分類id
* 回傳值: 商品分類名稱
*/
@RequestMapping("queryItemName")
public String findItemCatName(Long itemCatId){
return itemCatService.findItemCatName(itemCatId);
}
}
2.4.2 編輯ItemCatService
package com.jt.service;
import com.jt.mapper.ItemCatMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ItemCatServiceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public String findItemCatName(Long itemCatId) {
return itemCatMapper.selectById(itemCatId).getName();
}
}
2.4.3 頁面效果展現
2.4.3 ajax嵌套問題
說明: 如果在ajax內部再次嵌套ajax請求,則需要將內部的ajax請求設定為同步狀態.
俗語: 趕緊走吧 趕不上二路公交車了…
核心原因: 頁面需要重繪2次都是只重繪一次.
2.5 關于頁面工具列說明(看懂即可)
1.頁面呼叫
<table class="easyui-datagrid" id="itemList" title="商品串列"
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
2.定義工具列
var toolbar = [{
text:'新增',
iconCls:'icon-add',
handler:function(){
//.tree-title 查找頁面中class型別為tree-title的元素
//:contains('新增商品') 在所有的class的型別中查找檔案元素為"新增商品"的元素
//parent() 選中元素的父級元素
//.click() 執行點擊的動作
$(".tree-title:contains('新增商品')").parent().click();
}
},{.....}]
2.5.1 jQuery基本用法
1.選擇器 在整個html頁面 根據某些特定的標識 準確的定位元素的位置.
1. Id選擇器 $("#元素的Id")
2. 元素(標簽)選擇器 $(“tr”)
3. 類選擇器 $(".class的名稱") [{},{},{}]
3 商品分類目錄樹形結構展現
3.1 ItemCat表結構設定
問題分析: 商品分類資訊一般分為3級. 問題: 如何確定父子級關系的呢??
答: 通過定義父級的欄位實作
3.2 3級表資料的分析
說明:通過parentId 根據父級的ID查詢所有的子級資訊. 當查詢一級選單時parentId=0;
/*查詢一級分類資訊 父級ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=0;
/*查詢二級分類資訊 父級ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=495;
/*查詢三級分類資訊 父級ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=529;
3.3 EasyUI中樹形結構說明
1.頁面JS
$("#tree").tree({
url:"tree.json", //加載遠程JSON資料
method:"get", //請求方式 POST
animate:false, //表示顯示折疊埠影片效果
checkbox:true, //表述復選框
lines:false, //表示顯示連接線
dnd:true, //是否拖拽
onClick:function(node){ //添加點擊事件
//控制臺
console.info(node);
}
});
2.回傳值說明
[
{
"id":"1",
"text":"吃雞游戲",
"state":"closed"
},
{
"id":"1",
"text":"吃雞游戲",
"state":"closed"
}
]
3.4 封裝樹形結構VO物件
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {
private Long id; //節點ID
private String text; //節點名稱
private String state; //節點狀態
}
3.5 頁面JS結構說明
3.6 異步樹加載說明
樹控制元件讀取URL，子節點的加載依賴于父節點的狀態，當展開一個封閉的節點，如果節點沒有加載子節點，它將會把節點id的值作為http請求引數并命名為’id’，通過URL發送到服務器上面檢索子節點，
3.7 編輯ItemCatController
/**
* 業務: 實作商品分類的查詢
* url地址: /item/cat/list
* 引數: id: 默認應該0 否則就是用戶的ID
* 回傳值結果: List<EasyUITree>
*/
@RequestMapping("/list")
public List<EasyUITree> findItemCatList(Long id){
Long parentId = (id==null)?0:id;
return itemCatService.findItemCatList(parentId);
}
3.8 編輯ItemCatService
@Override
public List<EasyUITree> findItemCatList(Long parentId) {
//1.準備回傳值資料
List<EasyUITree> treeList = new ArrayList<>();
//思路.回傳值的資料從哪來? VO 轉化 POJO資料
//2.實作資料庫查詢
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("parent_id",parentId);
List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);
//3.實作資料的轉化 catList轉化為 treeList
for (ItemCat itemCat : catList){
long id = itemCat.getId(); //獲取ID值
String text = itemCat.getName(); //獲取商品分類名稱
//判斷:如果是父級 應該closed 如果不是父級 則open
String state = itemCat.getIsParent()?"closed":"open";
EasyUITree easyUITree = new EasyUITree(id,text,state);
treeList.add(easyUITree);
}
return treeList;
}
3.9頁面效果展現
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/203134.html
標籤：AI