Demand design:
主要目的：复习巩固Java web开发技术，重新系统的学习并将逐步开发项目，以囊括整体学习收获。
- Realize user information management through jsp pages, and use pop-up window page display to add, delete, modify and check user information.
- Understand the architecture, path structure in Java Web projects.
- Thoroughly understand the B/S software development architecture and lay the foundation for further learning of other frameworks.
Code interpretation:
Due to time constraints, only part of the content of this article will be published
-
User management interface: user_all.jsp
-
Delete user (use id to delete)
-
Effect after deletion
-
Add user
-
achieve effect
program:
- Overall design logic:
the page is composed of jsp, uses Tomcat server, and uses Servlet to control page behavior (form request processing). JDBC connects to Mysql database. - Servlet part:
Mainly obtain form parameters for database writing.
In the middle, the User_bean class is used to convert parameters, so that the convenience can be reflected in the Dao layer in subsequent development.
@WebServlet("/login")
public class Login extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 控制编码
resp.setContentType("text/html;charset=UTF-8");
req.setCharacterEncoding("UTF-8");
User_bean user_bean=new User_bean();
user_bean.setName(req.getParameter("name"));
user_bean.setPassword(req.getParameter("password"));
try {
Connection con=Connect.getCon();
Tool.user_add(con,user_bean.getName(),user_bean.getPassword());
} catch (SQLException e) {
throw new RuntimeException(e);
}
resp.sendRedirect("JSP/user_all.jsp");
}
}
- Sql operation class:
public class Connect {
static String url="jdbc:mysql://localhost:3306/csdn";
static String user="root";
static String password="1234";
static String driver="com.mysql.cj.jdbc.Driver";
// 注册驱动
static {
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
throw new RuntimeException(e);
}
}
public static Connection getCon() throws SQLException {
Connection con= DriverManager.getConnection(url,user,password);
return con;
// 返回数据库连接对象
}
//此处验证数据库连接状态
public static void main(String[] args) throws SQLException {
Connection connection=Connect.getCon();
if (connection==null){
System.out.println("False");
}
else {
System.out.println("True");
}
}
}
The operation method used in this article:
//Login表单的sql方法
public static void user_add(Connection connection, String name, String password) throws SQLException {
String sql = "insert into user (name,password) values(?,?)";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1, name);
preparedStatement.setString(2, password);
preparedStatement.executeUpdate();
}
// 删除用户方法
public static void user_drop(Connection connection, int id) throws SQLException {
String sql = "delete from user where id=?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1, id);
preparedStatement.execute();
}
- user_all.jsp page design code:
- The main control attribute of the pop-up box is: display, use the button click function to switch the attribute value of none or block, so as to achieve the purpose of pop-up. At the same time, set the value of z-index to determine the priority display.
- At the same time, it should be noted that the database query result set should be performed in a loop, while (xx.next()), otherwise there will be a problem of empty access.
- It is very simple to realize the function, but the page display is very cumbersome, which leads to the necessity for us to learn more front-end frameworks~hehe
<%--
Created by IntelliJ IDEA.
User: 28730
Date: 2023/2/13
Time: 23:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="Sql.Connect" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户展示页面</title>
</head>
<script>
function drop_way(){
var del = document.getElementById("del");
var back = document.getElementById("back");
del.style.display = "block";
back.style.display = "block";
}
function go_back(){
var a=document.getElementById("del");
var b=document.getElementById("back");
var q=document.getElementById("add");
q.style.display="none";
a.style.display="none";
b.style.display="none";
}
function user_add(){
var c=document.getElementById("add");
var d=document.getElementById("back");
c.style.display="block";
d.style.display="block";
}
</script>
<style>
table,td,th{
border: 6px;
text-align: center;
}
td,th{
width: 120px;
}
table{
margin: 0 auto;
border-style: ridge;
}
th{
background-color: aqua;
border-style: inset;
}
td{
border-style: inset;
}
div{
z-index: 10;
margin: 0 auto;
background-color: lavender;
width: 800px;
}
#del, #add{
display: none;
background-color: blanchedalmond;
z-index: 11;
width: 400px;
height: 400px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
border: 10px ridge;
}
#back{
display: none; /* 此元素不会被显示*/
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:8; /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
opacity:.80; /* opacity 属性设置元素的不透明级别。*/
}
</style>
<body>
<%
Connection connection=Connect.getCon();
%>
<div >
<table>
<caption><h1>用户信息管理</h1></caption>
<tr>
<th>ID</th>
<th>Name</th>
<th>Password</th>
</tr>
<%
String sql="select * from user ";
PreparedStatement preparedStatement=connection.prepareStatement(sql);
ResultSet resultSet=preparedStatement.executeQuery();
while (resultSet.next()){
%>
<tr>
<td><%=resultSet.getInt("id")%></td>
<td><%=resultSet.getString("name")%></td>
<td><%=resultSet.getString("password")%></td>
</tr>
<%
}
%>
</table>
<div id="del">
<form method="post" action="${pageContext.request.contextPath}/delete">
请输入删除用户id：<input type="text" name="id"><br>
<input type="submit" value="删除">
<input type="button" value="退出" onclick="go_back()">
</form>
</div>
<div id="add">
<form method="post" action="${pageContext.request.contextPath}/login">
<h4>添加用户信息：</h4><br>
Name ：<input type="text" name="name" placeholder="用户名称"><br>
Password: <input type="password" name="password" placeholder="密码"><br>
<input type="submit" value="添加" >
<input type="button" value="退出" onclick="go_back()">
</form>
</div>
<div id="back"></div>
<%-- 点击弹窗进行用户删除--%>
<button onclick="drop_way()">删除用户</button>
<button onclick="user_add()">添加用户</button>
</div>
</body>
</html>
Summary of process issues:
- The jsp page and the html page are in the same level directory, but the access path of the Servlet controller configured by @WebServlet() is different. The guess may be related to the operation principle of jsp itself (I'm not good at technology, still need to be refined!）
- Idea introduces dependencies through its own shortcut tools, and some packages cannot be globally referenced. I only solved it by configuring the lib resource folder myself.
- The database design does not allow control elements, but this method can be used to store null values first, and no error is reported. . . Solve it tomorrow, bye!