一、商品列表展现

1.1商品POJO对象

  1. package com.jt.pojo;
  2. import com.baomidou.mybatisplus.annotation.IdType;
  3. import com.baomidou.mybatisplus.annotation.TableId;
  4. import com.baomidou.mybatisplus.annotation.TableName;
  5. import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
  6. import lombok.Data;
  7. import lombok.experimental.Accessors;
  8. @JsonIgnoreProperties(ignoreUnknown=true) //表示JSON转化时忽略未知属性
  9. @TableName("tb_item")
  10. @Data
  11. @Accessors(chain=true)
  12. public class Item extends BasePojo{
  13. @TableId(type=IdType.AUTO) //主键自增
  14. private Long id; //商品id
  15. private String title; //商品标题
  16. private String sellPoint; //商品卖点信息
  17. private Long price; //商品价格 double精度问题 num *100 /100 long
  18. private Integer num; //商品数量
  19. private String barcode; //条形码
  20. private String image; //商品图片信息 1.jpg,2.jpg,3.jpg
  21. private Long cid; //表示商品的分类id
  22. private Integer status; //1正常,2下架
  23. //为了满足页面调用需求,添加get方法
  24. public String[] getImages(){
  25. return image.split(",");
  26. }
  27. }

1.2表格数据页面结构

  1. <table class="easyui-datagrid" id="itemList" title="商品列表"
  2. data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
  3. <thead>
  4. <tr>
  5. <th data-options="field:'ck',checkbox:true"></th>
  6. <th data-options="field:'id',width:60">商品ID</th>
  7. <th data-options="field:'title',width:200">商品标题</th>
  8. <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>
  9. <th data-options="field:'sellPoint',width:100">卖点</th>
  10. <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
  11. <th data-options="field:'num',width:70,align:'right'">库存数量</th>
  12. <th data-options="field:'barcode',width:100">条形码</th>
  13. <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
  14. <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
  15. <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
  16. </tr>
  17. </thead>
  18. </table>

1.3请求URL地址
05-京淘项目 - 图1
1.4编辑ItemController

  1. package com.jt.controller;
  2. import com.jt.vo.EasyUITable;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import com.jt.service.ItemService;
  7. import org.springframework.web.bind.annotation.RestController;
  8. @RestController //返回值都是JSON数据
  9. @RequestMapping("/item")
  10. public class ItemController {
  11. @Autowired
  12. private ItemService itemService;
  13. /**
  14. * 业务需求:
  15. * 以分页的形式查询商品列表信息.
  16. * 业务接口文档:
  17. * url地址: http://localhost:8091/item/query?page=1&rows=20
  18. * 参数信息: page 当前页数 rows 每页展现的行数
  19. * 返回值: EasyUITable对象
  20. * 方法1: 手写sql方式实现分页
  21. * 方法2: 利用MP方式实现分页
  22. */
  23. @RequestMapping("/query")
  24. public EasyUITable findItemByPage(int page,int rows){
  25. return itemService.findItemByPage(page,rows);
  26. }
  27. }

1.5编辑ItemService

  1. package com.jt.service;
  2. import com.jt.pojo.Item;
  3. import com.jt.vo.EasyUITable;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Service;
  6. import com.jt.mapper.ItemMapper;
  7. import java.util.List;
  8. @Service
  9. public class ItemServiceImpl implements ItemService {
  10. @Autowired
  11. private ItemMapper itemMapper;
  12. /*
  13. SELECT * FROM tb_item LIMIT 0, 20 /*第一页 0-19
  14. SELECT * FROM tb_item LIMIT 20,20 /*第二页 20-39
  15. SELECT * FROM tb_item LIMIT 40,20 /*第三页 40-59
  16. SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS 40-59*/
  17. /**
  18. * 1.后端查询数据库记录
  19. * 2.将后端数据通过业务调用转化为VO对象
  20. * 3.前端通过VO对象的JSON进行数据的解析
  21. *
  22. *执行的sql:
  23. * select * from tb_item order by updated desc LIMIT 0, 20
  24. * @param page
  25. * @param rows
  26. * @return
  27. */
  28. @Override
  29. public EasyUITable findItemByPage(int page, int rows) {
  30. //1.total 获取数据库总记录数
  31. long total = itemMapper.selectCount(null);
  32. //2.rows 商品分页查询的结果
  33. int startNum = (page-1)*rows;
  34. List<Item> itemList = itemMapper.findItemByPage(startNum,rows);
  35. //3.将返回值结果封装
  36. return new EasyUITable(total,itemList);
  37. }
  38. }

1.6编辑ItemMapper

  1. public interface ItemMapper extends BaseMapper<Item>{
  2. //注意事项: 以后写sql语句时 字段名称/表名注意大小写问题.
  3. @Select("SELECT * FROM tb_item ORDER BY updated DESC LIMIT #{startNum}, #{rows}")
  4. List<Item> findItemByPage(int startNum, int rows);
  5. }

