第四階段筆記 Jingtao_day04

時間 2020-11-30

標籤 javascript html java ajax spring json 數組緩存 tomcat 閉包欄目 JavaScript 简体版

原文原文鏈接

day 04 SpringBoot - JSON

此文檔是根據上課流程編寫，更多細節和圖片請參見劉老師的專欄javascript

江哥的專欄

《cgb2008-京淘day04》html

一. 完成京淘的後臺頁面分析

上部，左側，下部，右側，中部java

easy-layout.jspajax

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

easy-tree.jspspring

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

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