共计 7215 个字符，预计需要花费 19 分钟才能阅读完成。
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 @AllArgsConstructor public class EasyUITable { private Long total; // 记录总数 private List<Item> rows; // 每页展示的记录 //1. 通过对象的 get 办法获取属性及属性的值 public String getTitle(){return "=== testGetTitle() ==="; } //2.JSON 转化为对象时, 调用 set 办法, 为属性赋值 }@RequestMapping("/testVO") @ResponseBody public 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 // 示意返回的数据是 JSON public EasyUITable findItemByPage(int page,int rows){return itemService.findItemByPage(page,rows); }v. 编辑 ItemService/Impl
@Override public 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. 编写配置类
@Configuration public 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
@Mapper public interface ItemCatMapper extends BaseMapper<ItemCat> {@Select("SELECT name FROM tb_item_cat WHERE id=#{cid}") String findCatNameByCid(int cid); }@Service public 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 @AllArgsConstructor public 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
作业：实现商品类目树形构造展现
