一个简单的学生管理小项目

已于 2025-02-10 17:04:57 修改
阅读量581 收藏
点赞数 20
文章标签： html5 json javascript jquery
于 2024-12-22 15:32:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2403_87729201/article/details/144647219
版权

基于 Java Web 的增删改查项目实现

本文将详细介绍一个基于 Java Web 的增删改查项目，包括前端页面、JavaScript 交互逻辑、后端 Servlet 处理以及数据库操作。

项目结构

project
├── src
│   ├── com.myFirstWeb.servlet
│   │   ├── SearchServlet.java
│   │   ├── SearchByName.java
│   │   ├── AddServlet.java
│   │   ├── DeleteServlet.java
│   │   ├── UpdateServlet.java
│   │   ├── SearchById.java
│   ├── com.myFirstWeb.db
│       ├── MysqlUtil.java
│       ├── DBConnection.java
├── web
│   ├── index.html
│   ├── js
│   │   ├── JQuery.js
│   │   ├── index.js
│   ├── css
│       ├── style.css

数据库设计

数据表：student

字段名数据类型描述
idINT学生ID（主键，自增）
nameVARCHAR学生姓名
sexVARCHAR学生性别
ageINT学生年龄

前端页面

HTML 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <script src="js/JQuery.js"></script>
    <script src="js/index.js" defer></script>
    <style>
        .addModel {
            margin-top: 30px;
            width: 260px;
            height: 180px;
            border: orange solid 5px;
            padding: 20px;
        }
        .updateModel {
            margin-top: 30px;
            width: 260px;
            height: 180px;
            border: skyblue solid 5px;
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" class="name">
    <input type="button" value="搜索" class="btn">

    <table border="1">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

    <div class="addModel">
        姓名：<input type="text" class="a_name"><br><br>
        年龄：<input type="text" class="a_age"><br><br>
        性别：<input type="text" class="a_sex"><br><br>
        <input type="button" value="添加" class="add">
    </div>

    <div class="updateModel">
        姓名：<input type="text" class="u_name"><br><br>
        年龄：<input type="text" class="u_age"><br><br>
        性别：<input type="text" class="u_sex"><br><br>
        <input type="button" value="修改" class="updatebutton">
    </div>
</body>
</html>

JavaScript 交互逻辑

核心功能

  1. 页面加载时查询所有数据

  2. 搜索功能

  3. 添加功能

  4. 删除功能

  5. 修改功能

// 页面加载时查询所有数据
$(document).ready(function () {
    $.ajax({
        url: "SearchServlet",
        type: "get",
        success: function (value) {
            renderTable(value.data);
        },
        error: function () {
            alert("查找出错了");
        }
    });
});

// 渲染表格
function renderTable(data) {
    $("thead").append("<tr>" +
        "<th>id</th>" +
        "<th>name</th>" +
        "<th>sex</th>" +
        "<th>age</th>" +
        "<th>操作</th>" +
        "</tr>");
    $("tbody").empty();
    data.forEach(function (item) {
        $("tbody").append("<tr>" +
            "<td>" + item.id + "</td>" +
            "<td>" + item.name + "</td>" +
            "<td>" + item.sex + "</td>" +
            "<td>" + item.age + "</td>" +
            "<td>" +
            "<input type='button' value='修改' class='update' index='" + item.id + "'>" +
            "<input type='button' value='删除' class='delete' index='" + item.id + "'>" +
            "</td>" +
            "</tr>");
    });
}

// 搜索功能
$(".btn").on("click", function () {
    var name = $(".name").val();
    $.ajax({
        url: "SearchByName?na=" + name,
        type: "get",
        success: function (value) {
            renderTable(value.data);
        },
        error: function () {
            alert("查找出错了");
        }
    });
});

// 添加功能
$(".add").on("click", function () {
    var name = $(".a_name").val();
    var sex = $(".a_sex").val();
    var age = $(".a_age").val();
    $.ajax({
        url: "AddServlet",
        type: "post",
        data: {
            name: name,
            sex: sex,
            age: age
        },
        success: function (value) {
            alert(value);
            location.reload();
        },
        error: function () {
            alert("添加出错啦");
        }
    });
});

// 删除功能
$("tbody").on("click", ".delete", function () {
    var id = $(this).attr("index");
    $.ajax({
        url: "DeleteServlet",
        type: "post",
        data: {
            id: id
        },
        success: function (value) {
            alert(value);
            location.reload();
        },
        error: function () {
            alert("删除出错啦");
        }
    });
});

// 修改功能
$("tbody").on("click", ".update", function () {
    $(".updateModel").css("display", "block");
    $(".addModel").css("display", "none");
    var id = $(this).attr("index");
    $.ajax({
        url: "SearchById?id=" + id,
        type: "get",
        success: function (value) {
            var obj = value.data[0];
            $(".updatebutton").attr("index", obj.id);
            $(".u_name").val(obj.name);
            $(".u_sex").val(obj.sex);
            $(".u_age").val(obj.age);
        },
        error: function () {
            alert("查找出错啦");
        }
    });
});

$(".updatebutton").on("click", function () {
    var id = $(".updatebutton").attr("index");
    var name = $(".u_name").val();
    var sex = $(".u_sex").val();
    var age = $(".u_age").val();
    $.ajax({
        url: "UpdateServlet",
        type: "post",
        data: {
            id: id,
            name: name,
            age: age,
            sex: sex
        },
        success: function (value) {
            alert(value);
            location.reload();
        },
        error: function () {
            alert("修改出错啦");
        }
    });
});

后端处理

1. 查询所有数据

SearchServlet
package com.myFirstWeb.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.myFirstWeb.db.MysqlUtil;

@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=utf-8");
        String sql = "SELECT * FROM student";
        String[] columns = {"id", "name", "sex", "age"};
        String res = MysqlUtil.getJsonBySql(sql, columns);
        response.getWriter().write(res);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

2. 按名称搜索

SearchByName
package com.myFirstWeb.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.myFirstWeb.db.MysqlUtil;

@WebServlet("/SearchByName")
public class SearchByName extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        String name = request.getParameter("na");
        String sql = "SELECT * FROM student WHERE name = \"" + name + "\"";
        String[] columns = {"id", "name", "sex", "age"};
        String res = MysqlUtil.getJsonBySql(sql, columns);
        response.getWriter().write(res);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

3. 添加数据

AddServlet
package com.myFirstWeb.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.myFirstWeb.db.MysqlUtil;

@WebServlet("/AddServlet")
public class AddServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String sex = request.getParameter("sex");
        String age = request.getParameter("age");
        String sql = "INSERT INTO student (age, name, sex) VALUES (" + age + ", \"" + name + "\", \"" + sex + "\")";
        int num = MysqlUtil.add(sql);
        String res = num > 0 ? "添加成功" : "添加失败";
        response.getWriter().write(res);
    }
}

