SpringBoot+Mybatis实现简单的增删改查(续)

本篇主要衔接上篇博客，完成连接前端，实现SpringBoot+Mybatis的增删改查。

首先是首页部分

首页部分则是讲用户信息以表格的形式显示出来： 我用到的layUi中的表格自动渲染方法来展示： 所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

带有 class=“layui-table” 的 标签。 对标签设置属性 lay-data="" 用于配置一些基础参数在 标签中设置属性lay-data=""用于配置表头信息 //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/user/getUsers' //数据接口 ,page: true //开启分页 ,cols: [ [ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'uname', title: '用户名', width:150} ,{field: 'upass', title: '密码', width:100, sort: true} ,{title: '状态',width: 120, templet:function (d) { return "<button type=\"button\" class=\"layui-btn-sm layui-btn-danger\">启用</button>"; } } ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'} ] ] });

具体用法可以去官方文档查询，layUi官方文档地址。

接着就是后端Control

通过Url地址获取数据，具体操作代码如下：

@RequestMapping("/user/getUsers") public Result getUsers(){ Result result=null; List<User> list =userService.getUsers(); result = ResultUtils.success(list); result.setCode(0); result.setMsg("查询成功"); return result; }

调用之前编写好的getUsers()接口返回全部的用户信息。

增加用户

增加用户，我则是用弹窗的方式去进行用户信息的编写： 上传图片功能还未完善，后续会继续编写，跳转到这个页面则是通过屏幕中间的添加完成的，也是通过控制器进行跳转，return一个mv，具体代码不在展示。 对于添加的功能，则是通过Ajax的异步传输，将数据传输至后台，在使用已经封装好的接口进行数据库的存储。 Ajax代码如下：

<script> layui.use(['form','layer','upload'], function(){ $ = layui.jquery; var form = layui.form ,layer = layui.layer ,upload=layui.upload; //自定义验证规则 form.verify({ uname: function(value){ if(value.length < 5){ return '昵称至少得5个字符啊'; } } ,upass: [/(.+){6,12}$/, '密码必须6到12位'] ,repass: function(value){ if($('#L_upass').val()!=$('#L_repass').val()){ return '两次密码不一致'; } } }); //监听提交 form.on('submit(add)', function(data){ console.log(data); //发异步，把数据提交给php $.ajax({ url:"/user/add", dataType:"json", data:data.field, success:function (data) { if(data.code == 0) { layer.alert("增加成功", {icon: 6}, function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(index); window.location.href="javascript:location.replace(location.href);" }); }else{ layer.alert("添加失败") } } }); return false; }); }); </script>

如果对于数据的判定没有太多要求，可以修改自定义规则。这里是将data.field传至自己的Url，进行操作，具体控制器代码如下：

@RequestMapping("/user/add") public Result add(User user){ System.out.println("添加数据:"+user); userService.addUser(user); Result result =null; result = ResultUtils.success(user); result.setCode(0); result.setMsg("添加成功"); return result; }

删除操作

删除操作则是直接在user_list中利用Ajax的异步传输直接完成，原理同增加差不多，也是将data.field传至控制器，利用写好的接口进行删除。

$.ajax({ url:"/user/del", type:"POST", dataType:"json", data: {"id":data.id,"uname":data.uname,"upass":data.upass}, success:function (data) { if(data.code == 0) { layer.msg("删除成功", {icon: 6}, function () { }); }else{ layer.alert("删除失败") } } }); window.location.href="javascript:location.replace(location.href);"

控制器代码：

@RequestMapping("/user/del") public Result del(User user){ System.out.println("删除数据:"+user); userService.delUser(user); Result result =null; result = ResultUtils.success(user); result.setCode(0); result.setMsg("删除成功"); return result; }

修改操作

修改操作则是进入一个新的页面进行操作，我这里完成的是根据id进行修改，所以我需要将id传到下一个页面，运用了location.href进行跳转

location.href='/user/toEdit?id='+data.id+'&uname='+data.uname+'&upass='+data.upass

在控制器中则通过model中的addAttribute接口将数据进行传输

@RequestMapping("/user/toEdit") public ModelAndView toEdit(User user,Model model){ model.addAttribute("userId",user.getId()); System.out.println(user); ModelAndView mv = new ModelAndView(); mv.setViewName("user_edit"); return mv; }

在user_edit页面中，我则是通过thymeleaf模板引擎进行接收数据

<input type="hidden" th:value="${userId}" id="L_id" name="id" required="" lay-verify="id" autocomplete="off" class="layui-input">

接收到id后，后续操作就跟增加用户一样，只不过控制器调用的接口稍微改一下：

@RequestMapping("/user/edit") public Result edit(User user){ System.out.println("修改数据:"+user); userService.editUser(user); Result result =null; result = ResultUtils.success(user); result.setCode(0); result.setMsg("修改成功"); return result; }