1. 实现商品后盾治理
1.1 表格数据的展示形式
1.1.1 编辑页面
`</script>-->
<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>`
1.1.2 返回值类型的阐明
属性信息: total/rows/ 属性元素
`{
"total":2000,
"rows":[{"code":"A","name":"果汁","price":"20"},
{"code":"B","name":"汉堡","price":"30"},
{"code":"C","name":"鸡柳","price":"40"},
{"code":"D","name":"可乐","price":"50"},
{"code":"E","name":"薯条","price":"10"},
{"code":"F","name":"麦旋风","price":"20"},
{"code":"G","name":"套餐","price":"100"}
]
}`
1.2 JSON 常识回顾
1.2.1 JSON 介绍
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局。它使得人们很容易的进行浏览和编写。
1.2.2 Object 对象类型
1.2.3 Array 格局
1.2.4 嵌套格局
例子:
`{"id":"100","hobbys":["玩游戏","敲代码","看动漫"],"person":{"age":"19","sex":["男","女","其余"]}}`
1.3 编辑 EasyUITablle 的 VO 对象
`package com.jt.vo;
import com.jt.pojo.Item;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.util.List;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
private Long total;
private List<Item> rows;
}`
1.4 商品列表展示
1.4.1 页面剖析
业务阐明: 当用户点击列表按钮时. 以跳转到 item-list.jsp 页面中. 会解析其中的 EasyUI 表格数据. 发动申请 url:’/item/query’
要求返回值必须满足特定的 JSON 构造, 所以采纳 EasyUITable 办法进行数据返回.
`<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.4.2 申请门路的阐明
申请门路: /item/query
参数: page=1 以后分页的页数.
rows = 20 当前锋分页行数.
当应用分页操作时, 那么会主动的拼接 2 个参数. 进行分页查问.
1.4.3 编辑 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.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
@RestController // 因为 ajax 调用 采纳 JSON 串返回
@RequestMapping("/item")
public class ItemController {
@Autowired
private ItemService itemService;
/**
* url: http://localhost:8091/item/query?page=1&rows=20
* 申请参数: page=1&rows=20
* 返回值后果: EasyUITable
*/
@RequestMapping("/query")
public EasyUITable findItemByPage(Integer page,Integer rows){return itemService.findItemByPage(page,rows);
}
}`
1.4.4 编辑 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;
/**
* 分页查问商品信息
* Sql 语句: 每页 20 条
* select * from tb_item limit 起始地位, 查问的行数
* 查问第一页
* 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]
* 查问第 N 页
* select * from tb_item limit (n-1)*rows,rows;
*
*
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {
//1. 手动实现分页操作
int startIndex = (page-1) * rows;
//2. 数据库记录
List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);
//3. 查询数据库总记录数
Long total = Long.valueOf(itemMapper.selectCount(null));
//4. 将数据库记录 封装为 VO 对象
return new EasyUITable(total,itemList);
//MP
}
}`
1.4.5 页面成果展示
1.5 参数格式化阐明
1.5.1 商品价格格式化阐明
1). 页面属性阐明
当数据在进行展示时, 会通过 formatter 关键字之后进行数据格式化调用. 具体的函数 KindEditorUtil.formatPrice 函数.
`<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice"> 价格 </th>`
2). 页面 JS 剖析
`// 格式化价格 val="数据库记录" 展示的应该是放大 100 倍的数据
formatPrice : function(val,row){return (val/100).toFixed(2);
},`
1.5.2 格式化状态信息
1). 页面标识
`<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus"> 状态 </th>`
2). 页面 JS 剖析
`// 格式化商品的状态
formatItemStatus : function formatStatus(val,row){if (val == 1){return '<span > 失常 </span>';} else if(val == 2){return '<span > 下架 </span>';} else {return '未知';}
},`
1.6 格式化叶子类目
1.6.1 页面剖析
阐明: 依据页面标识, 要在列表页面中展示的是商品的分类信息. 后端数据库只传递了 cid 的编号. 咱们应该展示的是商品分类的名称. 不便用户应用…
`<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName"> 叶子类目 </th>`
1.6.2 页面 js 剖析
`// 格式化名称 val=cid 返回商品分类名称
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;
}`
1.6.3 编辑 ItemCatPOJO 对象
`package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;
@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{@TableId(type = IdType.AUTO)
private Long id;
private Long parentId;
private String name;
private Integer status;
private Integer sortOrder;
private Boolean isParent; // 数据库进行转化
}`
1.6.4 编辑 ItemCatController
`@RestController
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* url 地址:/item/cat/queryItemName
* 参数: {itemCatId:val}
* 返回值: 商品分类名称
*/
@RequestMapping("/queryItemName")
public String findItemCatNameById(Long itemCatId){
// 依据商品分类 Id 查问商品分类对象
ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
return itemCat.getName(); // 返回商品分类的名称}
}`
1.6.5 编辑 ItemCatService
`package com.jt.service;
import com.jt.mapper.ItemCatMapper;
import com.jt.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ItemCatServiceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public ItemCat findItemCatById(Long itemCatId) {return itemCatMapper.selectById(itemCatId);
}
}`
1.6.6 页面成果展示
1.7 对于 Ajax 嵌套问题阐明
1.7.1 问题形容
当将 ajax 改为异步时, 发现用户的申请数据不能失常的响应.
`// 格式化名称 val=cid 返回商品分类名称
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName",
data:{itemCatId:val},
//cache:true, // 缓存
async:true, // 示意同步 默认的是异步的 true
dataType:"text",// 示意返回值参数类型
success:function(data){name = data;}
});
return name;
},`
1.7.2 问题剖析
商品的列表中发动 2 次 ajax 申请.
1).
`data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">`
2).ajax 申请
1.7.3 解决方案
阐明: 个别条件的下 ajax 嵌套会将外部的 ajax 设置为同步的调用. 不然可能会犹豫 url 调用的时间差导致数据展示不齐全的景象.
1.8 对于端口号占用问题
1.9 对于 common.js 引入问题
阐明: 个别会将整个页面的 JS 通过某个页面进行标识, 之后被其余的页面援用即可… 不便当前的 JS 的切换.
1). 引入 xxx.jsp 页面
2). 页面引入 JS
1.10 MybatisPlus 实现分页操作
1.10.1 编辑 ItemService
`// 尝试应用 MP 的形式进行分页操作
@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("updated");
// 临时只封装了 2 个数据 页数 / 条数
IPage<Item> iPage = new Page<>(page, rows);
//MP 传递了对应的参数, 则分页就会在外部实现. 返回分页对象
iPage = itemMapper.selectPage(iPage,queryWrapper);
//1. 获取分页的总记录数
Long total = iPage.getTotal();
//2. 获取分页的后果
List<Item> list = iPage.getRecords();
return new EasyUITable(total, list);
}`
1.10.2 编辑配置类
`@Configuration // 标识我是一个配置类
public class MybatisPlusConfig {
//MP-Mybatis 加强工具
@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 工具栏菜单阐明
2.1.1 入门案例介绍
`toolbar: [{
iconCls: 'icon-help',
handler: function(){alert("点击工具栏")}
},{
iconCls: 'icon-help',
handler: function(){alert('帮忙工具栏')}
},'-',{
iconCls: 'icon-save',
handler: function(){alert('保留工具栏')}
},{
iconCls: 'icon-add',
text: "测试",
handler: function(){alert('保留工具栏')}
}]`
2.1.2 表格中的图标款式
页面构造:
2.2 页面弹出框成果
2.2.1 页面弹出框成果展示
`$("#btn1").bind("click",function(){
// 留神必须选中某个 div 之后进行弹出框展示
$("#win1").window({
title:"弹出框",
width:400,
height:400,
modal:false // 这是一个模式窗口，只能点击弹出框，不容许点击别处
})
})`
2.3 树形构造展示
2.3.1 商品分类目录构造
阐明: 个别电商网站商品分类信息个别是三级目录.
表设计: 个别在展示父子级关系时, 个别采纳 parent_id 的形式展示目录信息.
2.3.2 树形构造入门 -html 构造
`<script type="text/javascript">
/* 通过 js 创立树形构造 */
$(function(){$("#tree").tree({
url:"tree.json", // 加载近程 JSON 数据
method:"get", // 申请形式 get
animate:false, // 示意显示折叠端口动画成果
checkbox:true, // 表述复选框
lines:false, // 示意显示连接线
dnd:true, // 是否拖拽
onClick:function(node){ // 增加点击事件
// 控制台
console.info(node);
}
});
})
</script>`
2.3.3 树形构造入门 -JSON 串构造
一级树形构造的标识.
“[{“id”:“3”,“text”:“吃鸡游戏”,“state”:“open/closed”},{“id”:“3”,“text”:“吃鸡游戏”,“state”:“open/closed”}]”
2.3.4 VO 对象封装 -EasyUITree
`package com.jt.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.io.Serializable;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {
private Long id; // 节点 ID 信息
private String text; // 节点的名称
private String state; // 节点的状态 open 关上 closed 敞开
}`
2.4 商品分类展示
2.4.1 页面剖析
`<tr>
<td> 商品类目:</td>
<td>
<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat"> 抉择类目 </a>
<input type="hidden" name="cid" style="width: 280px;"></input>
</td>
</tr>`
2.4.2 页面 JS 标识
页面 URL 标识:
2.4.3 编辑 ItemCatController
`/**
* 业务需要: 用户通过 ajax 申请, 动静获取树形构造的数据.
* url: http://localhost:8091/item/cat/list
* 参数: 只查问一级商品分类信息 parentId = 0
* 返回值后果: List<EasyUITree>
*/
@RequestMapping("/list")
public List<EasyUITree> findItemCatList(){
Long parentId = 0L;
return itemCatService.findItemCatList(parentId);
}`
2.4.4 编辑 ItemCatService
`/**
* 返回值: List<EasyUITree> 汇合信息
* 数据库查问返回值: List<ItemCat>
* 数据类型必须手动的转化
* @param parentId
* @return
*/
@Override
public List<EasyUITree> findItemCatList(Long parentId) {
//1. 查询数据库记录
QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("parent_id", parentId);
List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);
//2. 须要将 catList 汇合转化为 voList 一个一个转化
List<EasyUITree> treeList = new ArrayList<>();
for(ItemCat itemCat :catList){Long id = itemCat.getId();
String name = itemCat.getName();
// 如果是父级 应该 closed 如果不是父级 应该 open
String state = itemCat.getIsParent()?"closed":"open";
EasyUITree tree = new EasyUITree(id, name, state);
treeList.add(tree);
}
return treeList;
}`
2.4.5 页面成果展示