4. 删除数据

DeleteServlet
package com.myFirstWeb.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.myFirstWeb.db.MysqlUtil;

@WebServlet("/DeleteServlet")
public class DeleteServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String id = request.getParameter("id");
        String sql = "DELETE FROM student WHERE id = " + id;
        int num = MysqlUtil.del(sql);
        String res = num > 0 ? "删除成功" : "删除失败";
        response.getWriter().write(res);
    }
}

5. 修改数据

UpdateServlet
package com.myFirstWeb.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.myFirstWeb.db.MysqlUtil;

@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        String sex = request.getParameter("sex");
        String age = request.getParameter("age");
        String sql = "UPDATE student SET name = \"" + name + "\", sex = \"" + sex + "\", age = " + age + " WHERE id = " + id;
        int num = MysqlUtil.update(sql);
        String res = num > 0 ? "修改成功" : "修改失败";
        response.getWriter().write(res);
    }
}

数据库操作工具类

MysqlUtil

package com.myFirstWeb.db;

import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;

public class MysqlUtil {
    private static Connection getConnection() throws ClassNotFoundException, SQLException {
        Class.forName("com.mysql.jdbc.Driver");
        return DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "password");
    }

    public static String getJsonBySql(String sql, String[] columns) throws SQLException {
        StringBuilder json = new StringBuilder("[");
        Connection connection = getConnection();
        Statement statement = connection.createStatement();
        ResultSet resultSet = statement.executeQuery(sql);

        while (resultSet.next()) {
            json.append("{");
            for (int i = 0; i < columns.length; i++) {
                String column = columns[i];
                json.append("\"").append(column).append("\":\"").append(resultSet.getString(column)).append("\"");
                if (i < columns.length - 1) {
                    json.append(",");
                }
            }
            json.append("},");
        }
        json.append("]");
        resultSet.close();
        statement.close();
        connection.close();
        return json.toString();
    }

    public static int add(String sql) throws SQLException {
        Connection connection = getConnection();
        Statement statement = connection.createStatement();
        int num = statement.executeUpdate(sql);
        statement.close();
        connection.close();
        return num;
    }

    public static int del(String sql) throws SQLException {
        Connection connection = getConnection();
        Statement statement = connection.createStatement();
        int num = statement.executeUpdate(sql);
        statement.close();
        connection.close();
        return num;
    }

    public static int update(String sql) throws SQLException {
        Connection connection = getConnection();
        Statement statement = connection.createStatement();
        int num = statement.executeUpdate(sql);
        statement.close();
        connection.close();
        return num;
    }
}

