第四階段 day9.26 Spring Boot

時間  2020-09-29
標籤 第四 階段 day9.26 day spring boot 欄目 Spring 简体版
原文   原文鏈接
  1. 完成商品後臺管理

============javascript

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/屬性元素html

`{
    "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) 是一種輕量級的數據交換格式。它使得人們很容易的進行閱讀和編寫。java

1.2.2 Object對象類型

在這裏插入圖片描述

1.2.3 Array格式

在這裏插入圖片描述

1.2.4 嵌套格式

在這裏插入圖片描述
例子:node

`{"id":"100","hobbys":["玩遊戲","敲代碼","看動漫"],"person":{"age":"19","sex":["男","女","其餘"]}}` 

*   1

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方法進行數據返回.web

`<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個參數.進行分頁查詢.
在這裏插入圖片描述ajax

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函數.spring

`<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th>` 

*   1

2).頁面JS分析sql

`// 格式化價格  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>` 

*   1

2).頁面JS分析json

`// 格式化商品的狀態
    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

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">` 

*   1

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 頁面效果展示

在這裏插入圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程