用JSP實現一個查詢四、六級單詞的網頁
阿新 • • 發佈：2018-12-10
學習任務要求：
- 建表：在MySQL資料庫中建立一個四、六級詞彙表，至少包含：單詞、詞性、釋義、難度等內容。
- 參照金山、漢典、有道詞典的風格建立一個查詢單詞的JSP網頁。
- 反查功能：能依據釋義內容，模糊查出對應的單詞。
- 統計功能：實現對單詞表中a，b，c到z開頭單詞個數的統計，結果以表格輸出到網頁上。
- 實踐：在JSP網頁中能根據拼寫、詞性、難度範圍等資訊查出所需詞彙的釋義。
一、在MySQL資料庫中建立一張四、六級單詞表
在這裡，我們會用到前面所學的資料庫的知識，運用圖形化管理工具Navicat Premium 連線MySQL資料庫，然後建立一個四、六級的單詞資料表。
1.連線工作：
開啟mysql的服務，開啟計算機的管理服務選項。
2.製作表格。
製作一張內含單詞各個資訊的表格。
二、建立一個JSP查詢網頁。
1.Tomcat的設定。
在這裡，我們將會用到Tomcat，關於Tomcat的設定與使用在前面文章有作介紹，在此不再贅述。
最開始，我們直接雙擊bin目錄下的“startup.bat”， 確保Tomcat是啟動狀態。
3.單詞查詢網頁的建立。
要使得各個網頁具有相應的查詢功能，我們要使用編輯器編寫程式碼。 1）Homepage.jsp檔案 Homepage.jsp是仿照各個詞典編寫的主頁面，每一個查詢選項都會顯示在上面，我們可以在上面進行選擇。
程式碼如下：
<%@ page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@page import="java.sql.*" %> <%--匯入java.sql包--%> <html> <head> <title>查詢單詞主頁</title> </head> <body style="background:url(http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/02/33/5ab12b8f07e0fd50c2b81c67b6fa1616.jpg) center;background-size:cover"><%--設定背景圖片--%> </br></br></br> <form action="search.jsp" method="POST"><%-- 使用post方法跳轉至查詢介面--%> <table align="center"> <h1 style="text-align:center;font-size:50px">大唐詞典</h1> <tr> <td>英文:</td> <td><input type="text" name="english"></td> </tr><tr> <td>詞性:</td> <td><input type="text" name="pos"></td> </tr><tr> <td>中文:</td> <td><input type="text" name="chinese"></td> </tr><tr> <td>難度:</td> <td><input type="text" name="level"></td> </tr><tr> <th></th> <th><input type="submit" value=" 查 詢 "></th> <th><input type="reset" value=" 重 置 "></th> </table> </form> <form action="count.jsp" method="POST"> <table align="center"> <tr> </br></br> <td><input type="submit" value=" 統計首字母開頭單詞個數（A-Z）" ></td> </tr> </table> </body> </html>
在瀏覽器位址列中輸入http://localhost:8080/homepage.jsp ，網頁的首頁如下所示：
程式碼如下：
<%@ page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<html>
<head>
<title >單詞查詢</title>
</head>
<body style="background:url(http://pic1.win4000.com/wallpaper/7/568a00d18aa49.jpg) center;background-size:cover">
<%
try {
Class.forName("com.mysql.jdbc.Driver"); ////驅動程式名
String url = "jdbc:MySQL://localhost:3306/wz?&useSSL=false&serverTimezone=UTC"; //資料庫名
String username = "root"; //資料庫使用者名稱
String password = "965827"; //資料庫使用者密碼
Connection conn = DriverManager.getConnection(url, username, password); //連線狀態
if(conn != null){
out.print("資料庫連線成功！");
%>
<table align="center" border="2">
<tr>
<td width="100" english="title">英文</td>
<td width="100" pos="title">詞性</td>
<td width="100" chinese="title">中文</td>
<td width="100" level="title">難度</td>
</tr>
<%
Statement stmt = null;
ResultSet rs = null;
String english =request.getParameter("english");
String pos =request.getParameter("pos");
String ch =request.getParameter("chinese");
String chinese=new String(ch.getBytes("ISO-8859-1"),"UTF-8");
String level =request.getParameter("level");
String sql = "SELECT * FROM cet WHERE english like '%"+english+"%' and pos like '%"+pos+"%' and chinese like '%"+chinese+"%' and level like '%"+level+"%'";
//查詢語句
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
out.print("查詢結果：");
while (rs.next()) {%>
<tr>
<td width="100" ><%=rs.getString("english") %></td>
<td width="100" ><%=rs.getString("pos") %></td>
<td width="100"><%=rs.getString("chinese") %></td>
<td width="100"><%=rs.getString("level") %></td>
</tr>
<%
}
}
else{
out.print("連線失敗！");
}
}
catch (Exception e)
{
e.printStackTrace();
out.print("資料庫連線異常！");
}
%>
</table>
<h1 align="center" ><input type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回上一頁"> </h1>
</body>
</html>
查詢例項：
程式碼如下：
<%@ page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<html>
<head>
<title >單詞統計</title>
</head>
<body style="background:url(http://img2.ph.126.net/C942k-cgL3y7qmbuk7YXaA==/3213318334229068571.jpg) center;background-size:cover">
<%
try {
Class.forName("com.mysql.jdbc.Driver"); ////驅動程式名
String url = "jdbc:MySQL://localhost:3306/wz?&useSSL=false&serverTimezone=UTC"; //資料庫名
String username = "root"; //資料庫使用者名稱
String password = "965827"; //資料庫使用者密碼
Connection conn = DriverManager.getConnection(url, username, password); //連線狀態
if(conn != null){
out.print("資料庫連線成功！"); %>
<h2>首字母單詞個數統計：</h2>
<table align="center" border="2">
<tr>
<td width="50" initial="title">首字母</td>
<td width="50" count(initial)="title">統計</td>
</tr>
<%
Statement stmt = null;
ResultSet rs = null;
String sql = "SELECT initial,count(initial) FROM cet GROUP BY initial;"; //查詢語句
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while (rs.next()) {%>
<tr>
<td width="50"><%=rs.getString("initial") %></td>
<td width="50"><%=rs.getString("count(initial)") %></td>
</tr>
<%}
}
else{
out.print("連線失敗！");
}
}
catch (Exception e) {
e.printStackTrace();
out.print("資料庫連線異常！");
}
%>
</table>
<h1 align="center" ><input type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回"> </h1>
統計詳情如下：
三、在JSP網頁中進行單詞查詢
確保 Tomcat 伺服器已啟動的情況下， 在瀏覽器位址列中輸入查詢單詞的首頁介面，在相應的框內輸入查詢要求，實際詳情如下：
