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;@Servicepublic 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;@Servicepublic 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;@Servicepublic 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
@Overridepublic 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;}