ssm前后端分离之前端获取服务器json数据（easyUI）

 1，entity：将查询数据转换成特定的json格式

 

package com.meng.entity;

import java.util.List;

public class DataResult<T> {
	
	public DataResult() {}
public DataResult(int total, List<T> rows) {
 
		this.total = total;
		this.rows = rows;
	}
private int total;
private List<T> rows;
public int getTotal() {
	return total;
}
public void setTotal(int total) {
	this.total = total;
}
public List<T> getRows() {
	return rows;
}
public void setRows(List<T> rows) {
	this.rows = rows;
}
}

2，controller：

	@Autowired
	private FlowersInfoService flowersInfoService;

	// http://localhost:8080/flower/flower/getAll
	@RequestMapping(value = "/getAll", method = RequestMethod.GET)
	public DataResult<FlowersInfo> get() {		
		List<FlowersInfo> list = flowersInfoService.getAllFlowers();
		return new DataResult<FlowersInfo>(list.size(),list);
	}

 

3前台获取json数据

<table id="table">
	</table>

 

$(function() {
		var url = "http://localhost:8080/flower/flowers/getAll";
		$('#table').datagrid({
			url : url,
			method: "get",
			pagePosition : 'bottom',
			pageSize : 10,
			pageList : [ 10, 15,20],
			pagination : true,
			columns :  [[ {
				field : 'flowerId',
				title : '鲜花编号',
				width : 100
			}, {
				field : 'flowerImage',
				title : '鲜花图片',
				width : 100
			}, {
				field : 'flowerName',
				title : '鲜花名称',
				width : 100
			}, {
				field : 'flowerNum',
				title : '储存量',
				width : 100
			}, {
				field : 'flowerType',
				title : '鲜花类型',
				width : 100
			}, {
				field : 'price',
				title : '价格',
				width : 100
			}, {
				field : 'userId',
				title : '用户Id',
				width : 100
			}, {
				field : 'des',
				title : '详情',
				width : 100
			}

			] ]
		});
		

 

 4，图片展示：