• 欢迎访问废江网站,承蒙遇见 QQ群
  • 本站将致力于推送优质的java知识以及算法,开源代码!

实习笔记:java页面的增删改查,分页,模糊查询

个人日常 站点默认 2周前 (11-19) 121次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

实习笔记

这是实习水了好几天来第一次被安排的任务,写一个个人用户中心模块的增删改查,我大概花了三天写完,离谱。。这里做一些笔记吧。

首先公司项目的技术是,springboot,前端用的springboot的内置模板Freemarker,但不是jsp页面,全是html和ftl页面,前后端交互的数据通过ajax请求来交互,前端ui用的layui框架

后端的话使用的是原生的jdbc对应的springtemplate来进行增删改查,分别controller,service,dao三层,并且将接口省去了,确实方便很多。。。。

我的任务就是对一个页面进行增删改查,如下图:

layui的官方网站

layui的cdn引入模板

因为在一个页面中,有子页面,因此前端有两个页面,一个主页面person,一个提交页面personSub

整体页面逻

主页面person的js逻辑

子页面personSub页面的js逻辑

下面演示一个功能的全部代码

前面已经知道了,逻辑代码中,使用layui.use方面进行页面刷新,用户进入页面后,处于观看状态,这时为用户准备了很多按钮,每一个按钮都绑定一个事件,这里介绍一两个功能。

新增一条数据

主页面绑定的按钮新增事件

通过绑定id为insertBtn的按钮点击事件,然后利用layui框架的open函数打开一个页面内置窗口(为什么要这么做?因为你新增,你得新增数据啊,当然数据就填写在这个新增的窗口中)

新开窗口的页面逻辑

可以看到,这里没有页面加载函数,事实上,也不需要,通过前面首页传来的参数flag,分别调用新增,修改,查看函数。并且,绑定了两个按钮。下面看下这个新增的详细代码

你可能会好奇,为什么新增有两端代码(下面一段),前面一段是什么?其实,是加载下拉框。这里我不能再访问那个页面路径了,因此选个效果图看看:

$.each(data, function(index, value)则是一个jq中的遍历函数,将其渲染到下拉框中,通过css中的id选择,选择到下拉框

此时,用户再次处于查看状态,再写前端逻辑时,一定要注意到用户的状态!下面我把这种状态称为停滞状态,方便记忆。停滞状态的用户需要通过点击等事件来响应操作,这时就能想到了这个页面只有两个绑定事件,一个提交按钮,一个关闭按钮,因此,新增就在提交按钮里!但是提交按钮,不都是让你新增的,还有修改,因此需要一个flag判断,还记得首页我们请求发送到这个页面带了一个参数flag=add吗?

这里有个业务需求就是不能新增重复的名称,因此再新增之前,进行了一次查询,这个先不看了,可以看到新增直接发送请求来到了/perCenterApi/addGrzxMk这里,接下来看下controller代码之前,看下提交的参数datas,这个参数datas在前面的代码中声明是这样的

因为,datas的类型是object,并且是一个类似。而这里用到了FormData函数,需要传入一个表单对象,会将表单中的值全部映射到datas,并且postajax提交时,注明一下postajaxForm,

后端controller层代码

这里用到了springmvc的知识点:

为什么提交的url来到了controller对应的这个addGrzxMk这里?

这里是可以说是springmvc的原理,其实老大哥tomcat本来也有这个原理,不就是servlet吗?通过注解配置WebServlet(“/hello”)实现,至于这些:

  • tomcat中如何实现url输入路径,配置注解@WebServlet就找到对应的servlet方法?
  • 那为什么现在改了@requestmapping注解,或者说为什么要用springmvc?springmvc的底层原理路由是怎么样的
  • spring在当中是扮演了怎么样的角色,和tomcat的关系,和springmvc的关系?

这里开一个新文章来说说这些问题

spring,tomcat,springmvc之间的关系

那么继续,既然获得了ajax请求过来的数据,那么就好办, 新增嘛,肯定是声明一个新增的这个类对象来封装这些数据。代码中该对象变量是garzaXmas。这里为什么不是用对象来接收?很简单,因为前端传来的值并不是这个对象的所有字段都包含了。另外一点就是,如果是查询,删除,修改这些需求的话,是根据id或者名称来的,那么函数之间传参直接用一个string类型的字符串可以吗?可以,但不建议,因为习惯都是通过对象在逻辑之间传递,并且后续你查询,如果是加where条件呢?你又得改代码,加参数。

下面来看下service层的代码吧

没啥好说的

下面是dao层的代码

这里也没啥好说的,唯一点就是使用了DefaultLobHandler这个类,来实现插入一些BLOB(二进制大型对象)和 CLOB(字符大型对象)数据,参考链接:

https://www.cnblogs.com/dalianpai/p/13725105.html

至此,插入功能就结束了,其他删改查的功能我不会重复写,但这里列出一些需要注意的细节

查删改中的细节

既然新增不能插入重复的数据,那么修改也需要先进行一次判断吗?不用,可以直接将下面列表进行固定,锁住。

input文本框渲染值和下拉框如何渲染值

这里是查看ajax请求返回的数据并渲染到前端的代码,至于前面的下拉框锁住就是最后一句代码: $(‘input,textarea,select’).attr(‘disabled’, ‘disabled’);不过这里是全部锁住了,因为是查看嘛。

最顶层的查询和重置

这个模块涉及的知识点是;分页和模糊查询

实现的代码简单,关键还是之前写了刷新页面列表的函数getList,这个函数的查询可不是返回一个对象或者对象列表,而是返回一个页面对象。对的也就是分页功能。这里用到了layui的分页助手。下面看下这个函数吧

前端代码

controller层代码

从controller可以看到,查询数据库需要的参数是pageSize,pageNo。如果没有模糊查询的话是不需要moudleName这个参数的,id参数多余的别用看。事实上也正是如此,分页查询使用limit正是需要pageSize和pageNo,模块名称则是用来where,看下面sql:

总结

到此,这个小页面的增删改查笔记就写完了。如果文章有不对的地方,欢迎大佬们评论留言指出!


废江博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:实习笔记:java页面的增删改查,分页,模糊查询
喜欢 (3)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址