文章目录
1.JSP实战:model 1模式开发数据库表的增删改查业务
1.1 需求说明 : 采用model 1模式开发数据库表的增删改查业务
假设 数据库有一张表叫person表,完成person表的页面级别的 查询全部 添加 修改 删除 功能
1.2 大体思路 :
构建项目
导入jar包
编写实体类 OOP OM Object Mapping 对象映射 表 --> 类 字段 --> 属性
构建后台数据库连接类 jdbcUtil
构建请求页面
构建控制器页面
构建数据展示页面
完成CURD; 查询 添加 删除 更新
1.3 第一部分 : 项目初始化构建
1) 构建项目 : Java Web项目
2) 导入jar包
编写实体类
构建后台数据库连接类
1.4 第二部分 : 完成查询全部需求
1) 创建系统首页 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统首页</title>
</head>
<body>
<div>
<h1>欢迎使用人员信息管理系统</h1>
<h2>请选择您要使用的功能:</h2>
<ol>
<li>
<a href="findAll_server.jsp">查询全部人员信息</a>
</li>
</ol>
</div>
</body>
</html>
2) 创建控制器 findAll_server.jsp
<%@page import="org.apache.commons.dbutils.handlers.BeanListHandler"%>
<%@page import="com.hnxy.db.Person"%>
<%@page import="java.util.List"%>
<%@page import="com.hnxy.db.JdbcUtil"%>
<%@page import="org.apache.commons.dbutils.QueryRunner"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 查询的控制器页面
// 创建SQL的执行的对象
QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
// 编写SQL语句
String sql = "select * from person";
// 占位符赋值?
// 执行 查询 肯定获取一个model
List<Person> persons = qr.query(sql, new BeanListHandler<Person>(Person.class));
// 保存模型 给 下一个页面展示
request.setAttribute("plist", persons);
// 转发
request.getRequestDispatcher("findAll_view.jsp").forward(request, response);
%>
3) 创建展示页面 findAll_show.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>人员信息展示</title>
</head>
<body>
<div>
<h1>展示人员数据</h1>
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
</tr>
<c:forEach var="p" items="${plist}">
<tr>
<td>
${p.id}
</td>
<td>
${p.name}
</td>
<td>
${p.sex}
</td>
<td>
${p.age}
</td>
<td>
${p.from}
</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
4) 效果展示
点击展示
1.5 第三部分 : 完成添加人员需求
1) 首页添加 “添加新人员” 连接
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统首页</title>
</head>
<body>
<div>
<h1>欢迎使用人员信息管理系统</h1>
<h2>请选择您要使用的功能:</h2>
<ol>
<li>
<a href="findAll_server.jsp">查询全部人员信息</a>
</li>
<li>
<a href="add.jsp">添加新人员信息</a>
</li>
</ol>
</div>
</body>
</html>
2) 编写添加页面 add.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加人员信息</title>
</head>
<body>
<div>
<h1>添加人员信息</h1>
<form action="add_server.jsp" method="post">
<table>
<tr>
<th>请输入人员姓名:</th>
<td>
<input type="text" name="pname" required="required" placeholder="请输入人员名称...." />
</td>
</tr>
<tr>
<th>请选择人员性别:</th>
<td>
<select name="psex" required="required" style="width: 100%">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<th>请输入人员年龄:</th>
<td>
<input type="number" name="age" required="required" placeholder="请输人员年龄..." />
</td>
</tr>
<tr>
<th>请输入人员籍贯:</th>
<td>
<input type="text" name="pfrom" required="required" placeholder="请输入人员籍贯..." />
</td>
</tr>
<tr>
<th colspan="2">
<button type="submit">确定</button>
<button type="reset">取消</button>
</th>
</tr>
</table>
</form>
</div>
</body>
</html>
3) 编写添加控制器 add_server.jsp
<%@page import="com.hnxy.db.JdbcUtil"%>
<%@page import="org.apache.commons.dbutils.QueryRunner"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 添加业务
// 第一阶段 接收数据
// 1. 设定页面请求字符流的编码
request.setCharacterEncoding("UTF-8");
// 2. 接收页面数据
String pname = request.getParameter("pname");
String psex = request.getParameter("psex");
String age = request.getParameter("age");
String pfrom = request.getParameter("pfrom");
// 第二阶段数据库处理阶段
// 1. 创建SQL执行对象
QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
// 2. 编写SQL语句
String sql = "insert into person values (null,?,?,?,?)";
// 3. 占位符赋值
Object[] params = {pname,psex,age,pfrom};
// 4. 执行SQL语句
int count = qr.update(sql,params);
// 第三阶段 根据数据库的处理结果 进行相应结果处理
if(count > 0){
// 添加成功
// 重新定向到查询全部的页面
response.sendRedirect("findAll_server.jsp");
}else{
// 添加失败 response 响应流
String msg = "<script type='text/javascript'>history.go(-1);alert('添加失败!');</script>";
// 服务器想给客户端发送一段代码 让客户端知道添加失败了
// 你这段文字到底是什么类型的? text/html 那么浏览器就把你的这段话当做是HTML文本进行解析
response.setContentType("text/html; charset=UTF-8"); // 服务端给客户端发送的数据类型是什么
// 打印回去
out.print(msg);
}
%>
注意,页面中 page 是关键字,是JSP的内置对象,所以此处我们不能使用!
效果 :
1.6 第四部分 : 完成更新人员需求
选择你要更新的数据
展示你要更新的数据
修改数据
提交
如果修改成功 从新查询全部 如果修改失败 返回提示
1) 数据展示也添加 “更新” 和 “删除” 按钮
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>人员信息展示</title>
</head>
<body>
<div>
<h1>展示人员数据</h1>
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>操作</th>
</tr>
<c:forEach var="p" items="${plist}">
<tr>
<td>
${p.id}
</td>
<td>
${p.name}
</td>
<td>
${p.sex}
</td>
<td>
${p.age}
</td>
<td>
${p.from}
</td>
<th>
<button type="button" onclick="goUpdate(${p.id});">更新</button>
<button type="button" onclick="goDelete(${p.id});">删除</button>
</th>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
效果 :
2) 编写跳转JS
写在findAll_show.jsp的里面即可
<script type="text/javascript">
function goUpdate(id){
// 我需要在此处发起一次请求 将要删除的ID传递给服务器
window.location.href = "findByID_server.jsp?pid="+id;
}
</script>
3) 编写按ID查询人员的控制器页面 findByID_server.jsp
<%@page import="org.apache.commons.dbutils.handlers.BeanHandler"%>
<%@page import="com.hnxy.db.Person"%>
<%@page import="com.hnxy.db.JdbcUtil"%>
<%@page import="org.apache.commons.dbutils.QueryRunner"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 删除业务
// 第一阶段 接收页面数据
// 1. 设定编码
request.setCharacterEncoding("UTF-8");
// 2. 接收数据
String pid = request.getParameter("pid");
// 第二阶段 数据库处理
// 创建SQL的执行对象
QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
// 编写SQL语句
String sql = "select * from person where `id` = ?";
// 占位符赋值
Object[] params = {pid};
// 执行
Person person = qr.query(sql, new BeanHandler<Person>(Person.class),params);
// 第三阶段 服务器响应
// 保存要更新的信息
request.setAttribute("person", person);
// 转发给下一个页面展示person
request.getRequestDispatcher("update.jsp").forward(request, response);
%>
4) 编写展示要更新人员信息的页面 update.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>更新人员信息</title>
</head>
<body>
<div>
<h1>更新人员信息</h1>
<form action="update_server.jsp" method="post">
<input type="hidden" name="pid" value="${person.id}" />
<table>
<tr>
<th>请输入人员姓名:</th>
<td>
<input type="text" name="pname" value="${person.name}" required="required" placeholder="请输入人员名称...." />
</td>
</tr>
<tr>
<th>请选择人员性别:</th>
<td>
<select name="psex" required="required" style="width: 100%">
<option value="">---请选择---</option>
<option value="男" <c:if test="${person.sex eq '男'}">selected</c:if>>男</option>
<option value="女" <c:if test="${person.sex eq '女'}">selected</c:if>>女</option>
</select>
</td>
</tr>
<tr>
<th>请输入人员年龄:</th>
<td>
<input type="number" value="${person.age}" name="age" required="required" placeholder="请输人员年龄..." />
</td>
</tr>
<tr>
<th>请输入人员籍贯:</th>
<td>
<input type="text" value="${person.from}" name="pfrom" required="required" placeholder="请输入人员籍贯..." />
</td>
</tr>
<tr>
<th colspan="2">
<button type="submit">确定</button>
<button type="reset">取消</button>
</th>
</tr>
</table>
</form>
</div>
</body>
</html>
5) 编写更新人员信息的控制器 update_server.jsp
<%@page import="org.apache.commons.dbutils.QueryRunner"%>
<%@page import="com.hnxy.db.JdbcUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 添加业务
// 第一阶段 接收数据
// 1. 设定页面请求字符流的编码
request.setCharacterEncoding("UTF-8");
// 2. 接收页面数据
String pname = request.getParameter("pname");
String psex = request.getParameter("psex");
String age = request.getParameter("age");
String pfrom = request.getParameter("pfrom");
String pid = request.getParameter("pid");
// 第二阶段数据库处理阶段
// 1. 创建SQL执行对象
QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
// 2. 编写SQL语句
String sql = "update person set `name`=?,`sex`=?,`age`=?,`from`=? where `id`=?";
// 3. 占位符赋值
Object[] params = {pname,psex,age,pfrom,pid};
// 4. 执行SQL语句
int count = qr.update(sql,params);
// 第三阶段 根据数据库的处理结果 进行相应结果处理
if(count > 0){
// 添加成功
// 重新定向到查询全部的页面
response.sendRedirect("findAll_server.jsp");
}else{
// 添加失败 response 响应流
String msg = "<script type='text/javascript'>history.go(-1);alert('更新失败!');</script>";
// 服务器想给客户端发送一段代码 让客户端知道添加失败了
// 你这段文字到底是什么类型的? text/html 那么浏览器就把你的这段话当做是HTML文本进行解析
response.setContentType("text/html; charset=UTF-8"); // 服务端给客户端发送的数据类型是什么
// 打印回去
out.print(msg);
}
%>
效果 :
更新为：
更新成功：
1.7 第五部分 : 完成删除人员需求
删除 :
首选 选择你要删除的哪一行 点击删除按钮
询问是否删除 如果点击是
删除
删除成功 --> 重新查询全部数据
1) 编写删除的JS脚本
写在findAll_show.jsp的里面即可
<script type="text/javascript">
function goUpdate(id){
// 我需要在此处发起一次请求 将要删除的ID传递给服务器
window.location.href = "findByID_server.jsp?pid="+id;
}
function goDelete(id){
// 询问一下是否删除
var con = window.confirm("确定要删除ID为" + id + "的数据么?");
// 判断
if(con == true){
// 我需要在此处发起一次请求 将要删除的ID传递给服务器
window.location.href = "delete_server.jsp?pid="+id;
}
}
</script>
2) 编写删除的控制页面 delete_server.jsp
<%@page import="org.apache.commons.dbutils.QueryRunner"%>
<%@page import="java.sql.Connection"%>
<%@page import="com.hnxy.db.JdbcUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 删除业务
// 第一阶段 接收页面数据
// 1. 设定编码
request.setCharacterEncoding("UTF-8");
// 2. 接收数据
String pid = request.getParameter("pid");
// 第二阶段 数据库处理
// 创建SQL的执行对象
QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
// 编写SQL语句
String sql = "delete from person where `id` = ?";
// 占位符赋值
Object[] params = {pid};
// 执行
int count = qr.update(sql,params);
// 第三阶段 服务器响应
if(count > 0){
// 添加成功
// 重新定向到查询全部的页面
response.sendRedirect("findAll_server.jsp");
}else{
// 添加失败 response 响应流
String msg = "<script type='text/javascript'>history.go(-1);alert('删除失败!');</script>";
// 服务器想给客户端发送一段代码 让客户端知道添加失败了
// 你这段文字到底是什么类型的? text/html 那么浏览器就把你的这段话当做是HTML文本进行解析
response.setContentType("text/html; charset=UTF-8"); // 服务端给客户端发送的数据类型是什么
// 打印回去
out.print(msg);
}
%>
效果:
扫一扫
1079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
