Javaweb--通过网页实现对数据库的增删查改

最新推荐文章于 2023-10-10 11:02:21 发布

二十六桥明月夜

最新推荐文章于 2023-10-10 11:02:21 发布

阅读量1.1w

点赞数 14

分类专栏： sprinboot Java 前端文章标签： java spring boot 前端 mysql

本文链接：https://blog.youkuaiyun.com/hailongcsdn/article/details/107545673

版权

本文介绍了一个Javaweb项目，通过网页实现对MySQL数据库中员工数据的增删查改功能。利用Spring Boot后端、MyBatis-Plus和Page Helper进行数据处理，前端采用Layui框架。功能包括数据读取、分页、编辑、删除、搜索和数据导出。项目源代码中展示了相关的Controller、Mapper、Service和实体类的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - Javaweb--通过网页实现对数据库的增删查改

Javaweb–通过网页实现对数据库的增删查改

通常在写一些后台管理系统的时候，一定会有关于数据表格的增删查改的功能实现。最近也是闲来无事，做了这个小案例，希望能帮到有写这方面需求的朋友们。

1、功能需求

这次以单个的员工数据表为例，实现以下功能需求：
1、能够正常从数据库中读取相应数据。
2、设置分页，能够通过点击页码，进行数据更新，同时支持输入页码更新数据。
3、能够实现单行数据的编辑和删除，也可以实现插入数据，同时支持批量删除。
4、能够通过搜索id，更新表格数据。
5、支持表格当前数据导出到Excel表格中保存。

2、技术选型

数据库：MySQL5.5
前端：Layui
后端：SpringBoot+MyBatis-Plus+Page Helper

2、最终效果图

部分操作截图
在这里插入图片描述

在这里插入图片描述

3、数据库准备

sql文件

create table employee(
	id int auto_increment primary key,
	name varchar(20),
	tel bigint,
	address varchar(20),
	money int
);

在这里插入图片描述

4、前端开发

主页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <table id="demo" lay-filter="test"></table>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edittool">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deltool">删除</a>
</script>

<script type="text/html" id="bar">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="reload" id="search" lay-event="search"><i class="layui-icon">&#xe615;</i>搜索</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>增加</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit" id="edit"><i class="layui-icon">&#xe642;</i>编辑</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"><i class="layui-icon">&#x1006;</i>批量删除</button>
</script>


<script>
    layui.use(['table','layer'], function(){
        var table = layui.table;
        var layer = layui.layer;

        //table渲染
        table.render({
            elem: '#demo'
            ,url: '/employee_find' //数据接口
            ,page: true //开启分页
            ,toolbar: '#bar'
            ,id: 'testReload'
            ,cols: [
                [ //表头
                    {type:'checkbox'}
                    ,{field: 'id', title: 'ID', sort: true}
                    ,{field: 'name', title: '用户名'}
                    ,{field: 'tel', title: '电话', sort: true}
                    ,{field: 'address', title: '居住地'}
                    ,{field: 'money', title: '月薪'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]
            ]});

        //监听头部工具栏点击事件
        //注意：lay-filter="test"和lay-event="add"
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    add();
                    break;
                case 'edit':
                    edit();
                    break;
                case 'del':
                    del();
                    break;
                case 'search':
                    search

最低0.47元/天解锁文章