In the third stage, day05 completes the background management of commodities

Time:2020-11-12

1. Complete the background management of commodities

1.1 presentation of table 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 ":" Hamburg "," 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 ":" wheat whirlwind "," price ":" 20 "},
        {code ":" g "," name ":" package "," price ":" 100 "}
    ]
}`

1.2 review of JSON knowledge

Introduction to JSON

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

1.2.2 object object type

In the third stage, day05 completes the background management of commodities

Array format

In the third stage, day05 completes the background management of commodities

1.2.4 nested format

In the third stage, day05 completes the background management of commodities
example:

`{"Id": "100", "hobbys": ["playing games", "Typing Code", "watching anime"], "person": {"age": "19", "sex": ["male", "female", "other"]}}`

1.3 edit the VO object of easyiuitablle

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

1.4.1 page analysis

Business description: when users click the list button. To jump to item- list.jsp Page. The easyUI table data in the page will be parsed. Request URL: ‘/ item / query’
It is required that the return value must satisfy the specific JSON structure, so the easyiuitable 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 "> Product ID < / th >
            <th data-options="field:'title', width:200 "> Product title < / th >
            <th data-options="field:'cid', width:100 ,align:'center', formatter:KindEditorUtil.findItemCatName "> leaf class < / th >
            <th data-options="field:'sellPoint', width:100 "> selling points < / 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', formatter:KindEditorUtil.formatItemStatus "> status < / th >
            <th data-options="field:'created', width:130 ,align:'center', formatter:KindEditorUtil.formatDateTime "> creation date < / th >
            <th data-options="field:'updated', width:130 ,align:'center', formatter:KindEditorUtil.formatDateTime "> Update Date < / th >
        </tr>
    </thead>
</table>`

1.4.2 description of request path

Request path / item / query
Parameter: page = 1 the page number of the current page
Rows = 20 the number of rows in front page
When paging operation is used, the two parameters will be spliced automatically for paging query
In the third stage, day05 completes the background management of commodities

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 with JSON string
@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_ The starting position of item limit, the number of rows to be queried
     *Query page 1
     *        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. Complete paging operation manually
        int startIndex = (page-1) * rows;
        //2. Database records
        List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);
        //3. Query the total number of records in the 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

In the third stage, day05 completes the background management of commodities

1.5 parameter format description

1.5.1 description of commodity price format

1) . page property description
When the data is displayed, the data format call will be made after the formatter keyword. Specific functions KindEditorUtil.formatPrice Function

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

2) . page JS analysis

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

1.5.2 format status information

1) . page ID

`<th data-options="field:'status', width:60 ,align:'center', formatter:KindEditorUtil.formatItemStatus "> status < / th >`

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 shelf < / span >';
        } else {
            Return 'unknown';
        }
    },`

1.6 format leaf category

1.6.1 page analysis

Description: according to the page ID, the list page shows the commodity classification information. The back-end database only passes the CID number

`<th data-options="field:'cid', width:100 ,align:'center', formatter:KindEditorUtil.findItemCatName "> leaf class < / th >`

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 that the default value for synchronization 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; // convert the database

}`

1.6.4 edit itemcatcontroller

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

    @Autowired
    private ItemCatService itemCatService;

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

        //Query commodity classification object according to commodity classification ID
        ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
        return  itemCat.getName (); // returns the name of the commodity classification
    }

}`

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

In the third stage, day05 completes the background management of commodities

1.7 about 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 that the default value for synchronization is asynchronous true
            Datatype: "text", // indicates the return value parameter type
            success:function(data){
                name = data;
            }
        });
        return name;
    },`

In the third stage, day05 completes the background management of commodities

1.7.2 problem analysis

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



2) . Ajax request
In the third stage, day05 completes the background management of commodities

1.7.3 solutions

Note: under general conditions, AJAX nesting will set the internal Ajax to synchronous call. Otherwise, the time difference of URL call may cause incomplete data presentation

In the third stage, day05 completes the background management of commodities

1.8 about the occupation of port number

In the third stage, day05 completes the background management of commodities
In the third stage, day05 completes the background management of commodities

1.9 about common.js Introduction question

Note: the JS of the whole page is generally identified by a page, and then referenced by other pages Easy to switch JS later

1) . introduction xxx.jsp page
In the third stage, day05 completes the background management of commodities
2) . page import JS
In the third stage, day05 completes the background management of commodities

1.10 mybatisplus completes paging operation

1.10.1 edit itemservice

`//Try to use MP for paging operation
    @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 parameter, paging will be completed internally. The paging object is returned
        iPage = itemMapper.selectPage(iPage,queryWrapper);
        //1. Get the total number of paging records
        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 // indicates that I am 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 is called back to the home page, false continues to request, and the default is false
        // paginationInterceptor.setOverflow(false);
        //Set the maximum number of single page restrictions. The default number is 500 and - 1 is unlimited
        // paginationInterceptor.setLimit(500);
        //Turn on the join optimization of count, only for some left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }

}`

2. New products

2.1 description of toolbar menu

2.1.1 introduction to introductory cases

`toolbar: [{          
                  iconCls: 'icon-help',
                  Handler: function() {alert}      
                  },{
                  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

In the third stage, day05 completes the background management of commodities

In the third stage, day05 completes the background management of commodities
Page structure:
In the third stage, day05 completes the background management of commodities

2.2 page pop up box effect

2.2.1 display of page pop-up box effect

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

            //Note that you must select a div to display in 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 on the pop-up box. You are not allowed to click anywhere else
            })
        })`

2.3 tree structure display

2.3.1 commodity classification catalog structure

Note: general e-commerce website commodity classification information is generally a three-level catalog
Table design: generally, parent is used to show parent-child relationship_ ID to show directory information
In the third stage, day05 completes the background management of commodities

2.3.2 introduction to tree structure HTML structure

`<script type="text/javascript">
    /*Creating tree structure through JS*/
    $(function(){
        $("#tree").tree({
            url:" tree.json ", // load remote JSON data
            Method: "get", // request method get
            animate:false , // shows the animation effect of folding port
            checkbox:true , // presentation check box
            lines:false , // indicates the display connection line
            dnd:true , // drag or not
            onClick:function (node) {// add click event
                
                //Console
                console.info(node);
            }
        });
    })
</script>`

2.3.3 introduction to tree structure – JSON string structure

Identification of primary 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 easyutree

`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 node
    Private string state; // the state of the node is open and closed
}`

2.4 classified display of commodities

2.4.1 page analysis

`<tr>
                <td>Commodity category:</td>
                <td>
                    <a href="j avascript: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

In the third stage, day05 completes the background management of commodities
Page URL ID:
In the third stage, day05 completes the background management of commodities

2.4.3 edit itemcatcontroller

`/**
     *Business requirements: users can obtain tree structure data dynamically through Ajax request
     * url:  http://localhost:8091/item/cat/list
     *Parameter: only query the first level commodity classification information, parentid = 0
     *Return value result: List < easyuittree >
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(){

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

2.4.4 edit itemcatservice

`/**
     *Return value: List < easyitree > 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. Need to convert catlist set 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 a parent, it should be closed; if it is 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

In the third stage, day05 completes the background management of commodities