Jingtao day05

Time:2021-12-2
  1. Complete commodity background management

============

1.1 presentation of tabular data

1.1.1 edit page

`</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 description of return value type

Attribute information: total / rows / attribute element

`{
    "total":2000,
    "rows":[
        {"code": "a", "name": "juice", "price": "20"},
        {"code": "B", "name": "hamburger", "price": "30"},
        {"code": "C", "name": "chicken fillet", "price": "40"},
        {"code": "d", "name": "coke", "price": "50"},
        {"code": "e", "name": "French fries", "price": "10"},
        {"code": "F", "name": "Mai whirlwind", "price": "20"},
        {"code": "g", "name": "package", "price": "100"}
    ]
}`

1.2 JSON knowledge review

1.2.1 JSON introduction

JSON (JavaScript object notation) is a lightweight data exchange format. It makes it easy for people to read and write.

1.2.2 object type

Jingtao day05

1.2.3 array format

Jingtao day05

1.2.4 nested format

Jingtao day05
example:

`{"Id": "100", "hobbys": ["playing games", "tapping code", "watching animation"], "person": {"age": "19", "sex": ["male", "female", "other"]}}` 

*   1

1.3 edit the VO object of easyuitablle

`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 product list display

1.4.1 page analysis

Business description: when the user clicks the list button, it will jump to the item-list.jsp page. The easyUI table data will be parsed. Initiate the request URL: ‘/ item / query’
It is required that the return value must meet the specific JSON structure, so the easyuitable method is used for data return

`<table class="easyui-datagrid" id="itemList" 
       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" > item ID < / th >
            < th data options = "field: 'title', width: 200" > item title < / th >
            < th data options = "field: 'CID', width: 100, align: 'center', formatter: kindeditorutil. Finditemcatname" > leaf category < / th >
            < th data options = "field: 'sellpoint', width: 100" > selling point < / th >
            < th data options = "field: 'price', width: 70, align: 'right', formatter: kindeditorutil. Formatprice" > price < / th >
            < th data options = "field: 'num', width: 70, align: 'right'" > inventory quantity < / th >
            < th data options = "field: 'barcode', width: 100" > barcode < / th >
            < th data options = "field: 'status', width: 60, align:' center ', format: kindeditorutil. Formatemstatus" > status < / th >
            < th data options = "field: 'created', width: 130, align: 'center', format: kindeditorutil. Formatdatetime" > creation date < / th >
            < th data options = "field: 'updated', width: 130, align: 'center', format: kindeditorutil. Formatdatetime" > Update Date < / th >
        </tr>
    </thead>
</table>`

1.4.2 description of request path

Request path: / item / query
Parameter: page = 1 the number of pages currently paged
Rows = 20 the number of rows to be paged
When paging operation is used, two parameters will be spliced automatically for paging query
Jingtao day05

1.4.3 edit 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 // because Ajax calls are returned using JSON strings
@RequestMapping("/item")
public class ItemController {
    
    @Autowired
    private ItemService itemService;

    /**
     * url: http://localhost:8091/item/query?page=1&rows=20
     *Request parameters: page = 1 & rows = 20
     *Return value result: easyuitable
     */
    @RequestMapping("/query")
    public EasyUITable findItemByPage(Integer page,Integer rows){

        return itemService.findItemByPage(page,rows);
    }

}`

1.4.4 edit 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;

    /**
     *Query product information by page
     *SQL statements: 20 per page
     *         select * from tb_ Item limit starting position, number of rows to query
     *Query first page
     *        select * from tb_item limit 0,20;     [0-19]
     *Query page 2
     *         select * from tb_item limit 20,20;    [20,39]
     *Query page 3
     *          select * from tb_item limit 40,20;    [40,59]
     *Query page n
     *         select * from tb_item limit (n-1)*rows,rows;
     *
     *
     * @param rows
     * @return
     */
    @Override
    public EasyUITable findItemByPage(Integer page, Integer rows) {
        //1. Manually complete the paging operation
        int startIndex = (page-1) * rows;
        //2. Database records
        List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);
        //3. Total records of query database
        Long total = Long.valueOf(itemMapper.selectCount(null));
        //4. Encapsulate database records as VO objects
        return new EasyUITable(total,itemList);

        //MP
    }
}`

1.4.5 page effect display

Jingtao day05

1.5 parameter format description

