JAVA项目：后台管理页面——显示数据库中所有信息+删除和编辑（MySQL）

青石横刀策马

已于 2022-06-29 19:04:17 修改

阅读量2.5k

点赞数 1

分类专栏：笔记文章标签：数据库 java mysql

于 2021-12-20 19:19:13 首次发布

本文链接：https://blog.csdn.net/m0_53115174/article/details/122048078

版权

笔记专栏收录该内容

13 篇文章 3 订阅

订阅专栏

此DEMO包含以下功能

后台管理界面（删除+修改+显示数据库里所有数据）
修改编辑界面（表格检验+修改数据库里的值）

后台管理界面

（头像为默认头像，视频暂未上传）
在这里插入图片描述

backstageUI.jsp

<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.lang.*" %>
<%@page contentType="text/html; ISO-8859-1;charset=UTF-8" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>后台管理系统</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            function update(id){
                $('#modal-edit').modal('show');
            }
        })
    </script>
    <script>
        document.write("<link rel='stylesheet' type='text/css' href='css/backstage.css?v=" + new Date().getTime() + "'>");
    </script>
</head>
<body style="margin:0px;padding:0px;">
<div class="topnav">
    <a>管理员：<%=request.getParameter("name")%></a>
    <a href="#" style="float:right">退出</a>
