使用servlet和html实现一个增删改查的功能

北海冥鱼未眠

已于 2022-01-26 14:52:42 修改

阅读量2.3k

点赞数 5

文章标签： html 前端 mysql

于 2022-01-18 16:03:23 首次发布

本文链接：https://blog.csdn.net/qq_45401910/article/details/122554895

版权

用到的技术：MySQL、servlet、HTML、JDBC、Tomcat
为了美观一点点，用了几句css的代码。用到了一点点js代码。

遇到的问题：
	1：不知道弹窗确认怎么跳转
		答：先用javascript：void（0）把超链接跳转去掉，然后注册点击事件，在事件中使用回调函数，在函数中使用window.confirm（），返回true之后再js代码中执行跳转，即向浏览器发起请求。
	2：lib目录应该放在哪里？
		答：放在WEB-INF目录的下面，引入jdbc的jar包，然后右键点击Add As Library.
	3:在使用资源绑定器读取jdbc的配置文件的时候不知道应该把配置文件放在哪？
	答:放在你的类路径，也就是在idea的标蓝色的那个目录，你也可以选择放在这个目录的子目录下面，不过这个时候需要在获取bundle的时候加上这个目录的名字，目录之间用.，不要用/。
	
	4：jdbc的时候怎么获取连接？怎么获取PreparedStatement？
	答：DriverManager.getConnection(url,username,password);
		connection.prepareStatement("select * from dept where deptno=10");
		
	5：进入部门表的页面之后应该怎么样返回从数据库查询的信息给前端？前端怎么拿到从数据库查询到的数据？
	答：不能使用jsp，那么就直接在后端打印出来一个html页面。
	
	6：遇到了一个搞了很久的问题，插入数据的时候会有中文乱码，怎么解决？
	答：第一种方式：
	在连接数据库的时候指定编码方式，
	原来是：url=jdbc:mysql://localhost:3306/dongmu
	改成：url=jdbc:mysql://localhost:3306/dongmu?characterEncoding=utf8即可。
	第二种方式：修改服务端的mysql配置文件，编辑my.cnf文件（window下是ini文件），在[mysqld]下添加一行character_set_server = utf8，然后重启mysql服务。
	原因：查阅官方文档，jdbc在连接数据库时，会先查询服务端的character_set_server值，再确定连接时使用的编码。要想覆盖客户端的自动检测编码功能，可以使用characterEncoding属性
	官方文档地址：https://dev.mysql.com/doc/connector-j/8.0/en/connector-j-reference-charsets.html
	
	7：如何做到修改信息的时候修改页面上显示选中的原来的未修改时候的信息？
	答：这个也是通过跳转到一个Servlet中，在这个Servlet中打印一个html页面来实现的。
	
	8：你觉得做这个小网页的过程中有哪些问题？
	答：总是需要写很多重复的代码，比如每个servlet都要设置字符集，响应体的编码方式
		java代码还要处理html页面，还要负责查询数据库信息。比较乱。
	
	9：总结一你这个功能中的路径什么时候加项目名？
	答：在html中的路径是不包含项目名的，所以跳转的时候要添加。但是servlet中的是包含项目名的，跳转的时候不需要添加。
	前端发请求就要带，后端就不用带
	
	10:href="javascript:void(0)"是什么意思？
	a、在网页编程中，一般让一个超链接点击后不链接到任何地方，而鼠标移上去仍然显示手指形状的图标，就用javascript:void(0)。
	b、然后真实执行的操作，是在这个a标签后面加onclick="xxxxx"。
	c、就是鼠标单击后执行某个Javascript函数进行具体的操作。
	d、这样可以做更多的事情，比如根据某个值进行判断跳转到不同的页面等等。
	
	11:如何在js代码中发送请求给服务器？
	答：document.location.href=
	window.location.href=
	window.location=
	document.location=
	四种方式都可以

部分代码如下：