1.5.1 commodity price format description

1) . page attribute description
When data is presented, it will be called after the format keyword. The specific function is kindeditorutil.formatprice function

`< th data options = "field: 'price', width: 70, align: 'right', formatter: kindeditorutil. Formatprice" > price < / th >` 

*   1

2) Page JS analysis

`//Formatted price Val = "database record" should show data reduced by 100 times
    formatPrice : function(val,row){
        return (val/100).toFixed(2);
    },`

1.5.2 format status information

1) . page identification

`< th data options = "field: 'status', width: 60, align:' center ', format: kindeditorutil. Formatemstatus" > status < / th >` 

*   1

2) Page JS analysis

`//Format the status of the item
    formatItemStatus : function formatStatus(val,row){
        if (val == 1){
            Return '< span > normal' < / span > ';
        } else if(val == 2){
            Return '< span > off the shelf < / span >';
        } else {
            Return 'unknown';
        }
    },`

1.6 formatted leaf categories

1.6.1 page analysis

Note: according to the page ID, the classification information of goods should be displayed in the list page. The back-end database only passes the CID number. What we should display is the name of commodity classification. It is convenient for users to use

`< th data options = "field: 'CID', width: 100, align: 'center', formatter: kindeditorutil. Finditemcatname" > leaf category < / th >` 

*   1

1.6.2 page JS analysis

`//Format name Val = CID return commodity classification name
    findItemCatName : function(val,row){
        var name;
        $.ajax({
            type:"get",
            url:"/item/cat/queryItemName",  //
            data:{itemCatId:val},
            Cache: true, // cache
            Async: false, // indicates synchronization. The default is asynchronous true
            Datatype: "text", // indicates the return value parameter type
            success:function(data){
                name = data;
            }
        });
        return name;
    }`

1.6.3 edit itemcatpojo object

`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;  // Database conversion

}`

1.6.4 edit itemcatcontroller

`@RestController
@RequestMapping("/item/cat")
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;

    /**
     *URL address: / item / cat / queryitemname
     *Parameter: {itemcatid: Val}
     *Return value: commodity classification name
     */
    @RequestMapping("/queryItemName")
    public String findItemCatNameById(Long itemCatId){

        //Query commodity classification object by commodity classification ID
        ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
        return itemCat.getName();   // Returns the name of the product category
    }

}`

1.6.5 edit 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 page effect display

Jingtao day05

1.7 description of Ajax nesting

1.7.1 problem description

When AJAX is changed to asynchronous, it is found that the user’s request data cannot respond normally

`//Format name Val = CID return commodity classification name
    findItemCatName : function(val,row){
        var name;
        $.ajax({
            type:"get",
            url:"/item/cat/queryItemName",
            data:{itemCatId:val},
            //Cache: true, // cache
            Async: true, // indicates synchronization. The default is asynchronous true
            Datatype: "text", // indicates the return value parameter type
            success:function(data){
                name = data;
            }
        });
        return name;
    },`

Jingtao day05

1.7.2 problem analysis

Initiate 2 Ajax requests in the list of products
1).

`data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">` 

*   1

2) . Ajax request
Jingtao day05

1.7.3 solutions

Note: under normal conditions, AJAX nesting will set the internal Ajax as synchronous call. Otherwise, the time difference of URL call may be hesitant, resulting in incomplete data display

Jingtao day05

1.8 port number occupation

Jingtao day05
Jingtao day05

1.9 introduction of common.js

Note: generally, the JS of the whole page will be identified through a page and then referenced by other pages… To facilitate the switching of JS in the future

1) . import xxx.jsp page
Jingtao day05
2) . page introduction JS
Jingtao day05

1.10 mybatisplus completes paging operation

1.10.1 edit itemservice

`//Try paging using MP
    @Override
    public EasyUITable findItemByPage(Integer page, Integer rows) {
        QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("updated");
        //Only 2 data pages / pieces are encapsulated temporarily
        IPage<Item> iPage = new Page<>(page, rows);
        //If MP passes the corresponding parameters, the paging will be completed internally. Return the paging object
        iPage = itemMapper.selectPage(iPage,queryWrapper);
        //1. Get the total number of records paged
        Long total = iPage.getTotal();
        //2. Get paging results
        List<Item> list = iPage.getRecords();
        return new EasyUITable(total, list);
    }`

1.10.2 edit configuration class

