【vue3】分页功能实现(nodejs)

devtools/2024/10/19 7:37:10/

分页查询
前端中分页查询的出现是为了让有一定数据量的页面能够更合理的展示出来,同时结合Element Ui提供的分页组件,能够对前端展示的数据做更多的操作。

前端代码

<el-pagination background layout="total, prev, pager, next" :total="total" v-model:page-size="pageSize"@current-change="handelpage(currentPage)" v-model:current-page="currentPage" style="margin-top: 40px;float: right;" />
// 获取文章列表数据let tableData = reactive([])let currentPage = ref(1)let pageSize = ref()const total = ref()console.log(currentPage)async function getArt() {try {const response = await getArticles(currentPage.value); // 假设 getArticles() 返回一个 Promise  console.log(response);// 更新 tableData 数组的内容,而不是替换它的引用  total.value = response.data.totaltableData.splice(0, tableData.length, ...response.data.data);} catch (error) {console.error('获取文章列表失败:', error);}}const handelpage = () => {console.log(currentPage.value);getArt()}

后端代码

//获取全部文章信息账单
router.get('/getArticle', (req, res, next) => {console.log(req.query)const page = parseInt(req.query.page) || 1;  // 分页数量,默认为1const size = parseInt(req.query.size) || 10;  // 分页大小,默认为10const skip = (page - 1) * size;// 首先查询总记录数  accountModel.countDocuments().then(totalCount => {  // 然后根据分页参数查询文章列表  accountModel.find()  .sort({ createTime: -1 })  .skip(skip)  .limit(size)  .then(data => {  res.json({  code: '20000',  msg: '找到了',  total: totalCount, // 使用正确的拼写和从数据库获取的总数  data: data  });  })  .catch(err => {  res.json({  code: '1002',  msg: '读取失败',  data: null  });  next(err); // 传递错误给错误处理中间件(如果有的话)  });  })  .catch(err => {  res.json({  code: '1001', // 可以为计数失败定义一个不同的错误代码  msg: '计数失败',  data: null  });  next(err); // 传递错误给错误处理中间件(如果有的话)  });  
})


http://www.ppmy.cn/devtools/125319.html

相关文章

杨中科 .netcore Linq 。一前期准备知识

为什么要学Linq 一、为什么要学LINQ? 让数据处理变得简单: 统计一个字符串中每个字母出现的频率(忽略大小写)&#xff0c;然后按照从高到低的顺序输出出现频率高于2次的单词和其出现的频率。 var itemss.Where(c >char.lsLetter(c))//过滤非字母 .Select(c>char.ToLo…

计算机网络 2024 11 10

计算机网络 - 知乎计算机网络&#xff08;四&#xff09;—— 网络层&#xff08;1、2&#xff09;&#xff1a;网络层概述、网络层提供的两种服务_以下属于网络层范畴的是a透明传输比特流b媒体接入控制c ip地址d-CSDN博客 湖科大教书匠的个人空间-湖科大教书匠个人主页-哔哩哔…

链表Set_LinkList(建立)

用单链保存集合元素&#xff0c;元素由键盘输入。输入以-1结束&#xff0c;将所建链表打印输出。 链表结构如下图所示&#xff1a; 提示&#xff1a; 1.链表中数据元素为整型&#xff0c;typedef int ElemType; 2.用结构体自定义链表结构Set_LinkList &#xff1b; 3.初始化链表…

【OceanBase诊断调优】—— 错误码 5065 和 5066 的区别

适用版本&#xff1a;V2.1.x、V2.2.x、V3.1.x、V3.2.x 5065 与 5066 是两个近似的报错。 OB_ERR_QUERY_INTERRUPTED(-5065): Message: Query execution was interrupted。 含义为执行中断, 例如终端执行 SQL 过程中按 ctrlc 终止 SQL 执行会报 -5065。 OB_ERR_SESSION_INTER…

蓝桥备战国奖题后总结(2)

一、压缩字符串 public static void main(String[] args) {Scanner scan new Scanner(System.in);String strscan.nextLine();char[] chstr.toCharArray();int flag1;int num0;for(int j0;j<ch.length-1;j){if(ch[j]ch[j1]){num1;}if(num0&&jch.length-2){System.…

Vue3实现面板分割

Vue3实现面板分割 下面是将你提供的 Vue 组件使用 SCSS&#xff0c;并以 Vue 3 的组合式 API 形式的面板分割代码。 1、建立组件相关的文件夹 2、将下面代码拷贝到index.vue中 <template><div class"g-split" ref"gSplit"><!-- 水平方向…

折叠翼弹射无人机产品技术详解

折叠翼无人飞行器系统采用储存、运输、发射一体化设计&#xff0c;飞行器平台可以折叠入筒&#xff0c;采用筒式气体弹射方式发射&#xff0c;其搭载可见光/红外双光载荷与战斗部&#xff0c;可以对敌方中大型坦克、装甲或防御工事进行打击。产品技术详解如下&#xff1a; 一、…

计算机挑战赛3

老式的计算机只能按照固定次序进行运算&#xff0c;华安大学就有这样一台老式计算机&#xff0c;计算模式为AB#C&#xff0c;和#为输入的运算符(可能是、-或*&#xff0c;运算符优先级与C一致)&#xff0c;现给出A&#xff0c;B&#xff0c;C的数值以及和#对应的运算符&#xf…