</div>
<div class="row">
    <div class="leftcolumn">
        <div class="card">
            <ul>
                <li><a href="#" style="background-color:#f1f1f1">队员管理</a></li>
                <li><a href="#">值班安排</a></li>
                <li><a href="#">更新通知</a></li>
            </ul>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="infoTable" style="overflow-x: auto; overflow-y: auto; height: 100%; width:100%;">
            <table  border=1px style="border-collapse:collapse;width:100%;text-align: center;">
            <%
            String usersex;
            String headpath;

            Class.forName("com.mysql.jdbc.Driver");
            Connection conn;
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/webdb","root","root");
            String sql="select * from peo19082203";
            Statement stmt;
            stmt = conn.createStatement();
            ResultSet rs;
            rs = stmt.executeQuery(sql);

            String s="<tr><td>头像</td><td>学号</td><td>密码</td><td>性别</td><td>电话</td><td>自我介绍</td><td>操作</td></tr></td>";
            while(true)
            {
                try {
                    if (!rs.next()) break;
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                if(rs.getString("sex").equals("0")){
                    usersex="男";
                }else{
                    usersex="女";
                }
                if(rs.getString("photo")==null){
                    headpath="image/backImg.png";
                }else{
                    headpath=rs.getString("photo");
                }
                s+="<tr>";
                s+="<td><img src='" +headpath+"' width='80' height='80' /></td>";
                s+="<td>"+rs.getString("name")+"</td>";
                s+="<td>"+rs.getString("pwd")+"</td>";
                s+="<td>"+usersex+"</td>";
                s+="<td>"+rs.getString("tel")+"</td>";
                s+="<td><video src='" +rs.getString("video")+"' width='120' height='80' controls=controls/></td>";
                s+="<td>" +
                        "<a  href='DeletCustomer.jsp?username="+rs.getString("name")+"'>删除</a>" +
                        "<h5>     </h5>" +
                        "<a  href='upCusUI.jsp?username="+rs.getString("name")+"&pwd="+rs.getString("pwd")+"&tel="+rs.getString("tel")+"&sex="+rs.getString("sex")+"'>编辑</a>" +
                    "</td>";
                s+="</tr>";
            }
            out.println(s);
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            %>
            </table>

        </div>
    </div>
</div>

</body>
</html>

删除功能

DeletCustomer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    String username=new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");

    String sDBDriver = "com.mysql.jdbc.Driver";
    String conStr = "jdbc:mysql://localhost:3306/webdb?useSSL=false";
    String dbname = "root";
    String password = "root";
    Connection conn=null;

    try {
        Class.forName(sDBDriver);
        conn = DriverManager.getConnection(conStr, dbname, password);
    } catch (ClassNotFoundException | SQLException cnfe) {
        cnfe.printStackTrace();
    }

    try{

        assert conn != null;
        Statement stmt=conn.createStatement();
        String updatePassword="DELETE FROM peo19082203 WHERE name = '"+username+"'";
        stmt.executeUpdate(updatePassword);
        out.println("<script language='javascript'>alert('删除成功！');window.location.href='backsatgeUI.jsp';</script>");
    }catch(SQLException e){
        out.println("<script language='javascript'>alert('用户不存在！');window.location.href='backsatgeUI.jsp';</script>");        //处理SQLException异常
    }
    try {
        conn.close();
    } catch (SQLException e) {
        e.printStackTrace();
    }
%>

</body>
</html>

删除成功
在这里插入图片描述

修改编辑页面

在这里插入图片描述

upCusUI.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>修改密码</title>
  <link rel="stylesheet" type="text/css" href="css/login.css">
  <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
  <script>
    $(document).ready(function(){
      $("input").blur(function(){
        var $parent = $(this).parent();
        $parent.find(".onError").remove();
        if ($(this).is("#newName")) {
          if (this.value==="") {
            $parent.append("<span class='onError' style='color: red;font-size: 5px'>用户名不能为空！</span>")
          }
        }
        if ($(this).is("#newpwd")) {
          if (this.value==="") {
            $parent.append("<span class='onError' style='color: red;font-size: 5px'>密码不能为空！</span>")
          }
          if(this.value.length < 6&&this.value.length>0){
            $parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>密码长度至少为六位！</span>")
          }
        }
        if ($(this).is("#repwd")) {
          var newpwd = document.getElementById("newpwd").value;
          var repwd = document.getElementById("repwd").value;
          if (newpwd===repwd) {
          }else{
            $parent.append("<span class='onError' style='color: red;font-size: 5px'>两次密码输入不一致</span>")
          }
        }
        if ($(this).is("#newTel")) {
          if (this.value==="") {
            $parent.append("<span class='onError' style='color: red;font-size: 5px'>电话不能为空！</span>")
          }
          if(this.value.length !==11&&this.value.length>0){
            $parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>大陆手机电话号码应为11位</span>")
          }
        }
      });
      $("form").submit(function(){
        $("form input").trigger("blur");
        if($(".onError").length>0) return false;
      });
    });
  </script>

  <script type="text/javascript">
    var xmlHttpReq=null;
    function createRequest(){
      if(window.XMLHttpRequest){
        xmlHttpReq=new XMLHttpRequest();
      }else if(window.ActiveXObject){
        xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
    function getBackInfo(){
      createRequest();
      var newName=document.getElementById("newName").value;
      if(xmlHttpReq!=null){
        var url="CheckOnlyName.jsp?username="+newName;
        xmlHttpReq.open("get",url,true);
        xmlHttpReq.onreadystatechange=Result;
        xmlHttpReq.send(null);
      }else{
        alert("请求失败!");
      }
    }
    function Result(){
      if(xmlHttpReq.readyState===4){
        if(xmlHttpReq.status===200){
          document.getElementById("er").innerHTML=xmlHttpReq.responseText;
        }else{
          alert("请求失败!");
        }
      }
    }
  </script>

</head>
<body>
<section class="forms">
  <div class="container">
    <div class="forms-grid">
      <div class="login">
        <strong>修改信息</strong>
        <form action="UpdateCustomer.jsp?name=<%=request.getParameter("username")%>" method="post" class="login-form">
          <div class="form">
            <div class="form-row">
              <label class="form-label">学号   </label><%=request.getParameter("username")%><br/><br/>
              <label class="form-label">新学号</label>
              <label for="newName"></label>
              <input onblur="getBackInfo()" type="text" class="form-text" id="newName" name="newName" value="<%=request.getParameter("username")%>">
              <div id="er" style='color: red;font-size: 5px'></div>
            </div>
            <div class="form-row">
              <label class="form-label">新密码</label>
              <label for="newpwd"></label>
              <input type="text" class="form-text" id="newpwd" name="newpwd" value="<%=request.getParameter("pwd")%>">
            </div>
            <div class="form-row">
              <label class="form-label">重复输入密码</label>
              <label for="repwd"></label>
              <input type="password" class="form-text" id="repwd" name="repwd" >
            </div>
            <div class="form-row">
              <label class="form-label">电话</label>
              <label for="newTel"></label>
              <input type="text" class="form-text" id="newTel" name="newTel" value="<%=request.getParameter("tel")%>">
            </div>
            <div class="sex" >
              <label class="form-label" style="float: left;color: #4d61fc">性别</label>
              <select name="sex" style="float: right">
                <option value="0" style="font-size: 12px;">男</option>
                <option value="1" style="font-size: 12px;">女</option>
              </select><br/>
            </div>
            <div class="form-row button-login">
              <button type="submit" class="btn" style="float: left" >确定</button>
              <button type="reset" class="btn" style="float: right">重置</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
</body>
</html>