【淘淘】---展示商品列表

我会带着你远行 2022-06-13 08:44 275阅读 0赞

【淘淘】---展示商品列表

# 1，需求分析 #

在后台管理系统中，要展示如下界面，点击“查询商品”，能将数据库表中的商品表上的数据显示到前台页面中来，如下：

![Center][]

# 2，设计分析 #

(1)分析查找，请求的URL：

![Center 1][]

(2)Ajax请求，请求的参数：http://localhost:8080/item/list?page=1&rows=30

(3)响应的数据：json数据。

(4)包含total、rows两个属性：

(5)Total：查询结果的总记录数

(6)Rows：集合，包含显示的所有数据。

注意：其中集合中每个元素的key应该和dategrid的field对应。

Easyui中datagrid控件要求的数据格式为：

{total:”2”,rows:[{“id”:”1”,”name”,”张三”},{“id”:”2”,”name”,”李四”}]}

![Center 2][]

# 3，代码实现 #

## 3.1Dao层： ##

访问数据库的，我们可以用mybatis逆向工程生成的代码

## 3.2Service层 ##

参数：page（显示的页码）、rows（每页显示的记录数）

返回值：创建一个pojo表示返回值，应该包含total、rows两个属性。

应该放到taotao-common工程中，和其他系统共用。

###    3.2.1创建一个实体： ###

![Center 3][]

package com.taotao.common.pojo;
    import java.util.List;
    public class EasyUIDataGridResult {	
    	private long total;
    	private List<?>rows;//用？什么类型都可以，T一般都是泛型
    	public long getTotal() {
    		return total;
    	}
    	public void setTotal(long total) {
    		this.total = total;
    	}
    	public List<?> getRows() {
    		return rows;
    	}
    	public void setRows(List<?> rows) {
    		this.rows = rows;
    	}	
    }

3.2.2 Service层：

//展示商品列表。2017-6-27 15:20:41
    	EasyUIDataGridResult getItemList(int page,int rows);

### 3.2.3 serviceImpl层：添加方法 ###

@Override
    	/**
    	 * 商品列表展示。2017-6-27 15:22:25
    	 */
    	@Override
    	public EasyUIDataGridResult getItemList(int page, int rows) {
    		//分页处理
    		PageHelper.startPage(page,rows);
    		
    		// 执行查询
    		TbItemExample example=new TbItemExample();
    		List<TbItem> list = itemMapper.selectByExample(example);
    		
    		//取分页信息
    		PageInfo<TbItem> pageInfo=new PageInfo<>(list);
    		
    		//返回EeasyUIDataGridResult 处理结果
    		EasyUIDataGridResult result =new EasyUIDataGridResult();
    		result.setTotal(pageInfo.getTotal());
    		result.setRows(list);
    		return result;
    	}

## 3.3Controller层 ##

接收两个参数：page、rows

调用Service查询商品列表。

返回：EasyUIDataGridResult（json数据），需要使用@ResponseBody

//商品列表展示。2017-6-27 15:34:48
    	@RequestMapping("/item/list")
    	@ResponseBody
    	public EasyUIDataGridResult getItemList(Integer page,Integer rows){
    		EasyUIDataGridResult result=itemService.getItemList(page,rows);		
    		return result;
    	}

# 4 最后效果： #

![Center 4][]

# 5 小结： #

分析出所需要的响应数据、属性，接下来就非常快了，Dao 层直接用mybatis逆向工程生成；在显示层要进行分页处理，page、rows就新创建一个实体pojo，必须包含total和rows两个属性，后面一条线service、serviceImpl和controller就非常的顺利了。

[Center]: /images/20220613/28ea1682eee341d3813a0ff6cbe20a1b.png
[Center 1]: /images/20220613/8faa076127a544a29cb6a02a84df888f.png
[Center 2]: /images/20220613/3ef23b4240424a24845f00aba4e507f3.png
[Center 3]: /images/20220613/b9f8e8824e054966996ebd4326288726.png
[Center 4]: /images/20220613/72c5ea8c9e554b78989070e0e5fc8696.png