思路

实现两个jsp页面，第一个页面实现java的接口功能，即访问数据库并以json格式返回给前端，另一个页面其实就是纯前端的页面，用于展示信息。其实jsp本质上也就是servlet，可以直接在jsp里面写java代码，完全可以当做是java来使用。

jsp后台

在jsp里使用"<%! %>"标签可以用于声明类，这里我用来声明一个类HomeMessage，该类的成员变量其实就对应了数据库的表的列。

<%!
public class HomeMessage {
    
    private String name;// 姓名
    private String email; //邮箱
    private String mobile;//手机号码
    private String home;
}
%>
这里省略了变量对应的get方法和set方法

在jsp中使用"<% %>"便签可以写java代码，我在这里面实现了利用jdbc访问数据库，并返回数据库的信息，然后利用mysql的limit功能来实现简单的分页，最后构造json，返回给前端。

<%
        //注册mysql驱动
        Class.forName("com.mysql.jdbc.Driver");
        //mysql的URL
        String url="jdbc:mysql://localhost:3306/city";
        String user="root";
        String password="root";
        Connection conn = DriverManager.getConnection(url,user,password);
        Statement stmt = conn.createStatement();
        String pageSize = request.getParameter("pageSize");
        String pageIndex = request.getParameter("pageIndex");
        String sql = "SELECT * FROM home_message limit " + (Integer.parseInt( pageIndex ) - 1) * 3 + ",3";  
        String allNumSql = "SELECT count(*) FROM home_message";
        ResultSet rs = stmt.executeQuery(sql);
        //查询条数
        List<HomeMessage> list = new ArrayList<HomeMessage>();
        while(rs.next()){
            HomeMessage change = new HomeMessage();
            change.setName( rs.getString("name") );
            change.setHome( rs.getString("home") );
            change.setEmail( rs.getString("email") );
            change.setMobile( rs.getString("mobile"));
            list.add(change);
        }
        //总记录数
        Statement allNumStmt = conn.createStatement();
        ResultSet allNumSet = allNumStmt.executeQuery( allNumSql );
        int allNumCount = 0;
        while(allNumSet.next()){
            allNumCount = allNumSet.getInt(1);
        }
        //构造json
        Map<String,Object> map = new HashMap<String, Object>();
        map.put( "list", list );
        map.put( "pageCount", allNumCount / Integer.parseInt( pageSize ) );
        String jsonStr = JSONObject.toJSONString( map );
        response.setContentType( "text/json" );
        PrintWriter writer = response.getWriter();
        writer.write( jsonStr );
        writer.flush();
        writer.close();
        //关闭
        conn.close();
        stmt.close();
        allNumStmt.close();
        rs.close();
        allNumSet.close();
    %>

jsp前端

jsp前端其实就是普通的前端代码，获取到信息后展示在页面上即可。详情请查看（https://github.com/wumingzhizhu/nutz-test/tree/master/src/main/webapp/view）地址，其中show.jsp就是前端页面，showAjax.jsp就是后台页面。对于分页的插件以及前端的技术，请参考另外一篇文章"angularjs+bootstrap自定义分页（http://www.jianshu.com/p/c39430338e5f）"。

效果图

image.png

注意事项

在jsp写java后台代码的时候，需要使用例如（<%@ page import="javax.sql.DataSource" %>）这种方式来引进java对应的包，这里除了用到了jdk的包之外，还用到了fastjson，这个主要用于构造json格式的数据的，如果是maven工程，可以直接在pom.xml文件引入fastjson。

<dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.28</version>
        </dependency>
</dependencies>