ssm+mybatis-plus+bootstrap.table.js之CRUD

最新推荐文章于 2022-08-31 10:55:21 发布

黑白棋师

最新推荐文章于 2022-08-31 10:55:21 发布

阅读量332

点赞数

本文链接：https://blog.csdn.net/ZY00121108/article/details/103798277

版权

# ssm+mybatis-plus+bootstrap.table.js之CRUD

在这里插入图片描述

数据库

create table account
(
  id int primary key auto_increment,
  name varchar(90) ,
  tel varchar(18),
  email varchar(90),
  address varchar(90),
  reTime timestamp default now()
);
insert into account values (1,'张三','1827475461','234@ff.com','湖南长沙',default);
insert into account values (2,'李四','1827475461','234@ff.com','湖南长沙',default);
insert into account values (3,'万五','1827475461','234@ff.com','湖南长沙',default);

JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>bootstrapCRUD</title>
    <script src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.min.js"></script>
    <link href="${pageContext.request.contextPath }/static/css/bootstrap.min.css"  rel="stylesheet">
    <script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/static/js/bootstrap-table.js"></script>


</head>
<body>
<br>
<div class="container">
    <!-- 			记录添加弹出层 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addLayer"> 添加记录 </button>
    <div class="modal fade" id="addLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">添加用户</h4>

                </div>
                <div class="modal-body">
                    <form id="add_items_form" class="form-horizontal">
                        <input type="hidden" id="id" class="form-control" name="id"> <br>
                        <input type="text" id="name" class="form-control" placeholder="姓名" name="name"> <br>
                        <input type="text" id="tel" class="form-control" placeholder="电话" name="tel"><br>
                        <input type="text" id="email" class="form-control" placeholder="邮箱" name="email"><br>
                        <input type="text" id="address" class="form-control" placeholder="地址" name="address"><br></form>
                </div>


                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    <button class="btn btn-primary" type="button" onclick="addItem()">确认添加</button>
                </div>

            </div>
        </div>
    </div>
    <!-- <div style="height:200px"></div> -->



    <!-- 			记录修改弹出层 -->
    <div class="modal fade" id="editLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改用户</h4>

                </div>
                <div class="modal-body">
                    <form id="edit_items_form" class="form-horizontal">
                        <input type="hidden" id="id" class="form-control" name="id"> <br>
                        <input type="text" id="name" class="form-control" placeholder="姓名" name="name"> <br>
                        <input type="text" id="tel" class="form-control" placeholder="电话" name="tel"><br>
                        <input type="text" id="email" class="form-control" placeholder="邮箱" name="email"><br>
                        <input type="text" id="address" class="form-control" placeholder="地址" name="address"><br>
                    </form>
                </div>


                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                    <button class="btn btn-primary" type="button" onclick="updateItem()">确认修改</button>
                </div>

            </div>
        </div>
    </div>
    <!-- <div style="height:200px"></div> -->
    <table  class="table table-hover table table-striped" id="mytab">
        <tbody>

        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(ev){
        // 初始化数据
        $('#mytab').bootstrapTable({
            url: 'account/list',
            pagination: true,
            search: true,
            columns: [{
                field: 'id',
                title: '编号'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'tel',
                title: '电话'
            }, {
                field: 'email',
                title: '邮件'
            }, {
                field: 'address',
                title: '地址'
            }, {
                field: 'retime',
                title: '注册时间'
            },{ field: 'Desc',title: '操作',formatter : function (value, row, index) {
                    var desc="<button class='btn btn-success btn-xs'  data-toggle='modal' data-target='#editLayer' onclick='editItems("+row.id+")'>修改</button><button class='btn btn-danger btn-xs' onclick='deleteItem("+row.id+")'>删除</button>";
                    return desc;
                } }
            ]
        });


    });

    //   删除
    function deleteItem(id){
        if(confirm("确定要删除该记录吗？")){
            $.ajax({
                type:"DELETE",
                url:"${pageContext.request.contextPath }/account/delete/"+id,
                dataType:"json",
                success:function(data) {
                    alert("删除成功!");
                    // 刷新
                    window.location.reload();
                }

            });
        }
    }

    //添加记录
    function addItem(){
        var arr = $("#add_items_form").serializeArray();
        var data = {};
        $.each(arr, function (i, item) {
            data[item.name] = item.value
        });
        $.ajax({
            url: '${pageContext.request.contextPath }/account/add',
            data: JSON.stringify(data),
            type:'POST',
            dataType: 'json',
            contentType:'application/json',
            success: function (result) {
                alert("添加成功!");
                // 刷新
                window.location.reload();

            }

        });
    }

    // 	“确认修改”按钮的点击事件
    function updateItem(){
        var arr = $("#edit_items_form").serializeArray();
        var data = {};
        $.each(arr, function (i, item) {
            data[item.name] = item.value
        });
        $.ajax({
            url: '${pageContext.request.contextPath }/account/update',
            data: JSON.stringify(data),
            type:'PUT',
            dataType: 'json',
            contentType:'application/json',
            success: function (result) {
                alert("修改成功!");
                window.location.reload();

            }

        });
    }

    //点击“修改”按钮，打开编辑窗口，回显数据
    function editItems(id){
        $("#edit_items_form")[0].reset();
        $.ajax({
            type:"GET",
            url:"${pageContext.request.contextPath }/account/"+id,
            dataType:"json",
            success:function(data){
                <!--将JSON数据装入表单-->
                var serializeArray = $("#edit_items_form").serializeArray();
                $.each(serializeArray, function (i, item) {
                    var name = item.name;
                    if (data[name]) {
                        var value = data[name];
                        $("#edit_items_form [name='" + name + "']").val(value);
                    }
                });


            }
        });
    }


</script>
</html>

mybatis-plus

详情参考官方资料
官网:https://mp.baomidou.com/

github:https://github.com/baomidou/mybatis-plus

<!--mapper接口-->
@Mapper
public interface AccountMapper extends BaseMapper<Account> {
    
}
<!--service接口-->
public interface AccountService extends IService<Account>{
}
<!--service实现-->
@Service
public class AccountServiceImpl extends ServiceImpl<AccountMapper, Account> implements AccountService{

}

controller层

@Controller
public class AccountController {
    @RequestMapping("index")
    public String index(){
        return "index";
    }
    @Autowired
    private AccountService service;

    @GetMapping("account/list")
    @ResponseBody
    public List<Account> list(){
        return service.list();
    }

    @GetMapping("account/{id}")
    @ResponseBody
    public Account getById(@PathVariable("id") Integer id){
        return service.getById(id);
    }

    @PostMapping("account/add")
    @ResponseBody
    public boolean add(@RequestBody Account account){
        System.out.println("account"+account);
        return service.save(account);
    }

    @PutMapping("account/update")
    @ResponseBody
    public boolean update(@RequestBody Account account){
        return service.updateById(account);
    }

    @DeleteMapping("account/delete/{id}")
    @ResponseBody
    public boolean delete(@PathVariable("id") int id){
        return service.removeById(id);
    }
}

代码示例
github:https://github.com/DropFeather/ssm/tree/4f175339ece8becd61c43bb58765abfecb535161/work_1231
希望大家喜欢，码字不易
如有bug，评论补充，谢谢

黑白棋师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ssm+mybatis-plus+bootstrap.table.js之CRUD

# ssm+mybatis-plus+bootstrap.table.js之CRUD数据库create table account( id int primary key auto_increment, name varchar(90) , tel varchar(18), email varchar(90), address varchar(90), reTim...
复制链接

扫一扫