UserList.vue组件中用钩子函数初始化第一页的分页数据

最新推荐文章于 2024-04-21 16:36:27 发布
最新推荐文章于 2024-04-21 16:36:27 发布
阅读量597 收藏
点赞数
分类专栏： 基于SpringBoot+Vue的健身会员管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45950109/article/details/116379083
版权
本文介绍了如何在UserList.vue组件中使用created钩子函数来初始化并加载第一页的分页数据。通过调用getUserList方法从SpringBoot后端获取数据，将结果显示在表格中，同时详细展示了后端控制器、动态代理接口UserDao和相关XML映射文件的实现细节。
摘要由CSDN通过智能技术生成

文章目录

UserList.vue组件中用钩子函数初始化第一页的分页数据

需求

初始状态，会利用钩子函数，查询第一页的分页数据，然后显示在UserList.vue组件的表格中。如下图：

在这里插入图片描述

created钩子函数的代码

在这里插入图片描述

getUserList方法

getUserList方法，用来为userList和total数据赋值，如下图：

在这里插入图片描述

UserList.vue组件中的分页数据

如下图：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Mr-X～
关注
专栏目录
订阅专栏
vue中@change为什么要绑定一个回调函数_连肝3个晚上，我总结了一份Vue实操绝密干货！（共34条）
weixin_39933356的博客
11-19 956
这是我学习整理的关于 Vue.js 系列文章的第一篇，另外还有两篇分别是关于优化和原理的。希望读完这3篇文章，你能对 Vue 有个更深入的认识。7种组件通信方式随你选组件通信是 Vue 的核心知识，掌握这几个知识点，面试开发一点问题都没有。props/@on+$emit用于实现父子组件间通信。通过 props 可以把父组件的消息传递给子组件：// parent.vue 这样一来 this....
Vue的生命周期和钩子函数（一）——数据初始化
秋水惊鸿的博客
01-19 4670
前言 了解Vue的生命周期和渲染原理，有助于我们深层次的理解钩子函数的作用和调用场景，同时理解当数据发生变化之后，Vue内部做了哪些事情来响应。如果有误，请及时评论，方便完善。码字不易，请尊重版权。本片文章是基于Vue2.X写的，Vue3.0可能对渲及响应做了优化，在此暂不做讨论。 Vue的创建过程 ...
vue.js分页中单击页码更换页面内容(配合spring springmvc)
Islandww的博客
04-27 2892
html代码： {{item.releasetime.substring(0,19)}} {{item.title}} {{item.author}} {{item.remark}} 阅读全文 浏览量 : {{item.reading}} {{page}} {{page}}
vue分页器组件，可设置初始当前页
虚无缥缈
11-02 628
使用vue编写的分页器组件，支持输入页码跳转，效果如果： ** 组件调用： ** //html调用 参数:pageSize(总页数);pageNo(当前页) <pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager> //组件引入 import pager from '../../component/pager/pager.vue' //组件调用声明 components:{ pager} //参
vue生命周期（一）
XU1157896096的博客
09-09 137
Vue生命周期 1，什么叫做生命周期？ 一个组件从创建到销毁的过程叫做生命周期。 2，生命周期 beforecreate 创建前 当前生命周期主要做初始化作用，可以在当前生命周期组一个loading。 created ...
Vue 分页组件化
haeasringnar的博客
05-25 368
组件代码 <template> <div :class="{'hidden':hidden}" > <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layo...
笔记整理——Vue2项目尚品汇
Thaley的博客
01-01 2089
笔记整理——Vue2项目尚品汇
Vue3.0项目---蜘蛛电影（解析）
weixin_43842821的博客
04-09 840
项目简介 蜘蛛电影主要是仿猫...
2023前端面试
FrontEndEngineer的博客
02-08 1571
obj对象想要获取name或者say，首先判断自己的属性当中有没有，如果没有找到，那么就在__proto__属性中去找，而这个时候__proto__与Person的prototype是相等的，也就是__proto__指向Person，那么便可以找到name和say。为了处理异步，当触发事件的时候，会通过dispatch来访问action中的方法，actions中的commit会触发mutation中的方法从而修改state里的值，通过getter把数据更新到视图中。这些都是计算属性无法做到的。
vue的生命周期钩子函数
weixin_43755104的博客
08-06 607
文章目录DOM操作数据修改beforeCreatecreatedbeforeMountmountedbeforeUpdateupdated钩子函数的应用 vue的生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 DOM操作 mounted 数据修改 beforeMount created mounted beforeCreate
vue基础学习总结---用户列表案例
厚积薄发.
08-23 821
这篇文章介绍 vue学习总结案例：用户列表案例。本文详细记录了所有步骤，拿来学习是真不错！用到的知识点：vue-cli 创建 vue2 项目；element ui 组件库；axios 拦截器；proxy 跨域接口代理；vuer-router 路由；看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！
vue3【自定义hook】
CC酱写前端的博客
06-20 428
vue3 hook
Vue3一行代码写完列表请求和分页状态控制？增加你摸鱼时间以及准点下班的技巧
wz9608的博客
12-05 728
写过小程序或者h5等移动端的都知道，请求后台列表接口都会有分页小声比比:你服务器压力小了，我特么代码量增加了，每个页面都需要去定义当前列表的状态（是否有下一页），当前列表是第几页，还需要累增，以及列表的每页请求多少条！我就是一个臭敲代码的啊，我只想早点下班！！特别是一个页面请求好几个列表的写这些重复代码很烦的好不好那么如何只用一行代码复用这些重复的参数？？我们可以用hooks来解决hooks是在react16.8.0新增的特性，碰巧那时我也正在写react，写过react的都知道，那时候主流是类组件，hoo
自定义hooks快速写一个列表界面usePageList
呐呐呐
04-20 678
列表页，表格列表页，后台列表，自定义hooks
vue中的生命周期钩子
m0_50665842的博客
11-28 746
vue生命周期钩子
vue的生命周期（钩子函数）
Xyt1737的博客
10-08 166
1.定义：从vue实例创建到虚拟dom产生再到数据绑定监听数据渲染以及销毁的整个过程 2.生命周期的第一步首先是创建vue实例，并且进行初始化。 (1)vue实例初始化阶段 beforeCreate 在初始化的时候调用了beforeCreate，完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能访问数据模型中的data和methods中的方法。 created 在初始化完毕之后，完成vue的数据注入以及数据监听操作，该构造的执行意味着vue实例创建完毕，可...
jeecgboot-Vue3 table 修改按时间排序
Kimiting的博客
07-09 1457
在使用Jeecgboot-Vue3生成前后端代码的时候，数据库如果没有create_time字段，会报错以下错误。 解决方法：修改前端vue3项目下的src/hooks/system/useListPage.ts 的文件。
vue3 依赖-组件tablepage-vue3版本1.0.2更新内容
最新发布
默的博客
04-21 577
本组件是基于element-UI进行快速搭建搜索列表页的依赖，主干思路为：将异步接口声明到组件的tableApi属性，并将搜索项通过searchConfig声明给组件，将搜索、重置、分页的逻辑均交给组件内部去处理，达到最简化的代码实现，对于标准搜索列表页能够进行快速开发。
深入探讨Vue.js：组件化与数据绑定解析
Vue.js是一个备受开发者欢迎的前端框架，以其轻量级、高效的数据绑定和强大的组件化能力而著名。Vue.js的出现，源于其创始人在2014年对Angular.js的使用体验，他认为Angular的API过于复杂，于是着手创建了一个更简洁...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr-X～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值