当前位置： 首页 > article >正文

前后端+数据库的项目实战--学生信息管理系统-易

article 2025/3/12 20:27:37

一、创建前端 student.html

二、js文件 student.js

三、后端 servlet【主要是post/get函数里的代码】

searchstudent.java

AddStudent.java

DeleteStudent.java

SearchById.java

UpdateStudent.java

四、数据库

五、实现效果

如何把数据库中的信息经过后端显示到前端页面呢？

 

一、创建前端 student.html

注意外引js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<script src="js/jQUery.min.js"></script>
<script src="js/student.js" defer></script>
<style>
    /* 全局样式 */
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 按钮样式 */
    .button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
    }

    .button:hover {
        transform: scale(1.05);
    }

    .addBtn {
        background-color: #28a745;
        color: #fff;
        margin-bottom: 20px;
    }

    .addBtn:hover {
        background-color: #218838;
    }

    /* 表格样式 */
    table {
        width: 100%;
        max-width: 800px;
        border-collapse: collapse;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    thead {
        background-color: #007bff;
        color: #fff;
    }

    th, td {
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tbody tr:hover {
        background-color: #e9ecef;
    }

    td button {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        margin: 0 5px;
    }

    td button:nth-child(1) {
        background-color: #ffc107;
        color: #333;
    }

    td button:nth-child(1):hover {
        background-color: #e0a800;
    }

    td button:nth-child(2) {
        background-color: #dc3545;
        color: #fff;
    }

    td button:nth-child(2):hover {
        background-color: #a71d2a;
    }

    /* 弹窗样式 */
    .modal {
        width: 300px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .modal input[type='text'] {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }

    .modal .button {
        margin-right: 10px;
    }

    .modal .button:last-child {
        margin-right: 0;
    }

    /* 背景遮罩 */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 700;
    }
</style>
</head>
<body>
<input type='button' value='添加' class='addBtn button'>

<div class="overlay"></div>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行 -->
    </tbody>
</table>

<div class='addModel modal'>
    <h3>添加学生信息</h3>
    <div>
        姓名：<input type='text' class='name'>
    </div>
    <div>
        年龄：<input type='text' class='age'>
    </div>
    <div>
        性别：<input type='text' class='sex'>
    </div>
    <div>
        <input type='button' value='添加' class='add button'>
        <input type='button' value='取消' class='back button'>
    </div>
</div>

<div class='updateModel modal'>
    <h3>修改学生信息</h3>
    <div>+
        姓名：<input type='text' class='u_name'>
    </div>
    <div>
        年龄：<input type='text' class='u_age'>
    </div>
    <div>
        性别：<input type='text' class='u_sex'>
    </div>
    <div>
        <input type='button' value='修改' class='u_update button'>
        <input type='button' value='取消' class='u_back button'>
    </div>
</div>

<script>
    // 示例：显示添加弹窗
    document.querySelector('.addBtn').addEventListener('click', function() {
        document.querySelector('.addModel').style.display = 'block';
        document.querySelector('.overlay').style.display = 'block';
    });

    // 示例：隐藏弹窗
    document.querySelectorAll('.back, .u_back').forEach(button => {
        button.addEventListener('click', function() {
            document.querySelector('.addModel').style.display = 'none';
            document.querySelector('.updateModel').style.display = 'none';
            document.querySelector('.overlay').style.display = 'none';
        });
    });
</script>
</body>
</html>

二、js文件 student.js

直接ajax模板+前端交互的js操作，绑定事件

get请求很容易，有地址即可一般用在查找上；get请求传参需要写到url中

post请求传参一般写到data中，可以混用

// 查找
$.ajax({
    url: "SearchStudent", // 请求路径
    type: "get", // 请求方式 get查找     post 添加，删除，修改  
    success: function(value) {
        var arr = value.data;
        for (var i = 0; i < arr.length; i++) {
            $("tbody").append("<tr>" +
                "<td>" + arr[i].id + "</td>" +
                "<td>" + arr[i].name + "</td>" +
                "<td>" + arr[i].age + "</td>" +
                "<td>" + arr[i].sex + "</td>" +
                "<td>" +
                "<input type='button' value='修改' class='u_update' index='" + arr[i].id + "'>" +
                "<input type='button' value='删除' class='delete' index='" + arr[i].id + "'>" +
                "</td>" +
                "</tr>");
        }
    }, // 请求成功的回调函数
    error: function() {
        alert("请求失败啦");
    } // 请求失败的回调函数
});

// 删除
$("tbody").on("click", ".delete", function() {
    var id = $(this).attr("index");
    $.ajax({
        url: "DeleteStudent", // 请求路径
        type: "post", // 请求方式 get post
        data: {
            deleteId: id
        }, // 参数域
        success: function(value) {
            alert(value);
            // 页面刷新
            location.reload();
        }, // 请求成功的回调函数
        error: function() {
            alert("请求失败啦");
        } // 请求失败的回调函数
    });
});

// 添加模块显示
$(".addBtn").on("click", function() {
    $(".addModel").css("display", "block");
});

// 添加模块隐藏
$(".back").on("click", function() {
    $(".addModel").css("display", "none");
});

// 添加
$(".add").on("click", function() {
    var name = $(".name").val().trim();
    var sex = $(".sex").val().trim();
    var age = $(".age").val().trim();
    $.ajax({
        url: "AddStudent", // 请求路径
        type: "post", // 请求方式 get post
        data: {
            addName: name,
            addSex: sex,
            addAge: age,
        }, // 参数域
        success: function(value) {
            alert(value);
            // 页面刷新
            location.reload();
        }, // 请求成功的回调函数
        error: function() {
            alert("请求失败啦");
        } // 请求失败的回调函数
    });
});

// 回显
$("tbody").on("click", ".u_update", function() {
    $(".updateModel").css("display", "block");
    // 获取id
    var id = $(this).attr("index");

    $.ajax({
        url: "SearchById",
        type: "get",
        data: {
            id: id,
        },
        success: function(value) {
            var obj = value.data[0];
            $(".u_update").attr("index", obj.id);
            $(".u_name").val(obj.name);
            $(".u_sex").val(obj.sex);
            $(".u_age").val(obj.age);
        }, // 请求成功的回调函数
        error: function() {
            alert("请求失败啦");
        } // 请求失败的回调函数
    });
});

// 修改模块隐藏
$(".u_back").on("click", function() {
    $(".updateModel").css("display", "none");
});

// 修改
$(".u_update").on("click", function() {
    var id = $(".u_update").attr("index");
    var name = $(".u_name").val();
    var age = $(".u_age").val();
    var sex = $(".u_sex").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("请求失败啦");
        } // 请求失败的回调函数
    });
});

