由于工作需要，无法接触到项目的后台代码，所以需要在jsp页面实现访问数据库的功能，然后实现页面的展示。
思路
实现两个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>
image.png
- 这里主要是利用jdbc来访问mysql数据库，因此需要有mysql的驱动，如果该web项目是tomcat启动的，可以直接在tomcat的lib目录放一个mysql的驱动包即可，或者直接放在web项目的lib目录里面。
