从0开始写SSM项目02-数据查询、通过springmvc发送json数据到easyui

SSM环境整合请看我上一篇博客：从0开始写SSM项目01-SSM开发环境整合

一、数据查询

1.定义一个javaBean

/**
 * Created by Zhao Wen on 2020/10/19
 */


public class User {
	private Integer uid;
	private String name;
	private String sex;
	private String qq;
	private String phone;
	private String email;
	private String createDate;
	
	public Integer getUid() {
		return uid;
	}
	public void setUid(Integer uid) {
		this.uid = uid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getQq() {
		return qq;
	}
	public void setQq(String qq) {
		this.qq = qq;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getCreateDate() {
		return createDate;
	}
	public void setCreateDate(String createDate) {
		this.createDate = createDate;
	}
	
}

2.查询所有用户信息

UserDaoImpl.java

/**
 * Created by Zhao Wen on 2020/10/19
 */

public interface UserDaoImpl {
    /**
     * 查询tb_user表中所有数据
     * @return
     */
    @Select("select * from tb_user")
    public List<User> queryAll();
}

声明了一个UserServiceImpl接口，让UserService实现指定方法

UserService.java

/**
 * Created by Zhao Wen on 2020/10/24
 */

@Service
public class UserService implements UserServiceImpl {

    @Autowired
    UserDaoImpl userDao;
    /**
     * service:查询所有用户信息
     * @return List<User>
     */
    @Override
    public List<User> queryAllService() {
        List<User> user = userDao.queryAll();
        return user;
    }
}

二、构造Json数据

UserController.java

/**
 * Created by Zhao Wen on 2020/10/24
 */

// 用户管理
@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserServiceImpl userService;

    @RequestMapping("/queryAll.do")
    @ResponseBody
    public String queryAllController() throws IOException {
        List<User> users = userService.queryAllService();
        ObjectMapper objectMapper = new ObjectMapper();
        ObjectNode root = objectMapper.createObjectNode();
        root.put("total",users.size());
        String jsonStr = objectMapper.writeValueAsString(users);
        root.put("rows",jsonStr);
        jsonStr = objectMapper.writeValueAsString(root).replaceAll("\"(?=[\\[])|\\\\+|(?<=])\"","");
        return jsonStr;
    }
}

三、EasyUi显示数据

这里是老师提供的代码，我根据自己的需求改了一些细节

	$('#dg').datagrid({
		url: 'user/queryAll.do', 
		method: 'post', 
		fitColumns: true,
		columns: [
			[{
					field: 'uid',
					title: 'id',
					width: 100,
					checkbox: true,
				}, {
					field: 'name',
					title: '姓名',
					width: 100,

				},
				{
					field: 'sex',
					title: '性别',
					width: 100,
				},
				{
					field: 'qq',
					title: 'QQ',
					width: 100,
				},
				{
					field: 'phone',
					title: '电话',
					width: 100,
				},
				{
					field: 'email',
					title: 'Eamil',
					width: 100,
				},
				{
					field: 'createDate',
					title: '创建时间',
					width: 100,

				}
			]
		],
		pagination: true,
		rownumbers: true,
		toolbar: '#tb',
	});

查询效果如下

四、细节与总结

1. jackson构造对象、数组混合数据时数据不干净

在构造诸如

{"total":1,"rows":"[{"uid":1,"name":"张三","sex":"男","qq":"33444","phone":"12933384444","email":"tozhangsan@126.com","createDate":"2020-10-24"}]"}

格式时，大概率会出现

{"total":1,"rows":["[{\"uid\":1,\"name\":\"张三\",\"sex\":\"男\",\"qq\":\"33444\",\"phone\":\"12933384444\",\"email\":\"tozhangsan@126.com\",\"createDate\":\"2020-10-24\"}]"]}

形式的数据，所以这个时候我们可以利用正则替换一下

如下

jsonStr = objectMapper.writeValueAsString(root).replaceAll("\"(?=[\\[])|\\\\+|(?<=])\"","");

1. 使用SpringMVC传递json数据时一定要加上注解

这个是我基础没有学扎实的缘故了。

在完成上述一点替换以后，发现还是没有正常显示。上网查了一下才发现没有加上注解

@ResponseBody

关于@ResponseBody的作用可以看这篇博客：@ResponseBody详解

1. EasyUI接收数据并显示的一些事

• 关于url

一定要使用dir/url或者url格式，例如

url: 'user/queryAll.do'

• 表格id对应问题

json数据

{
  "total": 1,
  "rows": [
    {
      "uid": 1,
      "name": "张三",
      "sex": "男",
      "qq": "33444",
      "phone": "12933384444",
      "email": "tozhangsan@126.com",
      "createDate": "2020-10-24"
    }
  ]
}

easyui中的datagrid构建表格，id一定要对应上json数据

				{
					field: 'uid',
					title: 'id',
					width: 100,
					checkbox: true,
				}

五、参考文献

list转json

解析json

easyUI datagrid官方文档