【JSP】登陆成功跳转用户信息界面显示基本用户信息

骑着蜗牛ひ追导弹'

已于 2022-08-24 17:09:43 修改

阅读量8.2k

点赞数 4

分类专栏： # JSP 文章标签： javascript

于 2021-01-27 23:28:37 首次发布

本文链接：https://blog.csdn.net/qq_45797116/article/details/113279971

版权

JSP 专栏收录该内容

6 篇文章 22 订阅

订阅专栏

文章目录

登陆成功跳转用户信息界面

登陆成功跳转用户信息界面

Ⅰ.初步编写 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>

返回顶部

Ⅳ.效果展示

在这里插入图片描述

返回顶部

上一篇：实现注册页面：用户注册时用户名长度限制 下一篇：用户信息界面操作 ---- 删除

骑着蜗牛ひ追导弹'

关注

4
点赞
踩
80

收藏

觉得还不错? 一键收藏
打赏
2
评论
【JSP】登陆成功跳转用户信息界面显示基本用户信息

文章目录登陆成功跳转用户信息界面Ⅰ.初步编写 userinfo.jsp 展示信息结构Ⅱ.完善dbHepler工具类，实现数据库数据查询Ⅲ.完善 userinfo.jsp，实现JavaScript获取数据展示Ⅳ.效果展示登陆成功跳转用户信息界面Ⅰ.初步编写 userinfo.jsp 展示信息结构<%-- Created by IntelliJ IDEA. User: 35192 Date: 2021/1/21 Time: 22:04 To change this temp..
复制链接

扫一扫