实战day03（一）----商品类目选择

最新推荐文章于 2024-06-17 18:10:25 发布

csdn_kenneth

最新推荐文章于 2024-06-17 18:10:25 发布

阅读量939

点赞数 1

分类专栏：实战项目

本文链接：https://blog.youkuaiyun.com/csdn_kenneth/article/details/79347061

版权

实战项目专栏收录该内容

77 篇文章

订阅专栏

本文档详细介绍了商品类目选择的过程，包括在商品添加前选择类目，图片上传，富文本编辑器的使用，以及商品添加功能的实现。在商品类目选择部分，讲解了如何绑定事件查询数据库，利用EasyUI的Tree控件展示分类，并提供了初始化Tree控件的方法和数据格式。涉及到Dao层、Service层和表现层的具体操作，如根据parentId查询节点并转换为EasyUITreeNode列表，以及Controller中处理初始化请求的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、课程计划

主要完成商品添加

1、商品类目选择（要完成商品添加，就要先选择类目）

2、图片上传

a)图片服务器FastDFS

b)图片上传功能实现

c)http工具nginx来访问图片

3、富文本编辑器的使用KindEditor（把商品详情，商品介绍添加进去）

4、商品添加功能完成

二、商品类目选择

“选择类目”应该绑定一个事件，查询数据库，然后，初始化一个树形控件。

index.jsp是一个html，而item-add.jsp是一个片段。所以，在index.jsp里面引用的js在item-add.jsp里面也生效。

index.jsp中已经引入了common.js

怎么初始化的呢？

展示商品分类列表，使用EasyUI的tree控件展示。

初始化tree请求的url：/item/cat/list

参数：

初始化tree时只需要把第一级节点展示，子节点异步加载。

long id（父节点id）

返回值：json。数据格式

[{

"id": 1,

"text": "Node 1",

"state": "closed"

},{

"id": 2,

"text": "Node 2",

"state": "closed"

}]
state：如果节点下有子节点“closed”，如果没有子节点“open”

创建一个pojo来描述tree的节点信息，包含三个属性id、text、state。放到e3-common工程中。

public class EasyUITreeNode implements Serializable{
	private long id;
	private String text;
	private String state;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getState() {
		return state;
	}

	public void setState(String state) {
		this.state = state;
	}
}

查询的表：

tb_item_cat

查询列：

Id、name、isparent

查询条件parentId

Dao层

tb_item_cat单表查询

可以使用逆向工程生成的代码

Service层

参数：long parentId

业务逻辑：

1、根据parentId查询节点列表

2、转换成EasyUITreeNode列表。

3、返回。

返回值：List<EasyUITreeNode>

接口：

public interface ItemCatService {
	List<EasyUITreeNode> getItemCatList(long parentId);
}

实现类：

package cn.e3mall.service.impl;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.e3mall.common.pojo.EasyUITreeNode;
import cn.e3mall.mapper.TbItemCatMapper;
import cn.e3mall.pojo.TbItemCat;
import cn.e3mall.pojo.TbItemCatExample;
import cn.e3mall.pojo.TbItemCatExample.Criteria;
import cn.e3mall.service.ItemCatService;

/**
 * 商品分类管理
 *
 */
@Service
public class ItemCatServiceImpl implements ItemCatService {

	@Autowired
	private TbItemCatMapper itemCatMapper;

	@Override
	public List<EasyUITreeNode> getItemCatList(long parentId) {
		// 根据parentId查询子节点列表
		TbItemCatExample example = new TbItemCatExample();
		Criteria criteria = example.createCriteria();
		// 设置查询条件
		criteria.andParentIdEqualTo(parentId);
		// 执行查询
		List<TbItemCat> list = itemCatMapper.selectByExample(example);
		// 创建返回结果的list
		List<EasyUITreeNode> resultList = new ArrayList<>();
		// 把列表转成EasyUITreeNode列表
		for (TbItemCat tbItemCat : list) {
			EasyUITreeNode node = new EasyUITreeNode();
			node.setId(tbItemCat.getId());
			node.setText(tbItemCat.getName());
			node.setState(tbItemCat.getIsParent() ? "closed" : "open");
			resultList.add(node);
		}
		// 返回结果
		return resultList;
	}
}

发布服务

1.2. 表现层

1.2.1. 引用服务

Controller

初始化tree请求的url：/item/cat/list

参数：

long id（父节点id）

返回值：json。数据格式

List<EasyUITreeNode>

前端弹开窗口的时候，第一次并没有id，所以，controller的方法中需要一个默认值。

/**
 * 商品分类管理controller
 *
 */
@Controller
public class ItemCatController {

	@Autowired
	private ItemCatService itemCatService;

	@RequestMapping("/item/cat/list")
	@ResponseBody
	public List<EasyUITreeNode> getItemCatList(@RequestParam(name = "id", defaultValue = "0") Long parentId) {
		List<EasyUITreeNode> list = itemCatService.getItemCatList(parentId);
		return list;
	}
}

e3-common install，e3-manager install

重启项目