操作P页面中如何将两个按钮放在同一行并实现数据库操作 (jsp两个按钮在一行数据库)
在Web开发中，P（Java Server Pages）是一种比较流行的技术，它是一种基于Java的服务器端动态网页生成技术，具有灵活性、可扩展性和可重用性等优点，在企业级应用开发中得到广泛应用。在开发P页面时，经常需要在页面上添加按钮实现数据库操作，但有时我们需要将多个按钮放置在同一行上，这就需要用到一些技巧。
本文将介绍如何在P页面中将两个按钮放在同一行上，并实现对数据库进行增、删、改、查等操作，步骤如下：
之一步：创建数据库表和数据
首先需要创建一个数据库表和一些数据以供演示。假设我们创建一个名为“user”的表，包含五个字段：id、name、age、gender和eml，其中id为自增长主键。使用如下SQL语句创建表：
“`sql
CREATE TABLE user (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
age INT(11) NOT NULL,
gender VARCHAR(10) NOT NULL,
eml VARCHAR(50) NOT NULL,
PRIMARY KEY (id)
);
“`
然后插入一些测试数据，可以使用如下SQL语句：
“`sql
INSERT INTO user (name, age, gender, eml) VALUES
(‘Tom’, 18, ‘Male’, ‘tom@example.com’),
(‘Mary’, 20, ‘Female’, ‘mary@example.com’),
(‘Jack’, 22, ‘Male’, ‘jack@example.com’),
(‘Lucy’, 24, ‘Female’, ‘lucy@example.com’),
(‘John’, 26, ‘Male’, ‘john@example.com’);
“`
第二步：创建P页面和CSS样式表
接下来需要创建一个P页面来实现对数据库的操作，并将两个按钮放在同一行上。在此之前需要先创建一个CSS样式表来控制页面样式，例如：
“`css
.btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
background-color: #008CBA;
color: white;
font-size: 16px;
}
.btn:hover {
cursor: pointer;
background-color: #006687;
}
.btn-primary {
background-color: #4CAF50;
}
.btn-danger {
background-color: #f44336;
}
“`
接下来创建一个P页面，命名为“user.jsp”，其中包括如下代码：
“`html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding=”UTF-8″%>
User Management
| id | Name | Age | Gender | Eml | Action |
|---|---|---|---|---|---|
|
<input type="hidden" name="id" value="”>
<input type="hidden" name="id" value="”>
|
<%
conn.close();
%>
“`
该页面包括一个表格来显示用户数据，并在每一行末尾放置了两个按钮，分别是“Edit”和“Delete”，用来编辑和删除该行数据。另外还放置了一个“Add”按钮，用来添加新用户数据。需要注意的是，在按钮样式中使用了“btn-primary”和“btn-danger”两种样式类，这是Bootstrap框架预定义的样式，可用于设置按钮颜色样式。
第三步：创建编辑和删除页面
在P页面中，当用户点击“Edit”或“Delete”按钮时，会跳转到“edit.jsp”和“delete.jsp”页面，分别用来编辑和删除该行数据。需要分别创建这两个页面，代码如下：
edit.jsp：
“`html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding=”UTF-8″%>
Edit User
<%
String id = request.getParameter(“id”);
Class.forName(“com.mysql.jdbc.Driver”);
Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(“SELECT * FROM user WHERE id=” + id);
if(rs.next()) {
String name = rs.getString(“name”);
int age = rs.getInt(“age”);
String gender = rs.getString(“gender”);
String eml = rs.getString(“eml”);
%>
<input type="hidden" name="id" value="”>
<input type="text" name="name" value="”>
<input type="text" name="age" value="”>
<input type="radio" name="gender" value="Male" >Male
<input type="radio" name="gender" value="Female" >Female
<input type="eml" name="eml" value="”>
<%
conn.close();
%>
“`
该页面包括一个表单，用于编辑用户数据。当用户访问该页面时，需要从URL参数中获取该用户的ID，查询数据库获取该用户的信息并将其填充到表单中。当用户点击“Save”按钮时，将提交表单数据到“update.jsp”页面进行更新操作；当用户点击“Cancel”按钮时，将返回到“user.jsp”页面。
delete.jsp：
“`html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding=”UTF-8″%>
Delete User
<%
String id = request.getParameter(“id”);
Class.forName(“com.mysql.jdbc.Driver”);
Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(“SELECT * FROM user WHERE id=” + id);
if(rs.next()) {
String name = rs.getString(“name”);
int age = rs.getInt(“age”);
String gender = rs.getString(“gender”);
String eml = rs.getString(“eml”);
%>
<input type="hidden" name="id" value="”>
<%
conn.close();
%>
“`
该页面也包括一个表单，用于确认用户删除操作。与“edit.jsp”页面类似，需要从URL参数中获取该用户的ID，查询数据库获取该用户的信息并显示在页面上。当用户点击“Delete”按钮时，将提交表单数据到“delete_confirm.jsp”页面进行删除操作；当用户点击“Cancel”按钮时，将返回到“user.jsp”页面。
第四步：创建添加和更新页面
在P页面中，当用户点击“Add”按钮时，会跳转到“add.jsp”页面，用来添加新用户数据；当用户编辑完用户数据后，会提交数据到“update.jsp”页面进行更新操作。需要分别创建这两个页面，代码如下：
add.jsp：
“`html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding=”UTF-8″%>
Add User
Male
Female
“`
该页面包括一个表单，用于添加用户数据。当用户点击“Add”按钮时，将提交表单数据到“insert.jsp”页面进行插入操作；当用户点击“Cancel”按钮时，将返回到“user.jsp”页面。
update.jsp：
“`html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding=”UTF-8″%>
Update User
<%
String id = request.getParameter(“id”);
String name = request.getParameter(“name”);
int age = Integer.parseInt(request.getParameter(“age”));
String gender = request.getParameter(“gender”);
String eml = request.getParameter(“eml”);
Class.forName(“com.mysql.jdbc.Driver”);
Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);
PreparedStatement pstmt = conn.prepareStatement(“UPDATE user SET name=?, age=?, gender=?, eml=? WHERE id=?”);
pstmt.setString(1, name);
pstmt.setInt(2, age);
pstmt.setString(3, gender);
pstmt.setString(4, eml);
pstmt.setInt(5, Integer.parseInt(id));
pstmt.executeUpdate();
%>
The user has been updated.
<%
conn.close();
%>
“`
该页面用来更新用户数据。当用户提交表单数据到该页面时，需要从表单中获取该用户的信息，并执行SQL更新操作来更新数据库中对应的记录。当更新完成后，将显示一个提示信息，并提供一个“Back”按钮用于返回到“user.jsp”页面。
insert.jsp：
“`html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding=”UTF-8″%>
Insert User
<%
String name = request.getParameter(“name”);
int age = Integer.parseInt(request.getParameter(“age”));
String gender = request.getParameter(“gender”);
String eml = request.getParameter(“eml”);
Class.forName(“com.mysql.jdbc.Driver”);
Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);
PreparedStatement pstmt = conn.prepareStatement(“INSERT INTO user (name, age, gender, eml) VALUES (?, ?, ?, ?)”);
pstmt.setString(1, name);
pstmt.setInt(2, age);
pstmt.setString(3, gender);
pstmt.setString(4, eml);
pstmt.executeUpdate();
%>
The user has been added.
<%
conn.close();
%>
“`
该页面用来添加新用户数据。当用户提交表单数据到该页面时，需要从表单中获取该用户的信息，并执行SQL插入操作来插入数据库中一条新记录。当插入完成后，将显示一个提示信息，并提供一个“Back”按钮用于返回到“user.jsp”页面。
综上所述，通过以上步骤，已经在P页面中成功完成了将两个按钮放在同一行并实现数据库操作的任务。在页面中包括了一个表格用于显示用户数据，以及“Edit”、“Delete”和“Add”按钮，可实现对用户的编辑、删除和添加操作。同时，在对数据库进行操作时，还考虑了安全、可读性和可维护性等因素，保证了程序的稳定性和易用性。
