day43_crud

news2025/10/31 21:35:47

在这里插入图片描述

一、CRUD

(create, read (retrieve), update, delete)

增查改删

1.1 代码规范

com.qf.功能名.类名

–

com.qf.model.Xxx 实体类

com.qf.util.Xxx 工具类

com.qf.servlet.XxxServlet Servlet类,主要是做接收请求作出响应

com.qf.dao.XxxDao Dao类. Data Access Object,Dao类主要操作JDBC,与数据库交互

1.2需求

1 登录.(index.jsp)

登录失败,继续留在当前页面,并给出错误提示

登录成功,跳转主页面(admin.jsp)

2 注册.

在index.jsp首页,给出注册按钮,点击后,跳转至注册页面.

输入数据,点击注册,如果注册成功,跳转至首页登录.

如果不成功,跳转错误页面.

ps: 注册即向数据库插入一条数据

3 主页面

主页面以表格的形式,展现所有用户信息.

在表格中多出一列【操作】，该列的值是【更新|删除】

4 更新

点击每条数据后的更新按钮，跳转更新页面。【数据回显】

5 删除

点击每条数据后的删除按钮，删除该条数据

1.3 设计数据库

CREATE TABLE `admin` (
  `Adminname` varchar(20) NOT NULL,
  `PASSWORD` varchar(20) NOT NULL,
  `phone` varchar(11) NOT NULL,
  `address` varchar(20) NOT NULL,
  PRIMARY KEY (`Adminname`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

1.4 环境搭建

创建web项目，创建对应的包结构,导入依赖包

  <dependencies>
    <!-- 引入servlet依赖 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <!-- 引入jsp依赖 -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>javax.servlet.jsp-api</artifactId>
      <version>2.3.1</version>
    </dependency>
    <!-- mysql驱动 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>
    <!-- 阿里巴巴数据库连接池 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>
    <!-- jstl -->
    <dependency>
      <groupId>javax.servlet.jsp.jstl</groupId>
      <artifactId>jstl-api</artifactId>
      <version>1.2</version>
      <exclusions>
        <exclusion>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
        </exclusion>
        <exclusion>
          <groupId>javax.servlet.jsp</groupId>
          <artifactId>jsp-api</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

    <dependency>
      <groupId>org.glassfish.web</groupId>
      <artifactId>jstl-impl</artifactId>
      <version>1.2</version>
      <exclusions>
        <exclusion>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
        </exclusion>
        <exclusion>
          <groupId>javax.servlet.jsp</groupId>
          <artifactId>jsp-api</artifactId>
        </exclusion>
        <exclusion>
          <groupId>javax.servlet.jsp.jstl</groupId>
          <artifactId>jstl-api</artifactId>
        </exclusion>
      </exclusions>
    </dependency>
  </dependencies>

根据数据库，创建实体类。【ORM】

二、登录

2.1 编写login.jsp 首页

<%--
  +------------------+
      天 道 酬 勤    
  +------------------+
  Created by QiuShiju.
  Date: 2023/5/23
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h2>登录</h2>
    <form action="${pageContext.request.contextPath}/login" method="post">
        用户名<input type="text" name="Adminname"><br>
        密码 <input type="password" name="password"><br>
        <span style="color: red">${msg}</span>
        <input type="submit" value="登录"><br>
    </form>
</body>
</html>

2.2 LoginServlet

2.3 AdminService

2.4 AdminDao

三、首页 – 展现全部

需求: 登录成功后,跳转主页面时,展现数据库的全部数据

特别注意:

登录成功后需要查询全部展现,删除完后需要查询全部展现,更新完后需要查询全部展现.

所以,将查询全部并展现的动作抽取成一个单独的AdminListServlet,谁要查全部,直接发发请求让其执行即可

实现:

3.1 登录成功后,再查询全部数据调用dao查全部

3.2 全部数据存入请求域,再跳转至页面

3.3 再到页面上展现全部数据

四、删除

4.1 设计删除按钮,及删除请求拼接参数

设计成,点击删除弹出确认框.点击[确定]即发请求,删除数据. 点击[取消],则不删除.

PS: 使用jquery实现,引入jquery库

前端

后端AdminDelServlet

重写发请求,查询全部,跳转admin.jsp展现全部

在页面加载时,根据删除是否成功,弹框提示

4.2 映射

4.3 接收请求

4.4 调用service-dao删除

4.5 响应

删除完后,重新再查全部

五、更新

更新的情况是

在每一行数据后面,有更新按钮
点击更新,跳转至更新页面
[重要]此时页面会有该条数据的数据回显,不是空表格
重新输入一些数据
点击提交按钮,执行更新
重新看到最新更新后的数据(重新查全部)

5.1 设计更新按钮,及请求

5.2 Servlet接收请求,查询数据

5.3 跳转至更新页面,并展现旧值

5.4 输入新值,发请求,接收所有参数.

5.5 执行更新

5.6 跳转至首页,查看全部

六、注册

6.1 登录页添加注册按钮

6.2 编写注册页面

ps：添加表单校验功能，没有输入数据，不允许提交

<body>
<h1>注册新用户</h1>
<form action="${pageContext.request.contextPath}/regist" method="post">
<table>
    <tr>
        <td>
            用户名
        </td>
        <td>
            <input type="text" name="username">
        </td>
    </tr>
    <tr>
        <td>
            密码
        </td>
        <td>
            <input type="password" name="password">
        </td>
    </tr>
    <tr>
        <td>
            手机号
        </td>
        <td>
            <input type="text" name="phone">
        </td>
    </tr>
    <tr>
        <td>
            地址
        </td>
        <td>
            <input type="text" name="address">
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="submit" value="注册">
            <span>${registMsg}</span>
        </td>
    </tr>
</table>
</form>
</body>