`@Configuration // identifies me as a configuration class
public class MybatisPlusConfig {

    //MP mybatis enhancement tool
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        //After setting the requested page to be larger than the maximum page, true will be called back to the home page, false will continue to request, and the default is false
        // paginationInterceptor.setOverflow(false);
        //Set the maximum number of single page restrictions, 500 by default, - 1 unlimited
        // paginationInterceptor.setLimit(500);
        //Turn on the join optimization of count, only for some left joins
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }

}`

2. New products

2.1 toolbar menu description

2.1.1 introduction to introductory cases

`toolbar: [{          
                  iconCls: 'icon-help',
                  Handler: function() {alert ("click the Toolbar")}      
                  },{
                  iconCls: 'icon-help',          
                  Handler: function() {alert ('help Toolbar ')}      
                  },'-',{
                      iconCls: 'icon-save',
                      Handler: function() {alert ('save Toolbar ')}
                  },{
                      iconCls: 'icon-add',
                      Text: "test",
                      Handler: function() {alert ('save Toolbar ')}
                  }]`

2.1.2 icon styles in tables

Jingtao day05

Jingtao day05
Page structure:
Jingtao day05

2.2 page pop-up effect

2.2.1 display of page pop-up box effect

`$("#btn1").bind("click",function(){

            //Note that a div must be selected to display a pop-up box
            $("#win1").window({
                Title: "pop up box",
                width:400,
                height:400,
                Modal: false // this is a mode window. You can only click the pop-up box. You can't click anywhere else
            })
        })`

2.3 tree structure display

2.3.1 commodity classification directory structure

Note: the commodity classification information of general e – commerce websites is generally a three – level directory
Table design: parent is generally used when displaying parent-child relationships_ Display directory information by ID
Jingtao day05

2.3.2 introduction to tree structure – HTML structure

`<script type="text/javascript">
    /*Create a tree structure through JS*/
    $(function(){
        $("#tree").tree({
            URL: "tree. JSON", // load remote JSON data
            Method: "get", // request method: get
            Animate: false, // indicates that the folding port animation effect is displayed
            Checkbox: true, // indicates the checkbox
            Lines: false, // indicates that the connection line is displayed
            DND: true, // drag
            Onclick: function (node) {// add a click event
                
                //Console
                console.info(node);
            }
        });
    })
</script>`

2.3.3 introduction to tree structure – JSON string structure

Identification of the first level tree structure
“[{” Id “:” 3 “,” text “:” chicken eating game “,” state “:” open “/closed”}, {“Id”: “3”, “text”: “chicken eating game”, “state”: “open”/closed”}]”

2.3.4 VO object encapsulation 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;        // Node ID information
    private String text;    // Name of the node
    private String state;   // The status of the node is open closed
}`

2.4 commodity classification display

2.4.1 page analysis

`<tr>
                <td>Commodity category:</td>
                <td>
                    < a href = "javascript: void (0)" class = "easyUI LinkButton selectitemcat" > select category</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>
                </td>
            </tr>`

2.4.2 page JS identification

Jingtao day05
Page URL ID:
Jingtao day05

2.4.3 editing itemcatcontroller

`/**
     *Business requirements: users can dynamically obtain tree data through Ajax requests
     * url:  http://localhost:8091/item/cat/list
     *Parameter: only query level 1 commodity classification information. Parentid = 0
     *Return value result: List < easyuitree >
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(){

        Long parentId = 0L;
        return itemCatService.findItemCatList(parentId);
    }`

2.4.4 edit itemcatservice

`/**
     *Return value: List < easyuitree > set information
     *Database query return value: List < itemcat >
     *Data types must be converted manually
     * @param parentId
     * @return
     */
    @Override
    public List<EasyUITree> findItemCatList(Long parentId) {
        //1. Query database records
        QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", parentId);
        List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);

        //2. Catlist set needs to be converted to volist one by one
        List<EasyUITree> treeList = new ArrayList<>();
        for(ItemCat itemCat :catList){
            Long id = itemCat.getId();
            String name = itemCat.getName();
            //If it is the parent, it should be closed. If not, it should be open
            String state = itemCat.getIsParent()?"closed":"open";
            EasyUITree tree = new EasyUITree(id, name, state);
            treeList.add(tree);
        }
        return treeList;
    }`

2.4.5 page effect display

Jingtao day05