1. Jingtaoバックグラウンドページ分析（理解）
1.1ページ構造
<%@ 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.製品リストの表示
2.1アイテムテーブル分析
2.2JSONの説明
2.2.1JSONとは
JSON（JavaScript Object Notation）は、軽量のデータ交換フォーマットです。それは人々が読み書きするのを簡単にします。同時に、マシンが分析して生成するのに便利です。JSONは本質的に文字列です
2.2.2オブジェクト形式
2.2.3配列形式
2.2.4ネストされたフォーマット
//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テーブルデータの表示
2.3.1JSON構造
2.3.2 EasyUITableVOオブジェクトの編集
注：getメソッドは、オブジェクトがJSONに変換されるときに呼び出されます。setメソッドは、JSONがオブジェクトに変換されるときに呼び出されます。
2.3.3フォームページの分析
説明：ページングプラグインが追加された後、ajaxプログラムが解析されるときに、パラメーターが動的にスプライスされます。
2.3.4ItemControllerの編集
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.4ItemServiceの編集
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.5ItemMapperを編集する
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ページ効果の表示
2.4MybatisPlusはページングを実現します
2.4.1ItemServiceの編集
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構成済みクラスの追加
**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データのフォーマット手順
2.5.1フォーマット価格
1.ページJSの説明
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
2.コードをフォーマットします
2.5.2フォーマットステータス
1）。ページJS
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
2）.JS分析
2.6製品分類エコーを実現する
2.6.1ビジネス要件
説明：ユーザーがリストデータを表示する場合、製品分類情報を表示する必要があります。cidに従って、製品分類の名前が返されます。
2.6.2アイテムリストページの編集
2.6.3ページJSの編集
js /common.jsを編集します
2.6.4 ItemCatPOJOオブジェクトの編集
jt-commonに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; //父级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ページURL分析
2.6.6ItemCatControllerの編集
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.7ItemCatServiceの編集
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ページ効果の表示
2.6.9Ajaxのネストの問題
説明：2つのajaxリクエストがページで開始され、2つのAjaxはネストされた関係であるため、
解決策：ajaxのネストの問題が発生した場合は、通常、内部ajaxを同期状態に設定します。
拡張知識：JS閉鎖の概念
3ツリー構造表示
3.1Common.jsの依存関係の問題
1.他のページはindex.jsp
<jsp：include page = "/ commons / common-js.jsp"> </ jsp：include>で紹介されています
2.ページ紹介
3.2商品分類事業の分析
3.2.1分類の説明
一般的な条件下では、製品の分類は3つのレベルに分けられます。
3.2.2テーブル構造の設計
3.3ツリー構造の問題
3.3.1ページJS
3.3.2JSON構造
[{"id":100,"text":"tomcat","state":"open/closed"}]
3.3.3EasyUITreeオブジェクトをカプセル化する
jt-manageにVOオブジェクトを追加します
3.4新しいページの分析
3.4.1ページフロープロセス
1.製品追加ボタンをクリックします
2.リクエストを開始します/ page / item-
add3
。リクエストはIndexControllerのrestFulによってインターセプトされます4.ページジャンプ/WEB/INF/views/item-add.jspを実現します
3.4.2ページ構造分析
1）。ページボタン
2.詳細を表示するページツリー構造
3.4.3ItemCatControllerの編集
