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
Array format
1.2.4 nested format
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
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
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
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;
},`
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
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
1.8 about the occupation of port number
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
2) . page import JS
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
Page structure:
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
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
Page URL ID:
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