1.2MybatisPlus实现分页
1.2.1编辑业务调用

  1. @Service
  2. public class ItemServiceImpl implements ItemService {
  3. @Autowired
  4. private ItemMapper itemMapper;
  5. @Override
  6. public EasyUITable findItemByPage(int page, int rows) {
  7. //1.需要使用MP的方式进行分页
  8. IPage<Item> iPage = new Page<>(page,rows);
  9. QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
  10. queryWrapper.orderByDesc("updated");
  11. //MP通过分页操作将分页的相关数据统一封装到IPage对象中
  12. iPage = itemMapper.selectPage(iPage,queryWrapper);
  13. return new EasyUITable(iPage.getTotal(),iPage.getRecords());
  14. }
  15. }

1.2.2编辑MybatisPlus配置类
说明:在jt-common中添加MP的配置文件

  1. package com.jt.config;
  2. import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
  3. import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
  4. import org.springframework.context.annotation.Bean;
  5. import org.springframework.context.annotation.Configuration;
  6. @Configuration //标识配置类
  7. public class MybatisPlusConfig {
  8. @Bean
  9. public PaginationInterceptor paginationInterceptor() {
  10. PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
  11. // 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false
  12. // paginationInterceptor.setOverflow(false);
  13. // 设置最大单页限制数量,默认 500 条,-1 不受限制
  14. // paginationInterceptor.setLimit(500);
  15. // 开启 count 的 join 优化,只针对部分 left join
  16. paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
  17. return paginationInterceptor;
  18. }
  19. }

二、商品分类目录实现

2.1封装POJO对象

  1. @TableName("tb_item_cat")
  2. @Data
  3. @Accessors(chain = true)
  4. public class ItemCat extends BasePojo{
  5. @TableId(type = IdType.AUTO)
  6. private Long id; //主键ID
  7. private Long parentId; //父级ID
  8. private String name; //分类名称
  9. private Integer status; //状态
  10. private Integer sortOrder; //排序号
  11. private Boolean isParent; //是否为父级
  12. }

2.2页面JS引入过程
2.2.1 引入JS/CSS样式

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
  4. <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
  5. <link rel="stylesheet" type="text/css" href="/css/jt.css" />
  6. <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
  7. <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
  9. <!-- 自己实现业务逻辑 -->
  10. <script type="text/javascript" src="/js/common.js"></script>

2.2.2 引入common.jsp
05-京淘项目 - 图2
2.3 数据格式化
2.3.1 格式化价格

  1. 1.页面标签
  2. <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
  3. 2.页面JS
  4. formatPrice : function(val,row){
  5. return (val/100).toFixed(2);
  6. },

2.3.2 格式化状态

  1. <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
  2. // 格式化商品的状态
  3. formatItemStatus : function formatStatus(val,row){
  4. if (val == 1){
  5. return '<span style="color:green;">正常</span>';
  6. } else if(val == 2){
  7. return '<span style="color:red;">下架</span>';
  8. } else {
  9. return '未知';
  10. }
  11. },

2.4 格式化商品分类目录
2.4.1 页面结构分析

  1. <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>
  2. //格式化名称
  3. findItemCatName : function(val,row){
  4. var name;
  5. $.ajax({
  6. type:"get",
  7. url:"/item/cat/queryItemName",
  8. data:{itemCatId:val},
  9. cache:true, //缓存
  10. async:false, //表示同步 默认的是异步的true
  11. dataType:"text",//表示返回值参数类型
  12. success:function(data){
  13. name = data;
  14. }
  15. });
  16. return name;
  17. },

2.4.2 编辑ItemCatController

  1. @RestController //要求返回JSON数据
  2. @RequestMapping("/item/cat")
  3. public class ItemCatController {
  4. @Autowired
  5. private ItemCatService itemCatService;
  6. /**
  7. * 业务: 根据商品分类的ID,查询商品分类的名称
  8. * url: /item/cat/queryItemName
  9. * 参数: itemCatId 商品分类id
  10. * 返回值: 商品分类名称
  11. */
  12. @RequestMapping("queryItemName")
  13. public String findItemCatName(Long itemCatId){
  14. return itemCatService.findItemCatName(itemCatId);
  15. }
  16. }

2.4.2 编辑ItemCatService

  1. package com.jt.service;
  2. import com.jt.mapper.ItemCatMapper;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Service;
  5. @Service
  6. public class ItemCatServiceImpl implements ItemCatService{
  7. @Autowired
  8. private ItemCatMapper itemCatMapper;
  9. @Override
  10. public String findItemCatName(Long itemCatId) {
  11. return itemCatMapper.selectById(itemCatId).getName();
  12. }
  13. }

