本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客

仅用于学习和讨论，如有侵权请联系

源码：https://gitee.com/green_vegetables/x-admin-project.git
素材：https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码：up4c
项目概述笔记：https://blog.csdn.net/m0_37613503/article/details/128961102
数据库笔记：https://blog.csdn.net/m0_37613503/article/details/128961401
前端笔记：https://blog.csdn.net/m0_37613503/article/details/128961447
后端笔记：https://blog.csdn.net/m0_37613503/article/details/128961569

1、因为是分页所以我们需要两个参数：pagesize和pageNum

1.1

2 后端直接干，找到userController,我们查询请求就是getter请求

 2.1

3 登录接口用post不安全

3.1 增删改查，新增post,修改用post，删除delete，这里返回的数据时Map集合

 3.2 我们现在要这两个参数，除了这两个还有pageNum和pageSize,这里用注解直接获取参数

 3.3 如果要求参数不是100%要求输入的，就用required=false

3.4  再添加一个分页参数

3.5 再加一个一页显示多少条的参数

 3.6 你要查询第几页，你得传入第几页，同时还有一个条件构造器

 3.7 我们需要传入一个条件构造器，我们就写入一个条件构造器，把我们条件给拼接进来

 

 3.8 泛型改成user，这样字段就不会写错

4 我们要出入的username

4.1

5、这里可能传入一个用户条件，有可能是一个空值

5.1

6 点击eq方法，他做了重载， condition只要满足这个条件，我就会拼接。

6.1用户名直接为空，我就可以在这里做直接判断

 6.2 判断用户不为空，不为“”的空

 6.3  判断代码长度是否为零

 6.4 上面的变量差不多，因此复制粘贴，我们复制的前提是我们熟悉的代码，而不是我们不熟悉的代码

 6.5 分页，我们需要new一个page对象

 6.6 这个page方法是什么，是IPage的子类

 6.7 你可以看一下IPage,点这个

 6.8 这里的泛型写user

 6.9这里的构造方法是要传入参数的

6.10 这里出问题是导入的是spring中的page，导错了

 6.11 我要的是苞米豆中的page

 6.12 第一个是当前页，其他是每页显示多少条

 6.13 回到控制器中，这就是我们页面传入的参数,pageNo,pageSize

 6.14 传入我们分页和条件

6.15 我们想要的数据时Mapper类型的数据

封装一个数据

 6.16 返回给前端需要一个总积累数，total

 6.17 拿回前端返回的结果集

 6.18 把数据给他返回过去

7、重新部署一下

7.1

8、这里爆出一个错误，刚才的接口写错了，这里我们应写查询

8.1

9、等一会查询的时候，我们用“/List作为查询路径”

 9.1 重启测试一下

 10 用postman测试一下：GET请求，路径为List 

10.1 我想查第一页，每页10条，带两个参数

  

11、total 是我们的总积累数，如果我们想要total必须做一个count查询

 

11.1

12、写了分页的方法没有生效的原因是你必须写一个分页的拦截器配置 

12.1

13 百度搜索MyBatis-Plus,点击分页插件

13.1 你需要配置这个分页拦截器，他才能生效

 

14、他告诉你了，spring怎么配，只要把类写上就行

 

14.1

15、找到config，写一个类

 

 

15.1

16 写一个注解

 

16.1

17 把内容复制过来

17.1

18 导一下类

 

18.1

19 把数据库给改一下

19.1

20 分页拦截器设置成功过

 

20.1

##

21、现在total出来了6

 

21.1

22 用户列表查询对接后端，我们想要对接后端，先找到API文件，这个文件就是对接后端的专用文件

22.1

23 他每个方法对应一个接口

24 一般我们一个功能模块，一个新建点，我给他建一个文件

 

24.1

25 建一个userManage.js文件 

25.1

26 这一行代码保留去引用request

 

26.1

27 导出，export default ,这样我们可以把多个方法，全部写到这里面来

27.1

28 在这里面定义方法：写一个getUserList()查询方法

 

28.1

29 return一个request对象,request就是上面定义的

29.1

30 我们的路径是什么，请求方式是什么

30.1

31、你查询的时候，要把参数写上，get传不了json

 

31.1

32 我想传入的参数，parms中的pageNUM,属性值那，

32.1

33 属性值

 

33.1

34 如果后面我再想写别的方法，我就写，然后写别的方法就行

 

34.1

35最终写成这样就行

 

35.1

36 我们想在这个页面中调用方法，提交给后台 

36.1

37 现在method中写一个查询，做一下用户的查询

 

37.1

38 这个方法名要跟上面的相同，但是不是同一个方法

 

38.1

39、我想使用这个方法，我得先导入他，@代表Src目录后

 

39.1

40.then调完之后的回调方法

 

40.1

41、这里面要传入参数

 

41.1

42 then是回调，我们查询成功之后，要做什么事情，我们要把数据给他塞进来

 

42.1

43 这里我要写一个形参名字，我习惯写response,响应对象，后台返回我的响应数据

43.1 这是我们的数据

44 里面有个data属性，下面有个rows

 

44.1

45 这样我们定义了一个方法做这个查询，但这个方法不调用是不执行的

45.1

46 我们希望页面一进入就默认去查这里的第一页数据

 

46.1

47 我们需要构造函数，在这个构造函数去查默认函数,与,method平级，这个调他，那个调他

 

47.1

48 那个js实际是封装了一个xshell，发给了后台，做了一个异步调用

 

48.1

49 数据已经出来了

49.1

50 因为我们是复制的，属性名就出来了，这里写错了

 

50.1

51、改成email

 

51.1

52 现在点击查询不管用，我们应该怎么办 24-9分09

 

52.1

53 绑定一个查询事件 

53.1

54 查一下admin

54.1

55 这里出现了一个问题，我点击下面的查询按钮，除了6条数据，而本应该是出现5条数据

 

55.1

56 这里数据产生变化的时候，你应该要刷新数据

56.1

57 刷新对应的方法都是空的

 

57.1

58 这个方法，只要pageSize发生改变就能够把pageSize最新的数值给传过来

 

58.1

59 传入之后，我们就可以对他的数值做一下更新

 

59.1

60 数据点完之后，我们再重新查询

 

60.1

61、Current也就是pageNum 

61.1

62 他必须拿到pageNum，拿到之后，我们再做一下更新

 

62.1

63 数据没问题，但是这里的数据时6，序号出现了问题，这里如何解决，这里的序号你得自己计算

63.1

64、我们这里用的是type=index