package com.dongmu.servlet;

import com.dongmu.util.DBUtil;
import com.mysql.jdbc.Connection;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class Deptlist_Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Connection connection = DBUtil.getConnection();
        PreparedStatement preparedStatement= null;
        ResultSet set = null;
        String sql = "select * from dept";

        String path = req.getContextPath();

        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        try {
            preparedStatement = connection.prepareStatement(sql);
            set = preparedStatement.executeQuery();

            writer.print("             <!DOCTYPE html>");
            writer.print(" <html lang='en'>");
            writer.print(" <head>");
            writer.print("     <meta charset='UTF-8'>");
            writer.print("     <title>部门列表</title>");
            writer.print("     <style>");
            writer.print("                     td{");
            writer.print("                 text-align:center;");
            writer.print("             }");
            writer.print("     </style>");
            writer.print("     <script type='text/javascript'>");
            writer.print("                     function del(deptno){");
            writer.print("                 if (window.confirm('亲，您确定删除数据吗?删除之后无法恢复哦')){");
            writer.print("                     document.location.href='"+path+"/deptdelete?deptno='+deptno;");
            writer.print("                 }");
            writer.print("             }");
            writer.print("     </script>");
          /*  writer.print("<script type='text/javascript'>");
            writer.print("    function del(deptno){");
            writer.print("        if(window.confirm('亲，删了不可恢复哦！')){");
            writer.print("            document.location.href = '"+path+"/deptdelete?deptno=' + deptno");
            writer.print("        }");
            writer.print("    }");
            writer.print("</script>");*/

            writer.print(" </head>");
            writer.print(" <body>");
            writer.print("     <h1 align='center'>部门列表</h1>");
            writer.print("     <table border='1px' align='center'>");
            writer.print("         <tr>");
            writer.print("             <th>序号</th>");
            writer.print("             <th>部门名称</th>");
            writer.print("             <th>部门位置</th>");
            writer.print("             <th>操作</th>");
            writer.print("         </tr>");
            writer.print(" ");



            int index = 1;
            while (set.next()){

                String dname = set.getString("dname");
                String loc = set.getString("loc");
                String deptno = set.getString("deptno");

            writer.print("        <tr>");
            writer.print("    <td>"+index+++"</td>");
            writer.print("    <td>"+dname+"</td>");
            writer.print("    <td>"+loc+"</td>");
            writer.print("    <td>");
            writer.print("        <a href='"+path+"/deptupdate?loc="+loc+"&deptno="+deptno+"&dname="+dname+"'>修改</a>");
            writer.print("        <a href='javascript:void(0)' οnclick='del("+deptno+")' >删除</a>");
//                                  <a href='javascript:void(0)' οnclick='del("+deptno+")' >删除</a>");
            writer.print("        <a href='"+path+"/deptdetail?deptno="+deptno+"'>详情</a>");
            writer.print("    </td>");
            writer.print("</tr>");
            }

            writer.print("</table>");
            writer.print("<a href='dept_add.html'>新增部门</a>");
            writer.print("</body>");
            writer.print("</html>");
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,preparedStatement,set);
        }
    }
}

package com.dongmu.util;

import com.mysql.jdbc.Connection;

import java.sql.*;
import java.util.ResourceBundle;

