在准备第一个小实例的时候,其实是想做一个人员信息增删该查的功能,最后想想还是先做一个显示效果的展示,对比一下html标签、jQuery-EasyUI和Ext4相应的显示效果,以及显示的代码实现方式。要说明的是,这只是展示效果,不做优劣的对比,不同的框架所实现的功能各有各的长处,在选择前台框架时功能性应该放在首位。好了,废话不多说,直接进入正题。
先铺一张工作图
最近几年这个intellij idea很火,为了体验,也为了学习,我放弃了上班在用的eclipse和MyEclipse使用idea来进行开发,然后我使用的是java目前最新的jdk1.8。同时我发现我使用intellij idea2016.1.2也必须在环境变量中配置1.8的jdk才能启动。在这里要说的是idea这个开发工具我也是第一次用,也不是很熟练。就像昨天我搭建环境的时候准备使用Maven的方式,结果oracle的驱动包怎么也同步不下来,找了网上各种解决办法还是没有弄好,最后觉得这样太拖节奏了,就还是采用了我最熟悉的手工导jar包的方式。然后在以后的开发中慢慢转成Maven的方式。所以如果有高手看到我的用法有什么不妥的地方,欢迎指出了,但是不有喷我,我的承受能力很弱。
在上图,左边就是我的这个实例的目录结构。要提前把待会要用到的jar包(fastjson和ojdbc6),jQuery-EasyUI框架和Ext4框架准备好。
接着来说说后台实现
后台使用流行的mvc设计模式来搭建,就像这个小实例的Service层并没有做什么操作,但是为了让它看起来复合mvc模式,我还是加上了Service层。
既然是第一个小实例,我便使用了最基础的servlet来编写,并且使用java原生的jdbc来进行查询操作,这里要说明的是,在本实例中,只做了一个简单的查询操作。在以后我会完成增删改查的一系列操作。接下来贴代码:
数据库的工具类
package com.leo.utils;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* company:****技术股份有限公司
* Created by leo on 2016/9/17.
*/
public class DBUtil {
public void close(ResultSet rs, PreparedStatement ps, Connection conn){
if(rs != null) try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
if(ps!=null) try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
if(conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
控制层的Servlet.java
package com.leo.servlet;
import com.alibaba.fastjson.JSONObject;
import com.leo.service.Service;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;
/**
* company:**数码技术股份有限公司
* Created by leo on 2016/9/17.
*/
public class Servlet extends HttpServlet {
private Service service = new Service();
protected void doPost(HttpServletRequest request, HttpServletResponse response){
List<Map<String,Object>> userData = service.queryUserData();
PrintWriter out = null;
try {
out = response.getWriter();
JSONObject jsonObject = new JSONObject();
out.write(jsonObject.toJSONString(userData));
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response){
doPost(request, response);
}
}
业务层的Service.java
package com.leo.service;
import com.leo.dao.Dao;
import java.util.List;
import java.util.Map;
/**
* company:**数码技术股份有限公司
* Created by leo on 2016/9/17.
*/
public class Service {
private Dao dao = new Dao();
public List<Map<String,Object>> queryUserData(){
try {
return dao.selectUserData();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
持久层的Dao.java
package com.leo.dao;
import com.leo.utils.DBUtil;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* company:**数码技术股份有限公司
* Created by leo on 2016/9/17.
*/
public class Dao {
public List<Map<String, Object>> selectUserData() throws Exception{
Class.forName("oracle.jdbc.OracleDriver");
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl","leo","leo");
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "select employee_id,first_name,last_name,email,phone_number,hire_date,salary from employees";
ps=conn.prepareStatement(sql);
rs=ps.executeQuery();
List<Map<String,Object>> list = new ArrayList<>();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
while (rs.next()){
Map<String,Object> map = new HashMap<>();
map.put("employeeid",rs.getString("employee_id".toUpperCase()));
map.put("firstname",rs.getString("first_name").toUpperCase());
map.put("lastname",rs.getString("last_name").toUpperCase());
map.put("email",rs.getString("email".toUpperCase()));
map.put("phonenumber",rs.getString("phone_number".toUpperCase()));
map.put("hiredate",sdf.format(rs.getDate("hire_date".toUpperCase())));
map.put("salary",rs.getLong("salary".toUpperCase()));
list.add(map);
}
new DBUtil().close(rs,ps,conn);
return list;
}
}
java代码编写完成以后要在web.xml配置servlet和拦截路径:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>Servlet</servlet-name>
<servlet-class>com.leo.servlet.Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Servlet</servlet-name>
<url-pattern>/queryServlet</url-pattern>
</servlet-mapping>
</web-app>
接下来就是前台的实现代码:
<%--
Created by IntelliJ IDEA.
User: leo
Date: 2016/9/17
Time: 15:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String context = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>数据展示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<link rel="stylesheet" type="text/css" href="jslib/jQuery-easyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jslib/jQuery-easyUI/themes/icon.css">
<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jslib/jQuery-easyUI/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="jslib/ext4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="jslib/ext4.2.1/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
debugger;
$.ajax({
url:'<%=context%>queryServlet',
dataType:'json',
success:function(data){
$("#display").html("");
$("#display").append("<tr> <th>employee_id</th> <th>first_name</th> <th>last_name</th> <th>email</th> <th>phone_number</th> <th>hire_date</th> <th>salary</th> </tr>");
for(var i in data){
$("#display").append("<tr> <td>"+data[i].employeeid+"</td> <td>"+data[i].firstname+"</td> <td>"+data[i].lastname+"</td> <td>"+data[i].email+"</td> <td>"+data[i].phonenumber+"</td> <td>"+data[i].hiredate+"</td> <td>"+data[i].salary+"</td> </tr>");
}
$("#display_easyui").datagrid({
data:data,
singleSelect:true,
striped:true
});
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['employeeid', 'firstname', 'lastname','email','phonenumber','hiredate','salary']
});
var store = Ext.create('Ext.data.Store', {
model:'User',
data: data
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text : 'employee_id',
sortable : true,
dataIndex: 'employeeid'
},
{
text : 'first_name',
sortable : true,
dataIndex: 'firstname'
},
{
text : 'last_name',
sortable : true,
dataIndex: 'lastname'
},
{
text : 'email',
sortable : true,
dataIndex: 'email'
},
{
text : 'phone_number',
sortable : true,
dataIndex: 'phonenumber'
},
{
text : 'hire_date',
sortable : true,
dataIndex: 'hiredate'
},
{
text : 'salary',
sortable : true,
dataIndex: 'salary'
}
],
title: 'Array Grid',
renderTo: 'display_ext',
viewConfig: {
stripeRows: true
}
});
}
});
})
</script>
</head>
<body>
<h2>使用html原生表格标签来展示数据</h2>
<table id="display" border="1" cellspacing="0" cellpadding="3">
</table>
<h2>使用EasyUI框架来展示数据</h2>
<table id="display_easyui" class="easyui-datagrid" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th data-options="field:'employeeid',align:'center'">employee_id</th>
<th data-options="field:'firstname',align:'center'">first_name</th>
<th data-options="field:'lastname',align:'center'">last_name</th>
<th data-options="field:'email',align:'center'">email</th>
<th data-options="field:'phonenumber',align:'center'">phone_number</th>
<th data-options="field:'hiredate',align:'center'">hire_date</th>
<th data-options="field:'salary',align:'center'">salary</th>
</tr>
</thead>
</table>
<h2>使用Ext4.*框架来展示数据</h2>
<div id="display_ext"></div>
</body>
</html>
在前台中使用了三种展现形式。
- 第一种是直接使用JQuery生成html代码
在这种方式中,只需要引入jQuery的js。通过JQuery的ajax访问后台,获取要展示的数据,然后通过for循环遍历后台返回的json数据,并将数据拼接成html代码填充到页面中即可。 - 第二种是使用jQuery-EasyUI框架
在这种方式中,需要先定义表格的表头(也可以在js中定义表头),接着就是将后台返回的json数据传给datagrid框架即可。 - 第三种是使用Ext4框架
在这种方式中,相对于上面两种要复杂,但是使用Ext不需要编写过多的html代码。对于我们这个小实例来说,需要先定义一个数据模型,这个模型要跟返回的json数据相匹配。 接着要创建数据仓库,并且将后台返回的数据附加到数据仓库中。最后才能定义面板,在面板中需要定义表头并将数据仓库填充到面板中。
程序运行后的效果