文章目錄
- 登陸成功跳轉使用者資訊界面
- Ⅰ.初步編寫 userinfo.jsp 展示資訊結構
- Ⅱ.完善dbHepler工具類，實作資料庫資料查詢
- Ⅲ.完善 userinfo.jsp，實作JavaScript擷取資料展示
- Ⅳ.效果展示
登陸成功跳轉使用者資訊界面
Ⅰ.初步編寫 userinfo.jsp 展示資訊結構
<%--
Created by IntelliJ IDEA.
User: 35192
Date: 2021/1/21
Time: 22:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<div align="center">
<div style="height: 15%;padding-top: 20px;">
<h1 style="height: 10%">用 戶 詳 情</h1>
</div>
<!-- 展示使用者資訊 -->
<div>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>密碼</th>
<th>年齡</th>
<th>性别</th>
<th>愛好</th>
<th>手機号</th>
<th>頭像</th>
<th>操作</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<%-- 展示界面顯示頭像 --%>
<td></td>
<td>
<%--問号右邊表示要傳遞的内容--%>
<a href="#" style="color: red">删除</a>
|
<a href="#" style="color:blue">修改</a>
|
<a href="#" style="color:blue">修改頭像</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html> 如下圖所示，我們僅僅是編寫了簡單的資訊展示結構。現在需要向裡面進行内容的填充，也就是與資料庫進行互動，将其中的使用者資訊擷取顯示在頁面中。
傳回頂部
Ⅱ.完善dbHepler工具類，實作資料庫資料查詢
- 這裡我們實作資料庫資訊的全部查詢，并且傳回resultSet結果集，在頁面中通過JavaScript的方式擷取對應字段值，進行周遊展示。
/**
* 網頁顯示資料庫資訊
* @return
*/
public ResultSet selectAll(){
try{
// 連接配接
getConnection();
// 建立sql語句
String sql = "select*from userinfo_copy1";
statement = connection.createStatement();
/**
* 使用JDBC連接配接資料庫需要4步：
* 1、加載驅動程式；
* 2、連接配接資料庫；
* 3、通路資料庫；
* 4、執行查詢；要用statement類的executeQuery()方法來下達select指令以查詢資料庫，executeQuery()方法會把資料庫響應的查詢結果存放在ResultSet類對象中供我們使用。即語句：ResultSet rs=s.executeQuery(sql);
*/
resultSet = statement.executeQuery(sql);
}catch (Exception e){
e.printStackTrace();
}
return resultSet;
} 傳回頂部
Ⅲ.完善 userinfo.jsp，實作JavaScript擷取資料展示
<%@ page import="com.zte.dbHelper" %>
<%@ page import="java.sql.ResultSet" %><%--
Created by IntelliJ IDEA.
User: 35192
Date: 2021/1/21
Time: 22:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<div align="center">
<div style="height: 15%;padding-top: 20px;">
<h1 style="height: 10%">用 戶 詳 情</h1>
</div>
<!-- 展示使用者資訊 -->
<div>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>密碼</th>
<th>年齡</th>
<th>性别</th>
<th>愛好</th>
<th>手機号</th>
<th>頭像</th>
<th>操作</th>
</tr>
<%
// 建立dbHelper工具類對象
dbHelper db = new dbHelper();
// 擷取資料庫查詢結果集
ResultSet resultSet = db.selectAll();
// 周遊結果集
while (resultSet.next()){
%>
<tr>
<td><%=resultSet.getInt(1)%></td> <!-- 擷取id -->
<td><%=resultSet.getString(2)%></td> <!-- 擷取username -->
<td><%=resultSet.getInt(3)%></td> <!-- 擷取pwd -->
<td><%=resultSet.getInt(4)%></td> <!-- 擷取age -->
<td><%=resultSet.getString(5)%></td> <!-- 擷取sex -->
<td><%=resultSet.getString(6)%></td> <!-- 擷取hobby -->
<td><%=resultSet.getString(7)%></td> <!-- 擷取phone -->
<td><img src="<%=resultSet.getString(8)%>" ></td> <%-- 展示界面顯示頭像 --%>
<td>
<%--問号右邊表示要傳遞的内容--%>
<a href="#" style="color: red">删除</a>
|
<a href="#" style="color:blue">修改</a>
|
<a href="#" style="color:blue">修改頭像</a>
</td>
</tr>
<%
}
%>
</table>
</div>
</div>
</body>
</html> 傳回頂部
Ⅳ.效果展示
傳回頂部