黑马就业班（02.JavaWeb+项目实战\10.用户信息案例开发）：基于之前用户信息查询案例（视频21-13.50，使用断点debug查找错误，重点！！）

最新推荐文章于 2023-02-21 09:45:35 发布

KongJetLin

最新推荐文章于 2023-02-21 09:45:35 发布

阅读量1.8k

点赞数 2

分类专栏： Java资料文章标签： java web

本文链接：https://blog.csdn.net/LKJgdut/article/details/104403535

版权

本文介绍了在JavaWeb项目中基于用户信息查询案例的开发过程，涉及登录功能、页面样式调整、数据库操作、前端JS调试、分页查询等多个环节。通过详细的步骤讲解和代码实现，涵盖了添加、删除、修改、分页等功能，并强调了JavaScript的调试和错误检查，以及如何使用断点debug找出代码错误。同时，文章强调了JS代码的严谨性和使用浏览器F12调试的重要性。

摘要由CSDN通过智能技术生成

本文对应的自己项目：day09_Case

今日内容

1. 综合练习
	1) 简单功能
		1. 列表查询
		2. 登录
		3. 添加
		4. 删除
		5. 修改
		
	2) 复杂功能
		1. 删除选中
		2. 分页查询
			* 好处：
				1. 减轻服务器内存的开销
				2. 提升用户体验
		3. 复杂条件查询

在之前用户信息查询案例的基础上，添加新的功能。之前只有列表查询的功能，现在将其他功能补充上。
注意，如果我们导入项目的时候，相应的web文件夹只是普通的文件夹，而不是带一个蓝色点的web文件夹，而且在添加Artifacts的时候没有对应module的Artifacts，我们在File-Project Structure-Facts 下为当前的项目添加web，这样web文件夹就变成真正的web文件夹，而且就可以给项目添加Artifacts，项目的Deployment可以正常部属Artifacts，项目可以正常运行。
导入项目的时候，如果发现Servlet相关类都是红色的，说明我们需要给当前项目的Dependencies添加Tomcat相关的包，参考文章：添加链接描述

1、页面调整
我们将用户信息展示页面list.jsp页面调整为我们需要的样式。其实将来开发中页面的调整一般不需要我们来完成，但是我们可以尝试完成。（具体参考视频2解析）
原来的样式为
在这里插入图片描述

调整为如下样式
在这里插入图片描述
修改后，相应的样式就与我们要求的类似，如下图，代码也在下方。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <!-- 使用Edge最新的浏览器的渲染方式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
        width: 默认宽度与设备的宽度相同
        initial-scale: 初始的缩放比，为1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>用户信息管理系统</title>

        <!-- 1. 导入CSS的全局样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
        <script src="js/jquery-2.1.0.min.js"></script>
        <!-- 3. 导入bootstrap的js文件 -->
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            td, th {
    
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h3 style="text-align: center">用户信息列表</h3>

            <%--
            2、接下来我们要设置有三个文本框的表单。这里直接使用Bootstrap封装的样式即可。
            直接在BootStrap中文网-文档-全局CSS样式查询相应的样式，其中“内联表单”样式就是我们需要的。
            我们将这个样式复制下来修改为我们需要的样式即可。
            首先，同样为了方便控制样式，用一个div将这个“内联表单括起来”。
            首先让表单与按钮在同一行，我们设置表单左浮动，而2个按钮是右浮动，这样看起来就是在同一行。 
            --%>
            <div style="float: left">
                <form class="form-inline">

                    <div class="form-group">
                        <label for="exampleInputName2">姓名</label>
                        <input type="text" class="form-control" id="exampleInputName2">
                    </div>
                    <%--
                    这里将姓名的代码复制一份，修改id的值，并将label for="exampleInputName3"的值修改为与id的值相同即可。
                    这个按钮的功能是点击“籍贯”，就可以获取相应文本区域的光标。
                    --%>
                    <div class="form-group">
                        <label for="exampleInputName3">籍贯</label>
                        <input type="text" class="form-control" id="exampleInputName3">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail2">邮箱</label>
                        <input type="email" class="form-control" id="exampleInputEmail2">
                    </div>
                    <%--将按钮的文本修改为：“查询”--%>
                    <button type="submit" class="btn btn-default">查询</button>
                </form>
            </div>


            <%--
            1、首先，添加右侧2个按钮：“添加联系人”、“删除选中”
            使用一个div区域将按钮包围起来，方便对样式进行控制。
            我们将div区域设置CSS样式，直接使用标签的style属性设置即可，注意style属性的各个样式之间用;隔开。
            右侧浮动，并且设置一下外边距，设置外边距，调整2个按钮与表格之间的距离。
            --%>
            <div style="float: right; margin: 8px;">
                <a class="btn btn-primary" href="add.html">添加联系人</a></td>
                <a class="btn btn-primary" href="add.html">删除选中</a></td>
            </div>

            <table border="1" class="table table-bordered table-hover">
                <tr class="success">
                    <%--
                    4、最后，再给表格前面加一行复选框的行
                    --%>
                    <th><input type="checkbox"></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th