day 04 SpringBoot - JSON
此文档是依据上课流程编写，更多细节和图片请参见刘老师的专栏
江哥的专栏
《cgb2008-京淘day04》
一. 实现京淘的后盾页面剖析
上部，左侧，下部，右侧，中部
easy-layout.jsp
<div data-options="region:'west',title:'鑿滃崟',split:true" style="width:10%;"></div><div data-options="region:'center',title:'棣栭〉'"></div>easy-tree.jsp
<ul class="easyui-tree"> <li> <span>商品治理</span> <ul> <li>商品查问</li> <li>商品新增</li> <li> <span>我是三级biaoqian</span> <ul> <li>一</li> <li>一</li> <li>一</li> </ul> </li> </ul> </li></ul>easy-table.jsp
<div id="tt" class="easyui-tabs" data-options="region:'center',title:'首页'"></div>
二. 展示商品的列表
Item表的剖析
@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; //商品价格 Long > dubbo 0.9999998+0.00000002=0.9999999 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(","); }}UI列表的展示
i. easyui-6-datagrid.html
ii. JSON阐明
JSON是一种简略的数据交换格局。JavaScript Object Notation，实质是一个string类型的字符串。
iii. JSON的根本数据类型
"名称/值"对的无序汇合：对象 {"key1":value1, "key2":value2, ...}
"值"的有序汇合：数组 [value1, vale2, ...]
值能够是双引号引起来的字符串，number，null，对象等，能够嵌套
{id:1,name:"tomcat"}[1,2,3,"打游戏","写代码"]{ "id":1, "name":"张三", "hobbys":["敲代码","打游戏","喜爱"], "method":[ { "type":"火系", "name":"三昧真火" }, { "type":"水系", "name":"大海无穷"} ]}{"a":{"aa":{"aaa":{"aaaa":null,"aaab":null},"aab":null},"ab":null},"b":null}[[[[[null,null],null],null],null],null]表格数据展示
i. JSON构造
{ "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"} ]}ii. 编写EasyUITable vo对象
对象转化为JSON利用的是get办法, JSON转化为对象时用set办法
@Data@Accessors(chain = true)@NoArgsConstructor@AllArgsConstructorpublic class EasyUITable { private Long total; //记录总数 private List<Item> rows; //每页展示的记录 //1.通过对象的get办法获取属性及属性的值 public String getTitle(){ return "=== testGetTitle() ==="; } //2.JSON转化为对象时,调用set办法,为属性赋值}@RequestMapping("/testVO")@ResponseBodypublic EasyUITable testVO(){ Item item = new Item(); item.setId(1000L).setTitle("饮水机").setPrice(200L); Item item2 = new Item(); item.setId(2000L).setTitle("电冰箱").setPrice(300L); List<Item> rows = new ArrayList<>(); rows.add(item); rows.add(item2); return new EasyUITable(2000L,rows);}iii. 表格页面剖析
当增加了分页插件之后，当ajax解析时会主动拼接参数
iv. 编辑ItemController
/* 业务:分页查问商品信息 url: http://localhost:8091/item/query?page=1&rows=20 参数: page=1,rows=2 返回值: EasyUITable*/@RequestMapping("/query")@ResponseBody //示意返回的数据是JSONpublic EasyUITable findItemByPage(int page,int rows){ return itemService.findItemByPage(page,rows);}v. 编辑ItemService/Impl
@Overridepublic EasyUITable findItemByPage(int page, int rows) { long total = itemMapper.selectCount(null); //1.手写分页 //SQL: SELECT * FROM tb_item LIMIT 起始地位(page-1)rows,查问条数rows int startIndex = (page-1)*rows; List<Item> itemList = itemMapper.findItemsByPage(startIndex,rows);}vi. 编辑ItemMapper
@Select("SELECT * FROM tb_item " + "ORDER BY updated DESC " + "LIMIT #{startIndex},#{rows}")List<Item> findItemsByPage(int startIndex, int rows);MyBatisPlus实现分页
i. 编辑ItemServiceImpl
//2.MybatisPlus分页IPage mpPage = new Page(page,rows);QueryWrapper<Item> queryWrapper = new QueryWrapper<>();queryWrapper.orderByDesc("updated");mpPage = itemMapper.selectPage(mpPage,queryWrapper );total = mpPage.getTotal(); //获取记录总数List<Item> itemList = mpPage.getRecords(); //获取查问当前页return new EasyUITable(total,itemList);ii. 编写配置类
@Configurationpublic class MyBatisPlusConfig { //将分页拦截器交给spring容器进行治理 @Bean public PaginationInterceptor paginationInterceptor(){ return new PaginationInterceptor(); }}
三. 实现商品格式化
格式化价格
i. 页面JS阐明
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>ii. 格式化代码
/** * formatter:KindEditorUtil.formatPrice(1300000,1) * 近程核心:查看common.js/43行代码,如何格式化价格?? */// 格式化价格formatPrice : function(val,row){ return (val/100).toFixed(2);}- 格式化状态
i. 页面JS阐明
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>ii. 格式化代码
// 格式化商品的状态formatItemStatus : function formatStatus(val,row){ if (val == 1){ return '失常'; } else if(val == 2){ return '<span style="color:red;">下架</span>'; } else { return '未知'; } }实现商品分类回显
i. 页面JS阐明
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>ii. 业务需要
当用户展示列表数据时，要求将商品类型的信息进行展示。依据cid查问商品类型信息进行展示。
iii. 编辑common.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;}iv. 编辑ItemCat.java
@Data@Accessors(chain = true)@TableName("tb_item_cat")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;}v. 编辑ItemCatController/ItemCatService/ItemCatMapper
@Mapperpublic interface ItemCatMapper extends BaseMapper<ItemCat> { @Select("SELECT name FROM tb_item_cat WHERE id=#{cid}") String findCatNameByCid(int cid);}@Servicepublic class ItemCatServiceImpl implements ItemCatService{ @Autowired private ItemCatMapper itemCatMapper; @Override public String findCatNameByCid(int cid) { return itemCatMapper.findCatNameByCid(cid); }}public interface ItemCatService { String findCatNameByCid(int cid);}@RestController@RequestMapping("/item/cat")public class ItemCatController { @Autowired private ItemCatService itemCatService; @RequestMapping("/queryItemName") public String findCatNameByCid(int itemCatId){ return itemCatService.findCatNameByCid(itemCatId); }}vi. Ajax嵌套问题
因为页面中发动了两次ajax申请，并且这两次ajax申请是嵌套的关系。第一次获取表格数据，而后对页面进行刷新。第二次获取类目信息。默认条件下ajax申请时异步执行的，这就会导致第二次申请返回时，第一次申请曾经先走过了须要数据的地位，不会将数据填充到所须要的地位。起因是页面只刷新了一次。
解决方案：如果遇到了ajax的嵌套问题，则个别将内层的ajax设置为同步的状态即可。这样在第二次申请没有返回后果时，第一次申请停下来期待。
vii. 扩大：JS中闭包概念
四. 实现商品树形构造展示
common.js的依赖问题
i. 在index.jsp中引入了其它页面
<jsp:include page="/commons/common-js.jsp"></jsp:include>ii. 在common-js.jsp中引入common.js
<!-- 本人实现业务逻辑 --><script type="text/javascript" src="/js/common.js"></script>商品分类业务剖析
i. 分级阐明
个别状况下商品分类分为三级
ii. 表构造的设计
个别实用于有父子级关系的数据，增加int parentId字段
一级商品分类 SELECT * FROM tb_item_cat WHERE parent_id=0
二级商品分类 SELECT * FROM tb_item_cat WHERE parent_id=74(一级id)
三级商品分类 SELECT * FROM tb_item_cat WHERE parent_id=75(二级id)
iii. 树形构造
[ { "id":"1", "text":"英雄联盟", "iconCls":"icon-save", "children":[ { "id":"4", "text":"沙漠死神" },{ "id":"5", "text":"德玛西亚" },{ "id":"6", "text":"诺克萨斯之手" }, { "id":"7", "text":"蛮族之王" }, { "id":"8", "text":"孙悟空" } ], "state":"open" },{ "id":"2", "text":"王者光荣", "children":[ { "id":"10", "text":"阿科" },{ "id":"11", "text":"吕布" },{ "id":"12", "text":"陈咬金" },{ "id":"13", "text":"典韦" } ], "state":"closed" }, { "id":"3", "text":"吃鸡游戏", "iconCls":"icon-save" }]iv. JSON构造
[{"id":100,"text":"tomcat","state":"open/closed"},{},{}] 节点的数组
v. 编写EasyUITree vo对象
@Data@Accessors(chain = true)@NoArgsConstructor@AllArgsConstructorpublic class EasyUITree { //{"id":100,"text":"tomcat","state":"open/closed"} private Integer id; private String text; private String state;}新增页面剖析item-add.jsp
i. 页面的流转过程
1) 点击商品新增按钮；2) 发动申请 /page/item-add；3) 申请被IndexController中的restFul拦挡；4) 实现页面跳转 /WEB/INF/views/item-add.jsp
ii. 页面构造剖析
<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">抉择类目</a>iii. 编辑ItemCatController