抽奖系统(4)

1.完成活动中心前端代码,采用iframe将子页面内嵌到父页面里面去,已经写好了可以自己阅读一下,注意一下需要解决iframe的缓存问题(采用点击后加href后面加上时间戳参数来解决),不然有时候子页面数据修改了他不会显示新的数据,还有子页面有时候需要像父页面传递信息,比如在创建人员之后,跳转到人员列表页面,创建完新活动后,跳转到活动列表,这时候需要子页面像父页面传他要跳转的url,父页面也要监听子页面

2.注册页面前端补充,之前,我们已经完成了注册模块,而我们在管理员页面里面使用的子页面是与注册页面一致的,所以我们修改一下前端代码即可,我们注意使用当点击人员注册的时候,跳转子页面的url中添加两个参数,admin=false参数用于让register.html页面知道这个是普通用户注册,进而隐藏密码框,jumpList是用让其区分这个是在admin.html内嵌页面中,注册成功后要像admin.html发送相应的参数from和id(父页面已经写好了需要这两个参数)(在success部分添加),然后让父页面切换子页面

使用window.parent.postMessage({},''),一个参数是传的信息,第二个参数是发给哪个url,注意这里走的是本地内存,不是发http请求,然后父页面通过接收from和id去跳转到该from所指引的html和修改相应id的样式

3.获取人员列表展示(对应前端点击人员列表),后端部分时序图

注意我们这里接口虽然定义没有传参,我们在设计的时候给他传一个identity(null全查,admin查admin,normal查normal),方便后续可重复使用,在写的过程中可以使用lambda来进行List元素的类型转化,还有我们也可以将service的dto的identity设置为枚举类方便我们对类型的控制(我们这里将DTO定义多个属性,方便重复使用),还有注意phoneNumber我们的DO外面包装了一层,我们赋值给dto的时候要取里面的值

注意:我们这里identity的有可能传空所以service层要对传来的identity,进行判断是要进行什么样子的搜索select语句的话,使用这种写法加上if语句

前端页面的实现:将查到的数据添加,注意我们之前的拦截器,如果没有携带token或者解析失败的话,会与controller层连接失败,此时走的是error的代码我们要将让父页面跳转到登录页面(我们这个是子页面)使用

4.实现图片上传(为奖品模块的创建奖品接口服务的)

这个功能主要是用于奖品创建的时候添加图片的时候使用,创建一个picture的service接口以及其实现类,里面只有一个方法用于接收前端传来的图片文件,并且将他保存到服务端本地存储目录中,这里我们有几个事情需要知道,我们这里使用MultipartFile来接收前端传来的对象,然后1.创建目录(mkdirs方法,没有目录创建,有目录直接用本地目录建议写在配置文件中,然后从配置文件中去读取) 2.创建索引(这里索引是方便后续查找的时候用于定位图片文件,使用uuid+文件后缀的方式来实现,这里其实就是重命名确保唯一性)3.图片保存到本地存储中(使用transferTo,这个方法会抛异常,捕获后就是文件保存失败,就是上传失败了,所以抛一个自定义service层异常),4.返回索引

我们这个模块实现对于前端传过来的图片进行接收并且保存,返回了一个索引,所以后续我们需要访问这些图片,我们可以将保存文件的目录也作为该项目的静态资源来访问,1.本地目录,2.该项目的静态资源(static目录,后面是我们自己添加的)

