快捷搜索:  汽车  科技

java商品管理系统代码(商品品牌业务之后台Java代码的编写)

java商品管理系统代码(商品品牌业务之后台Java代码的编写)但是昨天写的代码很难看出来是使用的axios,因为其有配置让其使用更简单了。因此可以用.then() 来接收成功时回调,.catch()完成失败时回调,也就是我们昨天的代码编写。Vue官方推荐的ajax请求框架叫做:axiosaxios支持Http的所有7种请求方式,并且有对应的方法如:Get、POST与其对应。另外这些方法最终返回的是一个Promise,对异步调用进行封装。

今天是刘小爱自学Java的第146天。

感谢你的观看,谢谢你。

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(1)

学习计划安排如下:

  • 昨天实现了前端页面的编写以及发送请求,今天关于异步请求工具axios的简单说明。
  • 关于商品品牌,后台代码的完整编写。
  • 两个重要知识点:分页助手插件的使用,通用mapper高阶查询的使用。
一、异步请求工具axios

我们以前使用的是jQuery发送ajax请求,但是在Vue中还要引入jQuery不太方便。

Vue官方推荐的ajax请求框架叫做:axios

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(2)

axios支持Http的所有7种请求方式,并且有对应的方法如:Get、POST与其对应。

另外这些方法最终返回的是一个Promise,对异步调用进行封装。

因此可以用.then() 来接收成功时回调,.catch()完成失败时回调,也就是我们昨天的代码编写。

但是昨天写的代码很难看出来是使用的axios,因为其有配置让其使用更简单了。

axios的配置

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(3)

①使用axios发送请求

prototyte,原型的意思,有什么作用呢?

就相当于给Vue这个类增加了一个$http方法,对应的就是axios,昨天发送请求时使用的this.$http其实就相当于这里的axios。

本来呢如果要使用axios,需要先引入axios,再使用axios调用get方法即可发送get请求。

做了该配置后,就不用引入axios库了,直接调用vue的$http方法即可。

②基础请求路径

直接引用config.js文件中的url即可,也就是网关对应的域名 路由,最先开始就说明过。

二、后台代码编写

个人的编写代码思路:

首先确定对应实体类,其次确定请求参数、请求路径和返回值,最后Java三层代码编写。

1实体类和数据表

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(4)

数据库中对应的数据表为tb_brand,编写实体类Brand和其一一对应。

2返回值数据

编写一个分页数据实体类,在其它业务中若是需要分页数据也可以使用这个类。

所以将其存放到lxa-common微服务中,其它微服务要用这个直接引用即可。

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(5)

分页数据包括了:分页总条数,总页数以及当前页数据数。

这个items也就是我们通过数据库查询到的Brand集合。

3Controller层

该层接受请求和响应处理后的数据,其最重要的也就是请求路径和请求参数。

通过浏览器F12可以查看到发送的请求路径以及请求参数。

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(6)

①关于请求路径

注解@RequestMapping和@GetMapping确定其请求路径,当然全路径中还包括网关对应的域名以及配置的路由。

②关于请求参数

一共有5个参数,逐一说明:

  • page:当前页码数,默认设定为第1页。
  • rows:每页展示多少行数据?默认设定为5行。
  • sortBy:根据什么参数排序,上图中就是根据id排序,该参数可以没有。
  • key:这个是前端页面搜索框中输入的数据,根据key模糊查询。
  • desc:排序规则,如果是true,降序排序;如果是false,升序排序。

defaultValue设定默认值,required=false表示该参数可以没有,如果不写的话默认为true,必须要有该参数才行。

4Service层和Mapper层

因为是单表查询,所以使用通用mapper插件即可,mapper层代码超简单就不说明了。

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(7)

①分页助手的使用

PageHelper是Mybatis的一个分页插件,其使用起来非常的方便。

调用startPage()方法开启分页助手的使用,参数为当前页码数和每页的行数。

在⑤中创建一个PageInfo对象,其和分页相关的数据都可以用对应的get方法获取。

②根据key值模糊查询

我们在搜索框中输入的数据为key:

  • key值要么是品牌名name包含的值。
  • key值要么就是品牌首字母letter。

③排序

关于通用mapper的使用,第132天有说明。

用一个三元表达式来说明是升序还是降序,一定要注意要留有空格,具体看图中说明。

④查询结果

如果查询结果为空,自定义一个异常报错,关于自定义异常后续专门写一篇文章额外说明,emm……具体看情况吧。

三、前端页面接受请求

通过浏览器F12查看响应到的数据。

1响应数据渲染

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(8)

因为我们在前端代码中打印了响应的数据,也就是consol.log(resp)这段代码。

在浏览器中可以查看到具体的响应数据。

我们可以发现,数据主要存储在data中:

  • items即为响应的每行数据,因为设置的rows值为5,所以这里items大小也就是为5。
  • total即总记录数,数据库中一共查到了164条品牌数据。
  • totalPage即总页数,因为我们这里没有编写对应的业务,所以为null。

将响应的数据赋值给前端vue中对应的值即可,其中关于loading再次做一个说明:

  • loading为true,前端页面中有一条不断加载的线来表示数据正在加载中。
  • loading为为false,不再显示那条线。

2做一个测试

在管理页面中,选择我的品牌管理,向服务器发送请求获取响应数据,并完成数据渲染:

java商品管理系统代码(商品品牌业务之后台Java代码的编写)(9)

页面加载后的结果就是如上图所示,这是我调到了第2页后的数据。

由于vue组件的使用,所以自行实现了分页功能,不用我们自己以前那样一一对应渲染了。

其中关于图片的业务还未处理,数据库中有的也没有图片数据,所以没有显示。

最后

行有不得反求诸己,我是刘小爱。

白天上班晚上学习,和Java同岁,不为其它,只为学会自律做好自己,也愿我的每日打卡能给你带来勇气,欢迎点赞关注和评论。

猜您喜欢: