共计 9436 个字符,预计需要花费 24 分钟才能阅读完成。
1. 京淘后盾页面剖析 (理解)
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 Item 表剖析
2.2 JSON 阐明
2.2.1 什么是 JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局 。它使得人们很容易的进行浏览和编写。同时也不便了机器进行解析和生成。JSON 实质是 String
2.2.2 Object 格局
2.2.3 Array 格局
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.1 JSON 构造
2.3.2 编辑 EasyUITable VO 对象
阐明: 对象转化为 JSON 调用的是 get 办法. JSON 转护为对象时调用 set 办法
2.3.3 表格页面剖析
阐明: 当增加了分页插件之后, 当 ajax 程序解析时会动静的拼接参数.
2.3.4 编辑 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 编辑 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 编辑 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 页面成果展示
2.4 MybatisPlus 实现分页
2.4.1 编辑 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;
//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 编辑 item-list 页面
2.6.3 编辑页面 JS
编辑 js/common.js
2.6.4 编辑 ItemCat POJO 对象
在 jt-common 中增加 Itemcat POJO 对象
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.6 编辑 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 编辑 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 页面成果展示
2.6.9Ajax 嵌套问题
阐明: 因为页面中发动 2 次 ajax 申请, 并且 2 次 Ajax 是一种嵌套的关系.
解决方案: 如果遇到 ajax 嵌套问题 则个别将外部 ajax 设置为同步状态即可.
扩大常识: JS 中闭包概念
3 树形构造展示
3.1 common.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.2 JSON 构造
[{"id":100,"text":"tomcat","state":"open/closed"}]
3.3.3 封装 EasyUITree 对象
在 jt-manage 中增加 VO 对象
3.4 新增页面剖析
3.4.1 页面流转过程
1. 点击商品新增按钮
2. 发动申请 /page/item-add
3. 申请被 IndexController 中的 restFul 拦挡
4. 实现页面跳转 /WEB/INF/views/item-add.jsp
3.4.2 页面构造剖析
1). 页面按钮
2. 页面树形构造展示详情
3.4.3 树形构造展示
树控件读取 URL。子节点的加载依赖于父节点的状态。当开展一个关闭的节点,如果节点没有加载子节点,它将会把节点 id 的值作为 http 申请参数并命名为’id’,通过 URL 发送到服务器下面检索子节点。
1. 用户在默认条件下 如果没有开展子节点, 则不会发送申请.
2. 当用户关上关闭的节点时, 则会将改节点的 ID 当做参数, 向后端服务器申请.
3.4.4 编辑 ItemCatController
/**
* 业务需要: 实现商品分类树形构造展示
* url 地址: http://localhost:8091/item/cat/list
* 参数: id= 父级节点的 ID
* 返回值: List<EasyUITree>
*/
@RequestMapping("/list")
public List<EasyUITree> findItemCatList(Long id){
// 临时只查问一级商品分类信息
long parentId = (id==null?0:id);
return itemCatService.findItemCatList(parentId);
}
3.4.5 编辑 ItemCatService
@Override
public List<EasyUITree> findItemCatList(long parentId) {
// 思路. 返回值的数据从哪来? VO 转化 POJO 数据
//1. 实现数据库查问
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("parent_id", parentId);
List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);
//2. 筹备返回值数据
List<EasyUITree> treeList = new ArrayList<>();
//3. 实现数据的转化 catList 转化为 treeList for (ItemCat itemCat : catList) {long id = itemCat.getId(); // 获取 ID 值
String text = itemCat.getName(); // 获取商品分类名称
String state = itemCat.getIsParent() ? "closed" : "open";
EasyUITree easyUITree = new EasyUITree(id, text, state);
treeList.add(easyUITree);
}
return treeList;
}
3.4.6 页面成果展示