Easy UI + Servlet + MySQL 显示数据库里面的记录

查阅了网上很多资料，终于把数据库里面的数据显示到easyUI界面了，记录一下，以后忘了可以再回来看看。

其中需要注意的是：

1.EsayUI需要的datagrid是json格式的，所以取出结果数据后需要转换一下。

2.datagrid里面格式为{"total":2，"rows":[{"adminID":2,"adminName":"admin","adminPassword":"admin"},......]}

页面嵌入内容为EasyUI网上的 EasyUI 创建 CRUD 应用，

一、这里需要引入的easyUI的css、js分别为.../themes/default/easyui.css、.../themes/icon.css、jQuery、.../jquery.easyui.min.js、easyui-lang-zh_CN.js    还有相关的themes，plugins文件等

需要修改的地方有两个：

1、<table  url=".....">  url 为自己写的servlet请求,这里是获取数据,例如:我这里是getAdmin

2、<th field="....">  标题栏的field为对应数据库里面的字段名,例如:adminId...

二、创建后台jdbc连接

public class JDBC{

//省略，静态方法getConnection返回一个Connection对象

}

三、创建Servlet

继承HttpServlet并重写doGet()/doPost();        同时在web.xml中注册这个servlet，或者直接在类前面加@WebServlet("/getAdmin")   注：  加了注解再配置xml或报错。二者选其一

四、导jar包

需要json和connector的包：

commons-beanutils-1.8.0.jar

commons-collections-3.1.jar
commons-lang-2.4.jar
commons-logging-1.0.4.jar
ezmorph-1.0.6.jar
json-lib-2.3-jdk15.jar
mysql-connector-java-5.1.3-rc-bin.jar

五、获取数据库中的结果集,并调用第六步中的转换方法

	private String getAdmins(){
		Connection conn = null;
		Statement st = null;
		ResultSet rs = null;
		String result = "";  //返回结果
		try {
			conn = JDBC.getConnection();
			st = conn.createStatement();
			rs = st.executeQuery("select * from admin");
			//将结果转换成json
			result = resultSetToJson(rs);
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			//关闭资源rs.st.conn
		}
		return result;
	}

六、将结果集转换成json格式

private String resultSetToJson(ResultSet rs) throws SQLException{
		//保存结果
		JSONObject result = new JSONObject();
		//以数组的形式保存数据库结果集
		JSONArray jsonArr= new JSONArray();
		//获取列数
		ResultSetMetaData meta = rs.getMetaData();
		int colmun = meta.getColumnCount();
		/*result.put("total", colmun);   //添加行数    :之前犯的错误*/
		//保存列数
		int rows = 0;
		//遍历结果集
		while(rs.next()){
			//将每行当做一个对象保存
			JSONObject obj = new JSONObject();
			for (int i = 1; i <= colmun; i++) {
				String colName = meta.getColumnLabel(i);    //获取列名
				String value = rs.getString(colName);    //获取列名对应的值
				obj.put(colName, value);    //将列名-值键值对写入JSONObject
			}
			jsonArr.add(obj);    //添加到数组中
			rows ++;
		}
		result.put("total", rows);   //添加行数
		result.put("rows", jsonArr);
		return result.toString();
	}

七、将第五步得到字符串输出给页面（在doPost()/doGet方法中）

		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("application/json;charset=utf-8");
		String str = getAdmins();
		PrintWriter out = null;
		//获取response的输出流
		out = resp.getWriter();
		if(out != null){
			out.write(str);
			out.close();
		}

八、测试
main方法测试getAdmins()方法的输出：

{"total":3,"rows":[{"adminID":"2","adminName":"admin","adminPassword":"admin"},{"adminID":"4","adminName":"admin2","adminPassword":"admin2"}]}

页面上的输出，表格列对应表字段的数据

九、总结

过程：

1、从数据库中查询到的数据在ResultSet中，将ResultSet中的数据 每行 转换成一个JSONObject，添加到JSONArray中

2、返回数据格式为{"total":总行数, "rows":JSONArray}   返回总行数和得到的  数组数据

3、当请求Servlet的时候、用response对象将获取的数据输出到页面

4、datagrid请求url为Servlet的名字，th的field属性与数据库表字段名对应

5、显示页面

******************************************

后记：

贴出的代码中有一处错误，感谢答主的指教：total存储的是行数，而我保存进去的确实列数，已改正，