关于java:第四阶段笔记-Jingtaoday04

47次阅读

共计 7215 个字符，预计需要花费 19 分钟才能阅读完成。

day 04 SpringBoot – JSON

此文档是依据上课流程编写，更多细节和图片请参见刘老师的专栏

江哥的专栏

《cgb2008- 京淘 day04》

一. 实现京淘的后盾页面剖析

​ 上部，左侧，下部，右侧，中部

  1. easy-layout.jsp

    <div data-options="region:'west',title:' 鑿滃崟 ',split:true" style="width:10%;">
</div>
<div data-options="region:'center',title:' 棣栭〉'">
</div>

  2. 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>

  3. easy-table.jsp

    <div id="tt" class="easyui-tabs" data-options="region:'center',title:' 首页 '"></div>
二. 展示商品的列表

  1. 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(",");
   }
}

  2. 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]

  3. 表格数据展示

    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);

  4. 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();
    }
}
三. 实现商品格式化

  1. 格式化价格

    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);
}
  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 '未知';}
   }

  1. 实现商品分类回显

    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 中闭包概念

四. 实现商品树形构造展示

  1. 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>

  2. 商品分类业务剖析

    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;
}

  3. 新增页面剖析 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

作业：实现商品类目树形构造展现

正文完
java
发表至： java
2020-11-30
 0
关于java:循序渐进Linux-第2版pdf
关于java:保证接口的安全性开放-HTTP-API-接口签名验证
关于java:Shiro安全框架
java高并发系列-第21天java中的CAS操作java并发的基石