Springboot+Bootstrap实现增删改查实战

说明

最近有朋友问我有没有Springboot+Bootstrap实现增删改查的DEMO，当时没有，现在他来了！

实现效果

代码地址

https://gitee.com/indexman/bootstrap_curd

水平一般能力有限，觉得有用的朋友给我来个一键三连或捐助：）

软件架构

前端：bootstrap4.5+thymeleaf+分页插件
后端：spring boot+mybatisPlus
数据库：mysql

核心功能代码

前端

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户管理</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  <style type="text/css">
    .container {
      padding: 20px;
    }

    .search {
      padding-bottom: 20px;
      border-bottom: 1.5px solid #ddd;
    }

    #add {
      margin-right: 5em;
    }

    #search {
      margin-left: 0.5em;
    }

    .pagination {
      display: flex;
      padding-left: 0;
      margin: 20px 0;
      border-radius: 4px;
    }

    .pagination>li:last-child>a, .pagination>li:last-child>span {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .pagination>li:first-child>a, .pagination>li:first-child>span {
      margin-left: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
      z-index: 3;
      color: #fff;
      cursor: default;
      background-color: #337ab7;
      border-color: #337ab7;
    }

    .pagination>li>a, .pagination>li>span {
      position: relative;
      float: left;
      padding: 6px 12px;
      margin-left: -1px;
      line-height: 1.42857143;
      color: #337ab7;
      text-decoration: none;
      background-color: #fff;
      border: 1px solid #ddd;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="container">
  <input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
  <div class="search">
    <div class="input-group col-md-8">
      <button class="btn btn-success" type="button" id="add">
        添加
      </button>
      <input class="form-control" type="text" id="username" placeholder="请输入账号，按回车键">
      <span class="input-group-btn">
					<button class="btn btn-primary" type="button" id="search">
																		查询
					</button>
			</span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="portlet">
        <div class="category-list">
          <table class="table table-striped table-hover" id="dataTable">
            <thead>
            <tr>
              <th>用户名</th>
              <th>邮箱</th>
              <th>姓名</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8" align="center" style="position: fixed; bottom: 20%;">
      <!-- 分页控件，标签必须是<ul> -->
      <ul id="pageButton" class="pagination-centered"></ul>
    </div>
  </div>
</div>

<!--编辑框-->
<div class="modal fade" id="modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">修改用户</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" id="m_id" hidden="hidden">
        <div class="form-group">
          <label class="control-label" for="m_username">用户名：</label>
          <input type="text" class="form-control" id="m_username" placeholder="">
        </div>
        <div class="form-group">
          <label class="control-label" for="m_email">邮箱：</label>
          <input type="text" class="form-control" id="m_email" placeholder="">
        </div>
        <div class="form-group">
          <label class="control-label" for="m_truename">姓名：</label>
          <input type="text" class="form-control" id="m_truename" placeholder="">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="modify()">提交</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script src="../js/util.js" th:src="@{/js/util.js}"></script>

<script type="text/javascript">
  var ctx = $("#ctx").val();
  $(function () {
    // 查询第一页数据
    getPage(1);
    // 新增
    $("#add").click(function () {
      reset();
      $('#modify').modal('show');
    });

    // 搜索
    $("#search").click(function () {
      getPage(1);
    });

    // 回车触发查询
    $("#username").keyup(function (event) {
      if (event.keyCode == 13) {
        $("#search").trigger("click");
      }
    });
  });

  // 获取指定页码的数据
  function getPage(pageNo) {
    var dataRow = "";
    $.ajax({
        url: ctx + "/user/list",
        type: "post",
        data: {
          "username": $("#username").val(),
          "pageNo": pageNo
        },
        dataType: "json",
        success: function (response) {
          dataRow = "";
          if (response.data.records.length > 0) {
            console.log(111)
            $.each(response.data.records, function (i, r) {
              dataRow += '<tr>'
                + '<td>'
                + r.username
                + '</td>'
                + '<td>'
                + r.email
                + '</td><td>'
                + r.truename + '</td>'
              ;

              dataRow += '<td>' + new Date(r.createTime).Format("yyyy-MM-dd hh:mm:ss") + '</td><td><a href="javascript:remove(' + r.id + ')" rel="external nofollow" style="color: #CA0C16;">删除' +
                '</a>&nbsp;&nbsp;<a href="javascript:edit(' + r.id + ')" rel="external nofollow" >编辑</a></td></tr>';
            });
          }

          // console.log(dataRow);
          $("#dataTable tbody").empty();
          $("#dataTable tbody").append(dataRow);
          // 分页按钮
          var element = $('#pageButton');
          var options = {
            bootstrapMajorVersion: 4,
            currentPage: pageNo, // 当前页数
            numberOfPages: 5, // 显示按钮的数量
            totalPages: response.data.pages, // 总页数
            itemTexts: function (type, page, current) {
              switch (type) {
                case "first":
                  return "首页";
                case "prev":
                  return "上一页";
                case "next":
                  return "下一页";
                case "last":
                  return "末页";
                case "page":
                  return page;
              }
            },
            // 点击事件，用于通过Ajax来刷新整个list列表
            onPageClicked: function (event, originalEvent, type, page) {
              getPage(page);
            }
          };

          element.bootstrapPaginator(options);
        }
      }
    )
  }

  //删除
  function remove(id) {
    if (confirm("确定删除数据？")) {
      $.ajax({
        type: "POST",
        url: ctx + "/user/remove",
        traditional: true,
        data: {
          id: id
        },
        success: function (data) {
          getPage(1);
        },
        error: function (e) {
          //alert("ERROR: ", e);
          console.log("ERROR: ", e);
        }
      });
    }
  }

  function edit(id) {
    $.ajax({
      url: ctx + "/user/" + id,
      type: "GET",
      success: function (result) {
        if (result.success) {
          //向模态框中传值
          $('#m_id').val(id);
          $('#m_username').val(result.data.username);
          $('#m_email').val(result.data.email);
          $('#m_truename').val(result.data.truename);
        } else {
          alert(result.data.message);
        }
      }
    });

    $('#modify').modal('show');
  }

  //提交修改
  function modify() {
    //获取模态框数据
    var id = $("#m_id").val();
    var username = $("#m_username").val();
    var email = $("#m_email").val();
    var truename = $("#m_truename").val();

    var param = {"id": id, username: username, email: email, truename: truename};

    $.ajax({
      url: ctx + "/user/modify",
      type: "POST",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify(param),
      success: function (data) {
        if (data.success) {
          // 清空表单
          reset();
          $('#modify').modal('hide');
          getPage(1);
        } else {
          alert(data.message);
        }
      }
    });
  }

  function reset() {
    $("#m_id").val("");
    $("#m_username").val("");
    $("#m_email").val("");
    $("#m_truename").val("");
  }
</script>
</body>
</html>

后端

@RequestMapping("/user")
@Controller
public class UserController {
  @Autowired
  private UserService userService;

  @RequestMapping
  public String user(){
    return "user";
  }

  @GetMapping("/{id}")
  @ResponseBody
  public Result<User> get(@PathVariable Integer id){
    User user = userService.getById(id);

    return ResultUtil.ok(user);
  }

  /**
   * 分页查询
   * @param username
   * @param pageNo
   * @param pageSize
   * @return
   */
  @PostMapping("/list")
  @ResponseBody
  public Result<IPage<User>> list(@RequestParam(value = "username", required = false) String username,
               @RequestParam(defaultValue = "1") Integer pageNo,
               @RequestParam(defaultValue = "10") Integer pageSize){
    // 构造查询条件
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();
    if(!StringUtils.isEmpty(username)){
      queryWrapper.like("username",username);
      queryWrapper.orderByDesc("create_time");
    }
    Page<User> page = new Page<>(pageNo,pageSize);

    IPage<User> result = userService.page(page, queryWrapper);
    // 设置总记录数
    result.setTotal(userService.count(queryWrapper));

    return ResultUtil.ok(result);
  }

  @PostMapping("/add")
  @ResponseBody
  public Result<String> add(@RequestBody User user){
    userService.save(user);

    return ResultUtil.ok("添加成功！");
  }

  @PostMapping("/modify")
  @ResponseBody
  public Result<String> modify(@RequestBody User user){
    userService.saveOrUpdate(user);

    return ResultUtil.ok("修改成功！");
  }

  @PostMapping("/remove")
  @ResponseBody
  public Result<String> remove(@RequestParam Integer id){
    userService.removeById(id);

    return ResultUtil.ok("删除成功！");
  }
}

到此这篇关于Springboot+Bootstrap实现增删改查实战的文章就介绍到这了,更多相关Springboot+Bootstrap增删改查内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Springboot+hibernate实现简单的增删改查示例

    1.创建好项目之后在配置端口号(也可以不用配置,默认端口8080) #server server.port=8080 server.tomcat.uri-encoding=utf-8 2.配置mysql #MySQL spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf8 sprin

  • springboot使用JdbcTemplate完成对数据库的增删改查功能

    springboot使用JdbcTemplate完成对数据库的增删改查功能

    首先新建一个简单的数据表,通过操作这个数据表来进行演示 DROP TABLE IF EXISTS `items`; CREATE TABLE `items` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) DEFAULT NULL, `name` varchar(10) DEFAULT NULL, `detail` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE

  • SpringBoot + Mybatis增删改查实战记录

    简介 SpringBoot和Mybatis是啥请自行百度,作者这里也是花了几天时间入门了这个框架用来完成任务,并且也算符合要求的完成了任务,期间也各种百度但是没找到自己想要的那种简单易懂的教程,所以踩了很多坑,写这个博客的目的就是为了让大家少踩一点坑,开始. 创建一个SpringBoot项目https://start.spring.io/ 点开这个网站,创建一个Springboot项目,如下图,这里用的是2.1.5,学技术嘛,就是要学新的. 选择依赖,点击左下角的Dependencies Web

  • IntelliJ Idea SpringBoot 数据库增删改查实例详解

    SpringBoot 是 SpringMVC 的升级,对于编码.配置.部署和监控,更加简单 微服务 微服务是一个新兴的软件架构,就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务.一个微服务的策略可以让工作变得更为简便,它可扩展单个组件而不是整个的应用程序堆栈,从而满足服务等级协议. Spring 为 微服务提供了一整套的组件-SpringClound , SpirngBoot 就是该基础. 第一个SpringBoot程序 这里使用的开发软件是IntelliJ Idea,和Eclipse

  • spring boot2结合mybatis增删改查的实现

    1. 场景描述 本节结合springboot2.springmvc.mybatis.swagger2等,搭建一个完整的增删改查项目,希望通过这个基础项目,能帮忙朋友快速上手springboot2项目. 2. 解决方案 2.1新建springboot项目 使用idea新建springboot项目(springboot项目快速搭建) (1)new project (2)gav设置 2.2 项目整体图及说明2.2.1 整体图 2.2.2 说明 项目包含4大内容 (1)pom.xml maven项目必备

  • SpringBoot JPA实现增删改查、分页、排序、事务操作等功能示例

    今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能. 下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and 关键字,比如 findByHeightAndSex(int height,char sex): public List<User> findByHeightAndSex(int height,char sex); // Or --- 等价于 SQL 中的 or 关键字,比如 findByHei

  • Spring Boot实现简单的增删改查

    在pom.xml添加相应的依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</gro

  • Spring boot+mybatis+thymeleaf 实现登录注册增删改查功能的示例代码

    本文重在实现理解,过滤器,业务,逻辑需求,样式请无视.. 项目结构如下 1.idea新建Spring boot项目,在pom中加上thymeleaf和mybatis支持.pom.xml代码如下 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3

  • Springboot+Bootstrap实现增删改查实战

    Springboot+Bootstrap实现增删改查实战

    说明 最近有朋友问我有没有Springboot+Bootstrap实现增删改查的DEMO,当时没有,现在他来了! 实现效果 代码地址 https://gitee.com/indexman/bootstrap_curd 水平一般能力有限,觉得有用的朋友给我来个一键三连或捐助:) 软件架构 前端:bootstrap4.5+thymeleaf+分页插件 后端:spring boot+mybatisPlus 数据库:mysql 核心功能代码 前端 <!DOCTYPE html> <html xm

  • Node.js对MySQL数据库的增删改查实战记录

    Node.js对MySQL数据库的增删改查实战记录

    目录 在项目中操作数据库的三大步骤 操作数据库的具体步骤 一:安装MySQL模块及express模块 二:通过express创建一个服务器 三:配置MySQL模块 四:测试 mysql 模块能否正常工作 SELECT:查询one数据表中所有的数据: INSERT INTO:向数据库中添加数据: UPADTE:修改数据库中的数据: DELETE:删除数据库中的数据: 总结 在项目中操作数据库的三大步骤 安装操作 MySQL 数据库的第三方模块(mysql) 通过 mysql 模块连接到 MySQL

  • python Django实现增删改查实战代码

    python Django实现增删改查实战代码

    1.先创建个app子级 python .\manage.py startapp app01 然后创建数据模型 app01下的modules.py文件 from django.db import models # Create your models here. class UserInfo(models.Model): name=models.CharField(max_length=32) password=models.CharField(max_length=12) age=models.

  • SpringBoot模拟员工数据库并实现增删改查操作

    SpringBoot模拟员工数据库并实现增删改查操作

    目录 1:首先创建一个pojo层在里面定义数据 2:编写dao层注入数据: 3:总结 1:首先创建一个pojo层在里面定义数据 Department部门: package com.example.springbootweb.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; /** * @author ${范涛之} * @Description * @create

  • JPA之使用JPQL语句进行增删改查

    JPA支持两种表达查询的方法来检索实体和来自数据库的其他持久化数据:查询语句(Java Persistence Query Language,JPQL)和条件API(criteria API).JPQL是独立于数据库的查询语句,其用于操作逻辑上的实体模型而非物理的数据模型.条件API是根据实体模型构建查询条件 1.Java持久化查询语句入门 复制代码 代码如下: List<Person> persons= entityManager.createQuery("select p fro

  • spring-data-jpa实现增删改查以及分页操作方法

    有几个坑一定要注意: 实现删除操作的时候一定要在各层类中 增加 @Transactional 注释,否则会一直报错 在自己使用@Query定义操作时,会碰到编译器报错,这个时候只需要禁用QL的语法检查即可 以下是部分代码: //Repository package com.example.myproject.dao; import com.example.myproject.domain.User; import org.springframework.data.domain.Page; imp

  • SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例

    SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例

    目录 一.开发工具 二.项目结构 三.编写项目 四.运行项目 由于是初学Vue.Axios,可能在界面和功能上存在着一些问题,但这些并不妨碍使用.如果有对编程感兴趣的朋友,可以试着做一做.这个由于是第一次做,不太熟练.在后续的过程中会不断的完善. 一.开发工具 IntelliJ IDEA Ultimate 2021.1 apache-maven-3.5.4 MySQL5.7 JDK 1.8.0_281 二.项目结构 三.编写项目 1.创建数据库 SET NAMES utf8mb4; SET FO

  • 使用SpringBoot开发Restful服务实现增删改查功能

    使用SpringBoot开发Restful服务实现增删改查功能

    在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练.不过在看了很多关于SpringBoot的介绍之后,并没有想象中的那么难,于是开始准备学习SpringBoot. 在闲暇之余的时候,看了下SpringBoot实战以及一些大神关于SpringBoot的博客之后,开始写起了我的第一个SpringBoot的项目.在能够对SpringBoot进行一些简单的开发Re

随机推荐