デマンドデザイン:
主要目的：复习巩固Java web开发技术，重新系统的学习并将逐步开发项目，以囊括整体学习收获。
- jspページによるユーザー情報管理を実現し、ポップアップウィンドウページ表示によりユーザー情報の追加、削除、変更、確認を行います。
- Java Web プロジェクトのアーキテクチャとパス構造を理解します。
- B/S ソフトウェア開発アーキテクチャを徹底的に理解し、他のフレームワークをさらに学習するための基礎を築きます。
コードの解釈:
時間の都合上、記事内容の一部のみを掲載させていただきます。
-
ユーザー管理インターフェース: user_all.jsp
-
ユーザーを削除します (削除には ID を使用します)
-
削除後の影響
-
ユーザーを追加する
-
効果を達成する
プログラム：
- 全体的な設計ロジック:
ページは JSP で構成され、Tomcat サーバーを使用し、サーブレットを使用してページの動作 (フォーム要求処理) を制御します。JDBC は MySQL データベースに接続します。 - サーブレット部：
主にデータベース書き込み用のフォームパラメータを取得します。
途中でUser_beanクラスを利用してパラメータを変換し、その後の開発でDao層に利便性を反映できるようにしています。
@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操作クラス:
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");
}
}
}
この記事で使用する操作方法:
//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 ページ設計コード:
- ポップアップ ボックスの主な制御属性は次のとおりです。表示。ポップアップの目的を達成するために、ボタンのクリック機能を使用して属性値をなしまたはブロックに切り替えます。同時にz-indexの値を設定して優先表示を決定します。
- 同時に、データベース クエリの結果セットは (xx.next()) 中にループで実行する必要があることに注意してください。そうしないと、空のアクセスの問題が発生します。
- 機能を実現するのは非常に簡単ですが、ページ表示が非常に煩雑なので、フロントエンドフレームワークをもっと学ぶ必要があります〜へへ
<%--
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>
プロセスの問題の概要:
- jspページとhtmlページは同じ階層ディレクトリにありますが、 @WebServlet() で設定するサーブレットコントローラのアクセスパスが異なっています。これはjsp自体の動作原理が関係しているのかもしれません(技術的には未熟なので、まだまだ磨かなければなりません！）
- Idea は独自のショートカット ツールを通じて依存関係を導入しており、一部のパッケージはグローバルに参照できません。libリソースフォルダーを自分で設定することでのみ解決しました。
- データベース設計では制御要素は許可されていませんが、このメソッドを使用して最初に null 値を格納することができ、エラーは報告されません。。。明日解決してね、さようなら！