三、后端 servlet【主要是post/get函数里的代码】

servlet与前端进行数据交互get/post

创建url请求路径SearchStudent.java、AddStudent.java、DeleteStudent.java，在这里写后端操作，注意设置的数据格式和响应语句，get请求返回的数据返回到前端的value中

searchstudent.java

package com.lxy.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.lxy.db.MysqlUtil;

/**
 * Servlet implementation class SearchStudent
 */
@WebServlet("/SearchStudent")
public class SearchStudent extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SearchStudent() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//查找
		String sql = "select * from student";
		String[] colums = {"id","name","age","sex"};
 		String res = MysqlUtil.getJsonBySql(sql, colums);

		//设置后端给前端返回的为json格式的数据
		response.setContentType("text/json;charset=utf-8");
		//给前端响应数据
		response.getWriter().write(res);

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

AddStudent.java

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		
		//接收参数
		String name = request.getParameter("addName");
		String sex = request.getParameter("addSex");
		String age = request.getParameter("addAge");
		//添加
		String sql = "insert into student(name,age,sex) values(\""+name+"\","+age+",\""+sex+"\")";
		int num = MysqlUtil.add(sql);
		
		String res = "添加失败";
		if(num>0) {
			res="添加成功";
		}
		//设置数据编码
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		//数据返回		
		response.getWriter().write(res);
	}

DeleteStudent.java

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//接收参数
		String id = request.getParameter("deleteId");
		
		//删除
		String sql = "delete from student where id = "+id;
		int num = MysqlUtil.del(sql);
		
		String res = "删除失败";
		if(num>0) {
			res="删除成功";
		}
		//设置数据编码
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
				
		response.getWriter().write(res);
	}

SearchById.java

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id = request.getParameter("id");
		String sql = "select * from student where id = "+id;
		String[] colums = {"id","name","sex","age"};
		String res = MysqlUtil.getJsonBySql(sql, colums);
		response.setContentType("text/json;charset=utf-8");
		response.getWriter().write(res);

	}

UpdateStudent.java

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		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+"\",age="+age+",sex=\""+sex+"\" where id ="+id;
	
		System.out.println(sql);
		int num = MysqlUtil.add(sql);
		String res = "修改失败";
		if(num>0) {
			res="修改成功";
		}
		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(res);
	}

四、数据库

五、实现效果

 


http://www.kler.cn/a/581802.html

相关文章：

  • Unity辅助工具_头部与svn
  • 【CXX】6.6 UniquePtr＜T＞ — std::unique_ptr＜T＞
  • 深入理解 Rust 中的模式匹配语法
  • SpringBoot（1）——创建SpringBoot项目的方式
  • rom定制系列------小米note3 原生安卓15 批量线刷 默认开启usb功能选项 插电自启等
  • Java中数据库索引选择B+树而非红黑树的详细解析
  • DeepSeek引领端侧AI革命，边缘智能重构AI价值金字塔
  • Spring Boot中@Valid 与 @Validated 注解的详解
  • c++-------------------智能指针
  • 途游游戏25届AI算法岗内推
  • 2024华为OD机试真题-日志排序(C++)-E卷-100分
  • AttributeError: module ‘backend_interagg‘ has no attribute ‘FigureCanvas‘
  • Android Compose MutableInteractionSource介绍
  • 工程化与框架系列（28）--前端国际化实现
  • TDengine作为存储有什么缺点
  • 数据库之PostgreSQL详解（待补充）
  • Websocket的基本使用
  • 使用 React 和 Ant Design 处理 Excel 和 CSV 文件
  • upload-labs-master通关攻略(1~4)
  • 本地部署 OpenManus 保姆级教程（Windows 版）