BootStrapTable 分页

---

前言

Bootstrap Table是一个可扩展的表格，可集成众多CSS框架，支持Bootstrap, Semantic UI, Bulma, Material Design, Foundation框架。

一、实验过程

①重构代码，使用BootStrapTable等插件进行分页（这里展示的学生表是已经做过一些操作的学生表）。

②从后台的RESTful风格代码中进行增、删、改的操作。要求支持前后端的表单验证。

C：创建（插入）
（eg.新增一名叫李四的学生）。
前端验证

增加学生李四

增加成功

R：查询（此处示例按姓名查找）
模糊查询

普通查询

D:删除（eg.删除李四）。

删除成功

U：更新（eg.更新学生abc的信息）

更新成功

完成CRUD操作后最终的学生表：

二、遇到的问题

①log怎样产生？

解决：添加注解@SLf4j。

②怎么才能通过增加学生信息？

解决：写一个add方法，@Valid 进行校验的时候，需要用 BindingResult 来做一个校验结果接收。当校验不通过的时候，如果手动不 return ，则并不会阻止程序的执行。

三、实验总结

1.使用bootstrap的时候，我们经常需要使用到表格，这时候通常又会设及到一些增删改查等功能，通常是以按钮的形式嵌入表格中，在column参数中，增加一列，title是操作里面定义了events:触发时的事件函数，formatter:添加按钮的函数。这里我们将编辑和删除功能以按钮的形式嵌入表格。

2.前端校验便于用户纠正（快速反馈），并且减少服务器压力、节省流量（减少无意义的请求），主要对用户友好。

后端验证可以防止接口被私自调用导致破坏数据库结构；避免有人模拟浏览器行为直接给服务器发请求。

3.通过本次实验，使用BootStrapTable进行分页，学会了从后台的RESTful风格代码中进行增、删、改、查的操作和前后端的表单验证，对BootStrapTable有了更深刻的认识。

最后，码字不易，如果觉得对你有帮助的话请点个赞吧，关注我，一起学习，一起进步！