前言
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有了更深刻的认识。
最后,码字不易,如果觉得对你有帮助的话请点个赞吧,关注我,一起学习,一起进步!