注意因为,静态资源模块不仅是web需要用,前端后面也需要调用后端的静态资源来加载奖品图片,所以我们这里要将存储奖品图片的目录设置为静态资源且,在拦截器中排除掉/*.jpg,(/*.png等等)。我们一般都会在拦截器中排除掉静态资源,因为不仅是web也有可能前端需要访问

奖品模块

5.实现创建奖品接口

注意这里使用的是表单提交的方式

这里已经不涉及usercontroller,我们这里对应前端创建一个PrizeController,以及对应的prizeSerice接口以及其实现类,这里需要注意一点就是,前端传来两个参数且是表单传来的,对于表单发来的数据,正常数据变量名对应,对象名对应(其属性也对应)可以不用加注解@RequestPart,但是对于传来的文件是必须要加的

定义controller层,定义好接收参数对象(我们这里价格使用类型BigDecimal,因为他有小数的部分且在数据库中类型是decimal,它对应的java层面就是BigDecimal,属性加一些校验(如奖品名字不能为空),价格不能为空,对于string用notblank,对于其他如decimal用notnoll),先打印一下入参的日志,注意对象记得调用我们的序列化工具后打印,然后直接调用我们service层方法,返回其id

定义service接口以及实现类,这里我们只要做两件事情,1.保存图片到本地(调用我们之间写的图片保存功能的方法即可)2.将奖品的其他信息以及图片的索引写入数据库表中,由于我们这里涉及到了新的数据库图表,所以我们需要创建新的DO(对应数据库中的表类),我们开发一般使用一表一mapper,所以mapper层也要创建一个prize的mapper,建DO注意price类型是bigdecimal以及他继承一下base类(里面有id,创建时间,更新时间),我们这里service层调用mapper层时候我们这里直接使用DO传给mapper层来插入,注意我们这里需要给前端返回id,但是我们sql返回的是影响的行数,所以我们这里可以让mapper他插入之后将id写回给DO的id只需要加上option注解

第一个id是传入参数的属性id,第二个id是数据库中对应的id,然后service直接返回DO的id即可,这里我们service层的代码就完成了,我们可以使用postman测试一下注意(我们前面加了拦截器,要么我们这里带上token,要么我们这里给拦截器排除路径先加上这个接口),但是还是有可能会失败,

注意当表单和文件一起提交的时候需要加上RequestPart不然他会识别不到表单(表单是一定要加的),加了我们还会发现可能还是不行,这可能是前端传来表单和文件一起的时候有可能序列化有问题​​​​​​​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​说我们第一个参数传递有问题,这里如果有问题是在于param表单数据的序列化上面(是因为表单数据和文件一起传过来导致的),添加一个convert类(已经写好了直接用)即可解决

前端页面实现:我们这里使用表单提交,创建使用表单对象然后但点击提交的时候,往表单里面添加数据,(文件的话当我们点击上传的时候,调用方法将文件添加到表单里面),然后调用ajax请求后端,记得我们的拦截器所以要带上token,因为 contentype(设置为false),也可以设置让他不要处理我们发送的数据因为我们已经处理好了,注意一点前端传给后端的变量名要一致不然后端接收不到

6.实现获取奖品(分页)

这里文明要实现翻页的功能所以我们接收前端的参数的时候定义一个对象来接收前端传来的当前页面和每一页的条数 currentPage和PageSize,这两个参数用来我们后面设置返回偏移量 offset=(currentPage-1)*PageSize 和条数(PageSize),我们可以直接在PageParam这个对象里面写一个getOffset,后续比较方便使用,我们这里构建controller层返回给前端的对象的时候使用了一个静态内部类

service层:我们要1.查询总数 2.以及查询当前页的列表

这里我们在service层创建一个PagaListDTO<T>泛型只要是与分页有关的查询列表的话我们都可以重复使用这个对象不止是查询奖品列表,其实前面的人员也可以用这个,后面的活动列表也可以用这个,mapper层查完后的列表转换成dto,dto到达controller层再通过lambda表达式转换成controller层需要返回给前端的对象即可,这样子设计是为了重复使用

前端的实现:前端大部分功能已经完成了我们只需要阅读一下啊,写一下ajax的部分即可,可以阅读一下他的翻页的模块的写法通过我们传回前端的total来判断总页数,下一页跳转的时候,可以判断是否到达最后一页,已经点击尾页跳转到最后一页,然后通过我们的records来插入该页的信息,这里是通过点击各个按钮以及输入框回车来触发ajax请求向后端传currentPage以及pageSize

相关推荐
计算机毕设VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue宠物医院管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
想做后端的小C3 小时前
Java:接口回调
java·开发语言·接口回调
爱学习的小可爱卢3 小时前
JavaEE进阶——Spring核心设计模式深度剖析
java·spring·设计模式
毕设源码-钟学长3 小时前
【开题答辩全过程】以 个性化电影推荐网站的设计与实现为例,包含答辩的问题和答案
java·spring boot
C++业余爱好者3 小时前
Power Job 快速搭建 及通信机制介绍
java
用户6135411460164 小时前
Tomcat Connectors 1.2.32 源码编译安装教程(含 mod_jk 配置步骤)
tomcat
qq_2704900964 小时前
SpringBoot药品管理系统设计实现
java·spring boot·后端
、BeYourself4 小时前
SpringAI-ChatClient Fluent API 详解
java·后端·springai
星辰_mya5 小时前
reids哨兵集群与选主
java·开发语言