总结

通过以上实现，我们完成了一个完整的增删改查项目，包括：

  1. 前端页面：实现了数据展示、添加、修改和删除功能。

  2. JavaScript 交互：通过 AJAX 实现了与后端的异步通信。

  3. 后端 Servlet：处理了前端的请求并返回 JSON 数据。

  4. 数据库操作：通过工具类实现了对数据库的增删改查操作。

希望本文对你实现类似的项目有所帮助！如果有任何问题，欢迎在评论区留言讨论。 😊

学生管理系统项目演示
龚道松
03-05 927
package com.gds.demospring.test; import java.util.ArrayList; import java.util.Scanner; /** * @Author 龚道松 * @Date 2019/3/5 0005 17:27 * @Wersion 1.0 **/ public class StudentMannger { public...
JavaWeb增删改查实例
gitblog_09727的博客
10-15 656
JavaWeb增删改查实例 【下载地址】JavaWeb增删改查实例 本仓库提供了一个简单的JavaWeb项目实例，主要演示了如何使用JDBC实现基本的增删改查（CRUD）操作。该项目适用于JavaWeb开发的新手小白，帮助他们快速上手并理解JavaWeb开发的基本流程 ...
用Java实现一个最基础的学生信息管理系统
qq_52803681的博客
02-07 475
本人大一菜鸡一枚，初学Java，第一次做项目，用到的都是最基础的知识，大佬勿喷（ 学生类 package com.lonelystar.student; public class student { private String id; private String name; private String age; private String address; public student() { } public student(Strin
学生管理系统项目
SilentLand的博客
07-09 2510
步骤如下： （1）定义学生类 （2）学生管理系统的主界面的代码编写 （3）学生管理系统查看所有学生的代码编写 （4）学生管理系统添加学生的代码编写 （5）学生管理系统删除的代码编写 （6）学生管理系统修改的代码编写
学生管理系统小项目
06-04
Java做的简单学生管理系统，可用于课程设计什么的。。。
学生智学堂项目制作——1.2（大概的了解项目并导入相关jar包）
qq_40965783的博客
12-19 262
前提：先创建好Maven工程，再将Maven工程转换为标准的Web工程。 从今天开始我们就开始着手写一个学生管理系统的项目了，这个项目的目的是为了放便和班班主任能够更好的管理学生并减轻负担。我们先来大概的了解一下学生管理系统这个项目，模块划分如下（并给模块划分创建相对应的数据库表，在表中合理的定义字段。后面我再向同学们介绍表的字段结构和字段的意思）： 模块划分： 学生信息管理基础模块 ...
J2EE项目系列（一）--学生管理系统
Jack__Frost的博客
12-16 2万+
后端学习之路开始了，很让人兴奋，因为自己的真正职业规划应该大致浮现了，写这个的时候本来以为会很困难的，因为之前一点都不了解后端，谁知道写着写着发现，其实跟android开发基本共通的，都是MVC，都是接口设计，都是逻辑分析。好了，这个系列会以逐步掌握Java后端框架为主线来写些基本的项目。希望大家有所收获。
Java项目三：学生管理系统
innocence的博客
03-19 8721
项目目标： 1、记录不同学生的成绩 2、能对学生信息进行增删查改等操作 3、有登录界面 4、有学生信息管理界面 Java代码： 1.登录界面 package Student; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; i...
学生信息管理项目
ymengzhu的博客
08-29 244
#单元测试 json序列化和反序列化单元测试 被测试类位置：src/main/java/util/JSONUtil.class 测试文件位置：src/test/java/yang/util/JSONUtilTest.class <1>测试方法简介 序列化：序列化JAVA对象为json字符串 创建一个map<String,String> map=new HashMap<>()； 添加一些数据，打印出序列化map中数据，断言是否为空。 反序列化：反序列化json字符串为j
项目-----学生管理项目03-----流程梳理
qq_43265746的博客
12-25 209
前言：当项目框架的建好了，就可以写业务了。在写业务之前，要缕清一个流程： controller----&gt;servlet-----&gt;dao 我们就按照这个流程写吧！！！ 创建controller类，在类中调用service层并创建getallStu方法 package com.controller; import java.util.List; import org.s...
史上最清晰的学生管理系统项目总结||c++
李志杰的博客
12-05 3147
一、数据的封装 我们需要定义两个类，一个是我们需要操作的基本但闻——学生，另一个则是系统，在系统内有我们需要的主要功能。 1.学生 class StuInfo { private: char sno[20];//学号 char sname[20];//姓名 char cname[20];//班级 char sex[4];//性别 int age; char tel[15];//电话 ...
学生信息管理系统项目完成总结
风过留痕
10-28 1万+
学生信息管理系统项目完成总结--菜鸟项目完结后的感悟和心得体会
学生管理系统 项目总结
Tang Hui
09-14 2020
采用的MVC三层架构   知识点： 1.    框架（中央控制器） 作用： 注解：利用注解将每个Action类加上标注，访问时通过客户端发送的访问地址来判断要执行哪个Action 。这里需要用到控制器（一个Servlet，中央控制器），在web.xml文件中配置这个Servlet的范围，在客户端发送的地址中带.do的都栏截。   这个Servlet在应用启动时就启动，在init（se
用HTML5+JavaScript实现汉字转拼音工具
cnds123的专栏
05-23 1183
用HTML5+JavaScript实现汉字转拼音工具
HTML5实现简洁的端午节节日网站源码
热门推荐
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
05-30 2万+
HTML5实现简洁的端午节节日网站源码，酷炫的大气简洁端午节节日网页源码，酷炫的大气简洁端午节节日网页源码模板，HTML酷炫的大气简洁端午节节日网页源码，内置酷炫的动画，界面干净整洁，页面主题清晰，页面模板示例规范，可以根据板块定义自己主题内容，全方位介绍内容，可以拆分多个想要的页面，可以扩展自己想要的，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
企业展示型网站模板HTML5网站模板下载指南
最新发布
yunbuluo的博客
06-02 327
例如，ThemeForest是全球知名的模板交易平台，提供了大量高质量的HTML5企业展示型网站模板，每个模板都有详细的介绍和演示，方便企业选择。而HTML5网站模板，凭借其跨平台兼容性、丰富的多媒体支持和易于定制的特点，成为了众多企业建站的首选。通过选择合适的模板，并进行定制修改和优化，企业可以快速搭建出一个具有专业水准的网站，提升企业的品牌形象和市场竞争力。设计素材网站：一些设计素材网站，如千图网、包图网等，除了提供图片、图标等设计素材外，也会有一些HTML5网站模板可供下载。
HTML5 视频播放器：从基础到进阶的实现指南
weixin_41544125的博客
05-28 972
通过CSS和JavaScript，可以创建一个自定义的播放控制栏，以满足特定的设计需求。bottom : 0;});});});bottom : 0;});});});bottom : 0;});});});bottom : 0;});});});bottom : 0;
HTML5基础
m0_62696265的博客
05-28 573
如在同文件夹的img中有1.webp格式的图片，举例： 举例： 图片找不到，alt和title也没有的话就只显示一个烂图标，一般alt是必加的如果将元素用红框框起来，则会发现：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值