1. Jingtao background page analysis (understand)
1.1 Page structure
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'west',title:'菜单',split:true" style="width:10%;">
<ul class="easyui-tree">
<li>
<span>商品管理</span>
<ul>
<li><a onclick="addTab('商品新增','/item-add')">商品新增</a></li>
<li><a onclick="addTab('商品查询','/item-list')">商品查询</a></li>
<li><a onclick="addTab('商品更新','/item-update')">商品更新</a></li>
</ul>
</li>
<li>
<span>网站内容管理</span>
<ul>
<li>内容新增</li>
<li>内容修改</li>
</ul>
</li>
</ul>
</div>
<div id="tt" class="easyui-tabs" data-options="region:'center',title:'首页'"></div>
</body>
<script type="text/javascript">
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var url2 = "https://map.baidu.com/@12964432.517776728,4826375.366248961,13z";
var content = '<iframe scrolling="auto" frameborder="0" src="'+url2+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:false
});
}
}
</script>
</html>
2. Product list display
2.1 Item table analysis
2.2 JSON description
2.2.1 What is JSON
JSON (JavaScript Object Notation) is a lightweight data exchange format . It makes it easy for people to read and write. At the same time, it is convenient for the machine to analyze and generate. JSON is essentially String
2.2.2 Object format
2.2.3 Array format
2.2.4 Nested format
//1.object格式
{id:1,name:"tomcat猫"...}
//2.array格式
[1,2,3,"打游戏","写代码"]
//3.嵌套格式 value可以嵌套 四层嵌套json
{"id":1,"name":"哈利波特","hobbys":["敲代码","学魔法","喜欢赫敏","打伏地魔"],
"method":[{"type":"火系","name":"三味真火"},{"type":"水系","name":"大海无量"}]}
2.3 Table data display
2.3.1 JSON structure
2.3.2 Edit EasyUITable VO object
Note: The get method is called when the object is converted to JSON. The set method is called when the JSON is converted to an object
2.3.3 Form page analysis
Description: After the paging plug-in is added, the parameters will be spliced dynamically when the ajax program is parsed.
2.3.4 Edit ItemController
package com.jt.controller;
import com.jt.pojo.Item;
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;
import java.util.ArrayList;
import java.util.List;
@RestController //表示返回数据都是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(int page,int rows){
return itemService.findItemByPage(page,rows);
}
/*@RequestMapping("/testVO")
@ResponseBody
public EasyUITable testVO(){
Item item1 = new Item();
item1.setId(1000L).setTitle("饮水机").setPrice(200L);
Item item2 = new Item();
item2.setId(2000L).setTitle("电冰箱").setPrice(1800L);
List<Item> rows = new ArrayList<>();
rows.add(item1);
rows.add(item2);
return new EasyUITable(2000L, rows);
}*/
}
2.3.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;
/**
* 分页Sql:
* 查询第一页:
* select * from tb_item limit 起始位置,查询条数
* select * from tb_item limit 0,20 共21个数 index[0,19]
* 查询第二页:
* select * from tb_item limit 20,20 index[20,39]
* 查询第三页:
* select * from tb_item limit 40,20
* 查询第N页:
* * select * from tb_item limit (page-1)rows,20
* @param page
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(int page, int rows) {
long total = itemMapper.selectCount(null);
//1.手写分页
int startIndex = (page - 1) * rows;
List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);
return new EasyUITable(total, itemList);
}
}
2.3.5 Edit ItemMapper
public interface ItemMapper extends BaseMapper<Item>{
@Select("select * from tb_item order by updated desc limit #{startIndex},#{rows}")
List<Item> findItemByPage(int startIndex, int rows);
}
2.3.6 Page effect display
2.4 MybatisPlus realizes paging
2.4.1 Edit ItemService
package com.jt.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
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:
* 查询第一页:
* select * from tb_item limit 起始位置,查询条数
* select * from tb_item limit 0,20 共21个数 index[0,19]
* 查询第二页:
* select * from tb_item limit 20,20 index[20,39]
* 查询第三页:
* select * from tb_item limit 40,20
* 查询第N页:
* * select * from tb_item limit (page-1)rows,20
* @param page
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(int page, int rows) {
/*long total = itemMapper.selectCount(null);
//1.手写分页
int startIndex = (page - 1) * rows;
List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);*/
//2.利用MP方式实现分页
IPage mpPage = new Page(page,rows);
QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
queryWrapper.orderByDesc("updated");
mpPage = itemMapper.selectPage(mpPage,queryWrapper);
long total = mpPage.getTotal(); //获取记录总数
List<Item> itemList = mpPage.getRecords(); //获取查询当前页
return new EasyUITable(total, itemList);
}
}
2.4.2 Add configured class
**package com.jt.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration //bean标签使用
public class MybatisPlusConfig {
//将分页拦截器交了Spring容器管理 MP是Mybatis的增强工具
@Bean
public PaginationInterceptor paginationInterceptor(){
return new PaginationInterceptor();
}
}
**
2.5 Data formatting instructions
2.5.1 Format price
1. Page JS description
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
2. Format the code
2.5.2 Format status
1). Page JS
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
2).JS analysis
2.6 Achieve product classification echo
2.6.1 Business requirements
Description: When the user displays the list data, the product classification information is required to be displayed. According to the cid, the name of the product classification is returned
2.6.2 Edit item-list page
2.6.3 Edit page JS
Edit js/common.js
2.6.4 Edit ItemCat POJO Object
Add Itemcat POJO object in jt-common
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; //父级ID
private String name; //名称
private Integer status; //状态信息
private Integer sortOrder; //排序号
private Boolean isParent; //是否为父级
/*
* create table tb_item_cat
(
id bigint not null auto_increment,
parent_id bigint comment '父ID=0时，代表一级类目',
name varchar(150),
status int(1) default 1 comment '默认值为1，可选值：1正常，2删除',
sort_order int(4) not null,
is_parent tinyint(1),
created datetime,
updated datetime,
primary key (id)
);
*
*
*
*
* */
}
2.6.5 Page URL analysis
2.6.6 Edit ItemCatController
package com.jt.controller;
import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 需求: 根据itemCatId查询商品分类名称
* url: http://localhost:8091/item/cat/queryItemName?itemCatId=163
* 参数: itemCatId=163
* 返回值: 商品分类名称
*/
@RequestMapping("/queryItemName")
public String queryItemName(Long itemCatId){
ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
return itemCat.getName();
}
}
2.6.7 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);
}
}
2.6.8 Page effect display
2.6.9 Ajax nesting problem
Description: Since 2 ajax requests are initiated on the page, and 2 Ajax is a nested relationship.
Solution: If you encounter ajax nesting problems, generally set the internal ajax to a synchronized state.
Extended knowledge: JS Closure concept
3 Tree structure display
3.1 Common.js dependency problem
1. Other pages are introduced in index.jsp
<jsp:include page="/commons/common-js.jsp"></jsp:include>
2. Page introduction
3.2 Analysis of Commodity Classification Business
3.2.1 Classification description
Under general conditions, product classification is divided into 3 levels.
3.2.2 Table structure design
3.3 Tree structure problem
3.3.1 Page JS
3.3.2 JSON structure
[{"id":100,"text":"tomcat","state":"open/closed"}]
3.3.3 Encapsulate the EasyUITree object
Add VO object in jt-manage
3.4 New page analysis
3.4.1 Page flow process
1. Click the product add button
2. Initiate a request /page/item-add
3. The request is intercepted by restFul in IndexController
4. Realize page jump /WEB/INF/views/item-add.jsp
3.4.2 Page structure analysis
1). Page buttons
2. Page tree structure showing details
3.4.3 Edit ItemCatController