public class DBUtil {
    static String driver;
    static String url;
    static String username;
    static String password;
    static {
        ResourceBundle bundle = ResourceBundle.getBundle("resources.jdbc");
        driver = bundle.getString("driver");
        url = bundle.getString("url");
        username = bundle.getString("username");
        password = bundle.getString("password");

        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static Connection getConnection(){
        Connection connection= null;
        try {
             connection = (Connection) DriverManager.getConnection(url,username,password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }

    /*public static void main(String[] args) {
        Connection connection = DBUtil.getConnection();
        try {
            PreparedStatement statement = connection.prepareStatement("insert into dept values(202,'人力','北京')");

            statement.executeUpdate();

        } catch (SQLException e) {
            e.printStackTrace();
        }

    }*/

    public static void close(Connection connection, Statement statement, ResultSet set){
        if (set!=null){
            try {
                set.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }if (statement!=null){
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }if (connection!=null){
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }


}

package com.dongmu.servlet;

import com.dongmu.util.DBUtil;
import com.mysql.jdbc.Connection;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class DeptAdd_Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String deptno = req.getParameter("deptno");
        String dname = req.getParameter("dname");
        String loc = req.getParameter("loc");

        Connection connection = DBUtil.getConnection();
        PreparedStatement preparedStatement= null;
        String sql = "insert into dept(deptno,dname,loc) values(?,?,?)";

        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        try {
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1,deptno);
            preparedStatement.setString(2,dname);
            preparedStatement.setString(3,loc);

            if ((preparedStatement.executeUpdate())==1){
                writer.print("添加成功，即将返回原界面！");
                req.getRequestDispatcher("/deptlist").forward(req,resp);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,preparedStatement,null);
        }



    }
}

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>MyServlet</servlet-name>
        <servlet-class>com.dongmu.servlet.MyServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>MyServlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/hh</url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>Deptlist_Servlet</servlet-name>
        <servlet-class>com.dongmu.servlet.Deptlist_Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Deptlist_Servlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/deptlist</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>DeptAdd_Servlet</servlet-name>
        <servlet-class>com.dongmu.servlet.DeptAdd_Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DeptAdd_Servlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/deptadd</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>DeptUpdate_Servlet</servlet-name>
        <servlet-class>com.dongmu.servlet.DeptUpdate_Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DeptUpdate_Servlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/deptupdate</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>UpdateServlet</servlet-name>
        <servlet-class>com.dongmu.servlet.UpdateServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>UpdateServlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/update</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>DeptDetail_Servlet</servlet-name>
        <servlet-class>com.dongmu.servlet.DeptDetail_Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DeptDetail_Servlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/deptdetail</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>DeptDelete_Servlet</servlet-name>
        <servlet-class>com.dongmu.servlet.DeptDelete_Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>DeptDelete_Servlet</servlet-name>
        <!--这个/开头的路径是包含项目名的-->
        <url-pattern>/deptdelete</url-pattern>
    </servlet-mapping>
</web-app>

主页面如下：
在这里插入图片描述
数据库内容：

弹窗确认代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门列表</title>
    <style>
        td{
            text-align:center;
        }
    </style>
    <script type="text/javascript">
        function del(deptno){
            var ok = window.confirm("亲，您确定删除数据吗?删除之后无法恢复");
            if (ok){
                alert("ok")
                document.location.href="index.html";
            }
        }
    </script>
</head>
<body>
    <h1 align="center">部门列表</h1>
    <table border="1px" align="center">
        <tr>
            <th>序号</th>
            <th>部门名称</th>
            <th>部门位置</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>销售</td>
            <td>上海</td>
            <td>
                <a href="dept_update.html">修改</a>
                <a href="javascript:void(0)" onclick="del(10)">删除</a>
                <a href="dept_detail.html">详情</a>
            </td>
        </tr>


    </table>
    <a href="dept_add.html">新增部门</a>
</body>
</html>

北海冥鱼未眠

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用servlet和html实现一个增删改查的功能

用到的技术：MySQL、servlet、HTML、JDBC、Tomcat为了美观一点点，用了几句css的代码。用到了一点点js代码。遇到的问题： 1：不知道弹窗确认怎么跳转答：先用javascript：void（0）把超链接跳转去掉，然后注册点击事件，在事件中使用回调函数，在函数中使用window.confirm（），返回true之后再js代码中执行跳转，即向浏览器发起请求。 2：lib目录应该放在哪里？答：放在WEB-INF目录的下面，引入jdbc的jar包，然后右键点击Add As
复制链接

扫一扫