今天是刘小爱自学Java的第146天。
感谢你的观看，谢谢你。
商品品牌业务之后台Java代码的编写-1.jpg (50.46 KB, 下载次数: 1)
2021-2-5 00:22 上传
学习计划安排如下：
昨天实现了前端页面的编写以及发送请求，今天关于异步请求工具axios的简单说明。关于商品品牌，后台代码的完整编写。两个重要知识点：分页助手插件的使用，通用mapper高阶查询的使用。一、异步请求工具axios
我们以前使用的是jQuery发送ajax请求，但是在Vue中还要引入jQuery不太方便。
Vue官方推荐的ajax请求框架叫做：axios
商品品牌业务之后台Java代码的编写-2.jpg (32.77 KB, 下载次数: 0)
2021-2-5 00:22 上传
axios支持Http的所有7种请求方式，并且有对应的方法如：Get、POST与其对应。
另外这些方法最终返回的是一个Promise，对异步调用进行封装。
因此可以用.then() 来接收成功时回调，.catch()完成失败时回调，也就是我们昨天的代码编写。
但是昨天写的代码很难看出来是使用的axios，因为其有配置让其使用更简单了。
axios的配置
商品品牌业务之后台Java代码的编写-3.jpg (71.57 KB, 下载次数: 0)
2021-2-5 00:22 上传
①使用axios发送请求
prototyte，原型的意思，有什么作用呢？
就相当于给Vue这个类增加了一个$http方法，对应的就是axios，昨天发送请求时使用的this.$http其实就相当于这里的axios。
本来呢如果要使用axios，需要先引入axios，再使用axios调用get方法即可发送get请求。
做了该配置后，就不用引入axios库了，直接调用vue的$http方法即可。
②基础请求路径
直接引用config.js文件中的url即可，也就是网关对应的域名+路由，最先开始就说明过。
二、后台代码编写
个人的编写代码思路：
首先确定对应实体类，其次确定请求参数、请求路径和返回值，最后Java三层代码编写。
1实体类和数据表
商品品牌业务之后台Java代码的编写-4.jpg (55.44 KB, 下载次数: 0)
2021-2-5 00:22 上传
数据库中对应的数据表为tb_brand，编写实体类Brand和其一一对应。
2返回值数据
编写一个分页数据实体类，在其它业务中若是需要分页数据也可以使用这个类。
所以将其存放到lxa-common微服务中，其它微服务要用这个直接引用即可。
商品品牌业务之后台Java代码的编写-5.jpg (43.93 KB, 下载次数: 0)
2021-2-5 00:22 上传
分页数据包括了：分页总条数，总页数以及当前页数据数。
这个items也就是我们通过数据库查询到的Brand集合。
3Controller层
该层接受请求和响应处理后的数据，其最重要的也就是请求路径和请求参数。
通过浏览器F12可以查看到发送的请求路径以及请求参数。
商品品牌业务之后台Java代码的编写-6.jpg (67.5 KB, 下载次数: 0)
2021-2-5 00:22 上传
①关于请求路径
注解@RequestMapping和@GetMapping确定其请求路径，当然全路径中还包括网关对应的域名以及配置的路由。
②关于请求参数
一共有5个参数，逐一说明：
page：当前页码数，默认设定为第1页。rows：每页展示多少行数据？默认设定为5行。sortBy：根据什么参数排序，上图中就是根据id排序，该参数可以没有。key：这个是前端页面搜索框中输入的数据，根据key模糊查询。desc：排序规则，如果是true，降序排序；如果是false，升序排序。defaultValue设定默认值，required=false表示该参数可以没有，如果不写的话默认为true，必须要有该参数才行。
4Service层和Mapper层
因为是单表查询，所以使用通用mapper插件即可，mapper层代码超简单就不说明了。
商品品牌业务之后台Java代码的编写-7.jpg (74.23 KB, 下载次数: 0)
2021-2-5 00:22 上传
①分页助手的使用
PageHelper是Mybatis的一个分页插件，其使用起来非常的方便。
调用startPage()方法开启分页助手的使用，参数为当前页码数和每页的行数。
在⑤中创建一个PageInfo对象，其和分页相关的数据都可以用对应的get方法获取。
②根据key值模糊查询
我们在搜索框中输入的数据为key：
key值要么是品牌名name包含的值。key值要么就是品牌首字母letter。③排序
关于通用mapper的使用，第132天有说明。
用一个三元表达式来说明是升序还是降序，一定要注意要留有空格，具体看图中说明。
④查询结果
如果查询结果为空，自定义一个异常报错，关于自定义异常后续专门写一篇文章额外说明，emm……具体看情况吧。
三、前端页面接受请求
通过浏览器F12查看响应到的数据。
1响应数据渲染
商品品牌业务之后台Java代码的编写-8.jpg (64.27 KB, 下载次数: 0)
2021-2-5 00:22 上传
因为我们在前端代码中打印了响应的数据，也就是consol.log(resp)这段代码。
在浏览器中可以查看到具体的响应数据。
我们可以发现，数据主要存储在data中：
items即为响应的每行数据，因为设置的rows值为5，所以这里items大小也就是为5。total即总记录数，数据库中一共查到了164条品牌数据。totalPage即总页数，因为我们这里没有编写对应的业务，所以为null。将响应的数据赋值给前端vue中对应的值即可，其中关于loading再次做一个说明：
loading为true，前端页面中有一条不断加载的线来表示数据正在加载中。loading为为false，不再显示那条线。2做一个测试
在管理页面中，选择我的品牌管理，向服务器发送请求获取响应数据，并完成数据渲染：
商品品牌业务之后台Java代码的编写-9.jpg (40.72 KB, 下载次数: 0)
2021-2-5 00:22 上传
页面加载后的结果就是如上图所示，这是我调到了第2页后的数据。
由于vue组件的使用，所以自行实现了分页功能，不用我们自己以前那样一一对应渲染了。
其中关于图片的业务还未处理，数据库中有的也没有图片数据，所以没有显示。
最后
行有不得反求诸己，我是刘小爱。
白天上班晚上学习，和Java同岁，不为其它，只为学会自律做好自己，也愿我的每日打卡能给你带来勇气，欢迎点赞关注和评论。
