由于工作需要，無(wú)法接觸到項(xiàng)目的后臺(tái)代碼，所以需要在jsp頁(yè)面實(shí)現(xiàn)訪問(wèn)數(shù)據(jù)庫(kù)的功能，然后實(shí)現(xiàn)頁(yè)面的展示。
思路
實(shí)現(xiàn)兩個(gè)jsp頁(yè)面，第一個(gè)頁(yè)面實(shí)現(xiàn)java的接口功能，即訪問(wèn)數(shù)據(jù)庫(kù)并以json格式返回給前端，另一個(gè)頁(yè)面其實(shí)就是純前端的頁(yè)面，用于展示信息。其實(shí)jsp本質(zhì)上也就是servlet，可以直接在jsp里面寫(xiě)java代碼，完全可以當(dāng)做是java來(lái)使用。
jsp后臺(tái)
- 在jsp里使用"<%! %>"標(biāo)簽可以用于聲明類，這里我用來(lái)聲明一個(gè)類HomeMessage，該類的成員變量其實(shí)就對(duì)應(yīng)了數(shù)據(jù)庫(kù)的表的列。
<%!
public class HomeMessage {
private String name;// 姓名
private String email; //郵箱
private String mobile;//手機(jī)號(hào)碼
private String home;
}
%>
這里省略了變量對(duì)應(yīng)的get方法和set方法
- 在jsp中使用"<% %>"便簽可以寫(xiě)java代碼，我在這里面實(shí)現(xiàn)了利用jdbc訪問(wèn)數(shù)據(jù)庫(kù)，并返回?cái)?shù)據(jù)庫(kù)的信息，然后利用mysql的limit功能來(lái)實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)，最后構(gòu)造json，返回給前端。
<%
//注冊(cè)mysql驅(qū)動(dòng)
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);
//查詢條數(shù)
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);
}
//總記錄數(shù)
Statement allNumStmt = conn.createStatement();
ResultSet allNumSet = allNumStmt.executeQuery( allNumSql );
int allNumCount = 0;
while(allNumSet.next()){
allNumCount = allNumSet.getInt(1);
}
//構(gòu)造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();
//關(guān)閉
conn.close();
stmt.close();
allNumStmt.close();
rs.close();
allNumSet.close();
%>
jsp前端
jsp前端其實(shí)就是普通的前端代碼，獲取到信息后展示在頁(yè)面上即可。詳情請(qǐng)查看（https://github.com/wumingzhizhu/nutz-test/tree/master/src/main/webapp/view）地址，其中show.jsp就是前端頁(yè)面，showAjax.jsp就是后臺(tái)頁(yè)面。對(duì)于分頁(yè)的插件以及前端的技術(shù)，請(qǐng)參考另外一篇文章"angularjs+bootstrap自定義分頁(yè)（http://www.itdecent.cn/p/c39430338e5f）"。
效果圖
image.png
注意事項(xiàng)
- 在jsp寫(xiě)java后臺(tái)代碼的時(shí)候，需要使用例如（<%@ page import="javax.sql.DataSource" %>）這種方式來(lái)引進(jìn)java對(duì)應(yīng)的包，這里除了用到了jdk的包之外，還用到了fastjson，這個(gè)主要用于構(gòu)造json格式的數(shù)據(jù)的，如果是maven工程，可以直接在pom.xml文件引入fastjson。
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
</dependencies>
image.png
- 這里主要是利用jdbc來(lái)訪問(wèn)mysql數(shù)據(jù)庫(kù)，因此需要有mysql的驅(qū)動(dòng)，如果該web項(xiàng)目是tomcat啟動(dòng)的，可以直接在tomcat的lib目錄放一個(gè)mysql的驅(qū)動(dòng)包即可，或者直接放在web項(xiàng)目的lib目錄里面。