2.4.3 页面效果展现
05-京淘项目 - 图3
2.4.3 ajax嵌套问题
说明: 如果在ajax内部再次嵌套ajax请求,则需要将内部的ajax请求设置为同步状态.
俗语: 赶紧走吧 赶不上二路公交车了…
核心原因: 页面需要刷新2次都是只刷新一次.
2.5 关于页面工具栏说明(看懂即可)

  1. 1.页面调用
  2. <table class="easyui-datagrid" id="itemList" title="商品列表"
  3. data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
  4. 2.定义工具栏
  5. var toolbar = [{
  6. text:'新增',
  7. iconCls:'icon-add',
  8. handler:function(){
  9. //.tree-title 查找页面中class类型为tree-title的元素
  10. //:contains('新增商品') 在所有的class的类型中查找文件元素为"新增商品"的元素
  11. //parent() 选中元素的父级元素
  12. //.click() 执行点击的动作
  13. $(".tree-title:contains('新增商品')").parent().click();
  14. }
  15. },{.....}]

2.5.1 jQuery基本用法

  • 选择器 在整个html页面 根据某些特定的标识 准确的定位元素的位置.

      1. Id选择器 $(“#元素的Id”)
      1. 元素(标签)选择器 $(“tr”)
      1. 类选择器 $(“.class的名称”) [{},{},{}]

        三、 商品分类目录树形结构展现

        3.1 ItemCat表结构设定

        问题分析: 商品分类信息一般分为3级. 问题: 如何确定父子级关系的呢??
        答: 通过定义父级的字段实现
        05-京淘项目 - 图4

        3.2 3级表数据的分析

        说明:通过parentId 根据父级的ID查询所有的子级信息. 当查询一级菜单时parentId=0;

        1. /*查询一级分类信息 父级ID=0*/
        2. SELECT * FROM tb_item_cat WHERE parent_id=0;
        3. /*查询二级分类信息 父级ID=0*/
        4. SELECT * FROM tb_item_cat WHERE parent_id=495;
        5. /*查询三级分类信息 父级ID=0*/
        6. SELECT * FROM tb_item_cat WHERE parent_id=529;

        3.3 EasyUI中树形结构说明

        1.页面JS

        1. $("#tree").tree({
        2. url:"tree.json", //加载远程JSON数据
        3. method:"get", //请求方式 POST
        4. animate:false, //表示显示折叠端口动画效果
        5. checkbox:true, //表述复选框
        6. lines:false, //表示显示连接线
        7. dnd:true, //是否拖拽
        8. onClick:function(node){ //添加点击事件
        9. //控制台
        10. console.info(node);
        11. }
        12. });

        2.返回值说明

        1. [
        2. {
        3. "id":"1",
        4. "text":"吃鸡游戏",
        5. "state":"closed"
        6. },
        7. {
        8. "id":"1",
        9. "text":"吃鸡游戏",
        10. "state":"closed"
        11. }
        12. ]

        3.4 封装树形结构VO对象

        1. @Data
        2. @Accessors(chain = true)
        3. @NoArgsConstructor
        4. @AllArgsConstructor
        5. public class EasyUITree implements Serializable {
        6. private Long id; //节点ID
        7. private String text; //节点名称
        8. private String state; //节点状态
        9. }

        3.5 页面JS结构说明

        05-京淘项目 - 图5

        3.6 异步树加载说明

        树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为’id’,通过URL发送到服务器上面检索子节点。
        05-京淘项目 - 图6

        3.7 编辑ItemCatController

        ``` /**

      • 业务: 实现商品分类的查询
      • url地址: /item/cat/list
      • 参数: id: 默认应该0 否则就是用户的ID
      • 返回值结果: List */ @RequestMapping(“/list”) public List findItemCatList(Long id){ Long parentId = (id==null)?0:id; return itemCatService.findItemCatList(parentId); }
        1. <a name="xbRsM"></a>
        2. ### 3.8 编辑ItemCatService
        @Override public List findItemCatList(Long parentId) { //1.准备返回值数据 List treeList = new ArrayList<>(); //思路.返回值的数据从哪来? VO 转化 POJO数据 //2.实现数据库查询 QueryWrapper queryWrapper = new QueryWrapper(); queryWrapper.eq(“parent_id”,parentId); List catList = itemCatMapper.selectList(queryWrapper); //3.实现数据的转化 catList转化为 treeList for (ItemCat itemCat : catList){
        1. long id = itemCat.getId(); //获取ID值
        2. String text = itemCat.getName(); //获取商品分类名称
        3. //判断:如果是父级 应该closed 如果不是父级 则open
        4. String state = itemCat.getIsParent()?"closed":"open";
        5. EasyUITree easyUITree = new EasyUITree(id,text,state);
        6. treeList.add(easyUITree);
        } return treeList; } ```

        3.9页面效果展现

        05-京淘项目 - 图7

四、总结

本节在于熟悉基本业务逻辑,了解前端和后端如何传递数据,展示在页面中,理清逻辑流程最为重要。

拓展:
(1)https://my.oschina.net/mrtudou/blog/784672