本文共 9916 字，大约阅读时间需要 33 分钟。

1.京淘商品后台管理实现

1.1 商品列表展现

1.1.1 商品POJO对象

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

1.1.2 表格数据页面结构

   
        
             
        	      
        	      
商品ID
                  
商品标题
                  
叶子类目
                  
卖点
                  
价格
                  
库存数量
                  
条形码
                  
状态
                  
创建日期
                  
更新日期
             
        
   

1.1.3 请求URL地址

说明:如果采用UI框架并且添加了分页插件,则会自动的形成如下的URL请求地址

1.1.4 编辑ItemController

package com.jt.controller;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.RestController;@RestController	//返回值都是JSON数据@RequestMapping("/item")public class ItemController {		@Autowired	private ItemService itemService;	/**	 * 业务需求:	 * 	以分页的形式查询商品列表信息.	 * 业务接口文档:	 *  	url地址: http://localhost:8091/item/query?page=1&rows=20	 * 		参数信息:  page 当前页数    rows 每页展现的行数	 * 		返回值:  EasyUITable对象	 *  	方法1:  手写sql方式实现分页	 *  	方法2:  利用MP方式实现分页	 */	@RequestMapping("/query")	public EasyUITable findItemByPage(int page,int rows){		return  itemService.findItemByPage(page,rows);	}		}

1.1.5 编辑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;	/*	SELECT * FROM tb_item LIMIT 0, 20   /*第一页 0-19	SELECT * FROM tb_item LIMIT 20,20   /*第二页 20-39	SELECT * FROM tb_item LIMIT 40,20   /*第三页 40-59	SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS  40-59*/	/**	 * 1.后端查询数据库记录	 * 2.将后端数据通过业务调用转化为VO对象	 * 3.前端通过VO对象的JSON进行数据的解析	 *	 *执行的sql:	 * 	select * from tb_item  order by updated  desc LIMIT 0, 20	 * @param page	 * @param rows	 * @return	 */	@Override	public EasyUITable findItemByPage(int page, int rows) {		//1.total  获取数据库总记录数		long total = itemMapper.selectCount(null);		//2.rows   商品分页查询的结果		int startNum = (page-1)*rows;		List
   
     itemList = itemMapper.findItemByPage(startNum,rows);		//3.将返回值结果封装		return new EasyUITable(total,itemList);	}}
   

1.1.6 编辑ItemMapper

手动编辑分页操作

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

1.2 MybatisPlus实现分页查询

1.2.1 编辑业务调用

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

1.2.2 编辑MybatisPlus配置类

说明:在jt-common中添加MP的配置文件

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

2.商品分类目录实现

2.1 封装POJO对象

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

2.2 页面JS引入过程

2.2.1 引入JS/CSS样式

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   
   
   
   

2.2.2 引入common.jsp

2.3 数据格式化

2.3.1 格式化价格

1.页面标签价格2.页面JSformatPrice : function(val,row){		return (val/100).toFixed(2);	},

2.3.2 格式化状态

状态// 格式化商品的状态	formatItemStatus : function formatStatus(val,row){        if (val == 1){            return '正常';        } else if(val == 2){        	return '下架';        } else {        	return '未知';        }    },

2.4 格式化商品分类目录

2.4.1 页面结构分析

叶子类目//格式化名称    findItemCatName : function(val,row){    	var name;    	$.ajax({    		type:"get",    		url:"/item/cat/queryItemName",    		data:{itemCatId:val},    		cache:true,    //缓存    		async:false,    //表示同步   默认的是异步的true    		dataType:"text",//表示返回值参数类型    		success:function(data){        		name = data;        	}    	});    	return name;	},

2.4.2 编辑ItemCatController

@RestController //要求返回JSON数据@RequestMapping("/item/cat")public class ItemCatController {    @Autowired    private ItemCatService itemCatService;    /**     * 业务: 根据商品分类的ID,查询商品分类的名称     * url:  /item/cat/queryItemName     * 参数: itemCatId  商品分类id     * 返回值: 商品分类名称     */    @RequestMapping("queryItemName")    public String findItemCatName(Long itemCatId){        return itemCatService.findItemCatName(itemCatId);    }}

2.4.2 编辑ItemCatService

package com.jt.service;import com.jt.mapper.ItemCatMapper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class ItemCatServiceImpl implements ItemCatService{    @Autowired    private ItemCatMapper itemCatMapper;    @Override    public String findItemCatName(Long itemCatId) {        return itemCatMapper.selectById(itemCatId).getName();    }}

2.4.3 页面效果展现

2.4.3 ajax嵌套问题

说明: 如果在ajax内部再次嵌套ajax请求,则需要将内部的ajax请求设置为同步状态.

俗语: 赶紧走吧 赶不上二路公交车了… 核心原因: 页面需要刷新2次都是只刷新一次.

2.5 关于页面工具栏说明(看懂即可)

1.页面调用	
   
    2.定义工具栏var toolbar = [{        text:'新增',        iconCls:'icon-add',        handler:function(){            //.tree-title 查找页面中class类型为tree-title的元素            //:contains('新增商品')  在所有的class的类型中查找文件元素为"新增商品"的元素            //parent()  选中元素的父级元素            //.click()  执行点击的动作        	$(".tree-title:contains('新增商品')").parent().click();        }    },{.....}]

2.5.1 jQuery基本用法

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

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

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

3.1 ItemCat表结构设定

问题分析: 商品分类信息一般分为3级. 问题: 如何确定父子级关系的呢??

答: 通过定义父级的字段实现

3.2 3级表数据的分析

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

/*查询一级分类信息 父级ID=0*/SELECT * FROM tb_item_cat WHERE parent_id=0;/*查询二级分类信息 父级ID=0*/SELECT * FROM tb_item_cat WHERE parent_id=495;/*查询三级分类信息 父级ID=0*/SELECT * FROM tb_item_cat WHERE parent_id=529;

3.3 EasyUI中树形结构说明

1.页面JS

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

2.返回值说明

[	{		"id":"1",		"text":"吃鸡游戏",		"state":"closed"	},	{		"id":"1",		"text":"吃鸡游戏",		"state":"closed"	}]

3.4 封装树形结构VO对象

@Data@Accessors(chain = true)@NoArgsConstructor@AllArgsConstructorpublic class EasyUITree implements Serializable {    private Long id;       //节点ID    private String text;   //节点名称    private String state;  //节点状态}

3.5 页面JS结构说明

3.6 异步树加载说明

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

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);    }
    
   

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){            long id = itemCat.getId();  //获取ID值            String text = itemCat.getName();    //获取商品分类名称            //判断:如果是父级 应该closed  如果不是父级 则open            String state = itemCat.getIsParent()?"closed":"open";            EasyUITree easyUITree = new EasyUITree(id,text,state);            treeList.add(easyUITree);        }        return treeList;    }
     
    
   

3.9页面效果展现

 

 

 

 

 

 

 

 

 

转载地址：http://dvsli.baihongyu.com/