当前位置: 首页 > news >正文

Node+Express写分页接口

后端逻辑

router.js文件

const express = require('express');
const router = express.Router();//导入函数处理,数据
const articleMessage = require('../router_handle/artcle')//文章列表
router.get('/list',articleMessage.articleList)module.exports = router;

router_handle.js

const db = require('../db/index')
//选择指定要连接的数据库
db.changeUser({ database: "page" }, (err) => {if (err) throw err;
});
// 获取文章列表 -- 分页
exports.articleList = (req, res) => {const { page, pageSize } = req.query; // 获取前端传递的page和pageSize参数  //查看总有多少条数据const articleSqlTotal = `select * from article ` //按照id排序,返回列表//总条数var total = 0db.query(articleSqlTotal, (err, result) => {if (err) return res.send({ code: 0, msg: err.message })total = result.length})// 构建分页查询语句  //const articleSql = `SELECT * FROM article ORDER BY id LIMIT ${pageSize} OFFSET ${(page - 1) * pageSize}`;const articleSql = `SELECT * FROM article ORDER BY id LIMIT ${pageSize}  OFFSET ${(page - 1) * pageSize}`;db.query(articleSql, (err, result) => {if (err) return res.send({ code: 0, msg: err.message });res.send({ code: 1, data: result, msg: '获取成功!', total: total });});
};

前端页面

使用组件库element-plus组件的分页器

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @prev-click="getList()" @next-click="getList()" background v-model:page-size="pageSize" v-model:current-page="page"layout="prev, pager, next,sizes" :total="total" />

处理方法

 data() {return {total: 0,page: 1,pageSize: 10,};},
methods:{//这个是监听到一页展示多少条数据的控制监听函数handleSizeChange(val) {this.pageSize = val;this.getList();},//这个是监听点击哪一页就跳转到哪一页的监听函数handleCurrentChange(number){this.page = number;this.getList()},//调用分页传参,也可直接传一个对象,例如queryparams:{},直接将queryparams传入其中getList() {ArticleListApi({page: this.page,pageSize: this.pageSize,}).then((res) => {if (res.data.code == 1) {this.tableData = res.data.data;this.total = res.data.total;}if (res.data.code == 401) {this.$message({type: "error",message: res.data.msg,duration: 1000,onClose: () => {router.replace("/login");},});}});},
}

相关文章:

Node+Express写分页接口

后端逻辑 router.js文件 const express require(express); const router express.Router();//导入函数处理,数据 const articleMessage require(../router_handle/artcle)//文章列表 router.get(/list,articleMessage.articleList)module.exports router; router_handle.js…...

ifconfig 主机ip url记录

ifconfig 容器Pods相关主机与url信息 一文搞懂网络知识&#xff0c;IP、子网掩码、网关、DNS、端口号_关于ip,网关。端口-CSDN博客 计算机网络知识之URL、IP、子网掩码、端口号_ip地址和url-CSDN博客 阅读看下以上文章 由此可知 1.主机ip 10.129.22.124 10.129.22 是网段…...

RT-Thread: STM32 SPI使用流程

1.添加驱动 ①点开设置界面 ②勾选看门 SPI 驱动 ③点击保存 ④查看添加的驱动文件 drv_spi.c 2.打开驱动头文件定义 ①打开配置文件 ②打开定义 3.打开需要开启的SPI总线 打开 drivers 目录下的 board.h 用SPI搜索&#xff0c;找到如下文字&#xff0c;打开对应的宏。 /*-…...

Qt 基于海康相机 的视频标绘

需求&#xff1a; 基于 视频 进行 标注&#xff0c;从而进行测量。 曾经搞在线教育时&#xff0c;尝试在视频上进行文字或者图形的绘制&#xff0c;但是发现利用Qt widget 传sdk 句柄的方式&#xff0c;只能使用窗口叠加的方式&#xff08;Qt 基于海康相机的视频绘图_海康相…...

【UEFI实战】Redfish的BIOS实现——生成EDK数据

生成Redfish文件 Redfish数据的表示形式&#xff0c;最常用的是JSON。将JSON表示的数据转换成C语言可以操作的结构体&#xff0c;是必不可少的步骤。当然如果手动转换的话&#xff0c;需要浪费大量的时间&#xff0c;因此DMTF组织开发了一个工具&#xff0c;用于将JSON数据快速…...

VUE--VUEX

一、什么是Vuex Vuex就是一个vue的状态&#xff08;数据&#xff09;管理工具&#xff0c;是vue项目实现大范围数据共享的技术方案。能够方便、高效的实现组件之间的数据共享。 Vuex的好处&#xff1a; &#xff08;1&#xff09;数据的存储一步到位&#xff0c;不需要层层传递…...

【NodeJS】004- NodeJS的模块化与包管理工具

模块化 1. 介绍 1.1.什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为 模块化 其中拆分出的 每个文件就是一个模块 ,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用 1.2 什么是模块化项目 ? 编码时是按照模…...

Linux浅学笔记02

目录 grep-wc-管道符 echo-tail-重定向符 vi编辑器 grep-wc-管道符 grep命令(过滤文件内容) //更准确的来说&#xff0c;是筛选包括“所需字符”的一句内容或多句内容。 语法&#xff1a;grep [-n] 关键字 文件路径 //-n&#xff1a;可选&#xff0c;表示在结果中匹配的行…...

速盾:服务器CDN加速配置的技术文章

CDN&#xff08;内容分发网络&#xff09;是一种通过分布在不同地理位置的服务器来加速网站内容传输的技术。在本文中&#xff0c;我们将介绍如何使用服务器CDN加速配置&#xff0c;以提高网站的性能和用户体验。 一、什么是CDN加速&#xff1f; CDN加速是通过将网站的静态内…...

【服务器Midjourney】创建部署Midjourney网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建MJ】 🌼1. 给服务器添加端口 🌼2. 使用Xshell连接服务器 🌼3. 安装docker 🌼4. 安装Midjourney程序 🌼5. 绑定域名+申请SSL证书 🌼6. 更新网站...

羊奶的营养成分和食疗价值

羊奶的营养成分和食疗价值 羊奶是一种营养非常丰富的乳制品&#xff0c;含有多种人体所需的营养成分&#xff0c;具有较高的食疗价值。下面将详细介绍羊奶的营养成分和其对人体健康的益处。 羊奶富含蛋白质&#xff0c;不仅含有人体所需的必需氨基酸&#xff0c;而且其蛋白质…...

23寒假预备役第二次测试

目录 B - Leftover Recipes C - We Got Everything Covered! D - A Balanced Problemset? E - Lame King F - Grid Ice Floor B - Leftover Recipes 问题描述 你的冰箱里有N种食材。我们将它们称为食材1、……和食材N。你有Qi​克的食材i。 你可以制作两种菜肴。制…...

测试用例相关问题

1.什么是测试用例 测试用例是指对一项特定的软件产品进行测试任务的描述&#xff0c;体现测试方案、方法、技术和策略。其内容包括测试目标、测试环境、输入数据、测试步骤、预期结果、测试脚本等&#xff0c;最终形成文档。简单地认为&#xff0c;测试用例是为某个特殊目标而…...

scrapy的入门使用

1 安装scrapy 命令: sudo apt-get install scrapy或者&#xff1a; pip/pip3 install scrapy2 scrapy项目开发流程 创建项目: scrapy startproject mySpider生成一个爬虫: scrapy genspider itcast itcast.cn提取数据:     根据网站结构在spider中实现数据采集相关内…...

网络爬虫详解

网络爬虫&#xff08;Web Crawler&#xff09;是一种自动化程序&#xff0c;用于在互联网上获取和提取数据。它们可以遍历互联网上的网页、收集数据&#xff0c;并进行处理和分析。网络爬虫也被称为网络蜘蛛、网络机器人等。 网络爬虫的工作原理主要是通过模拟浏览器的行为&…...

一个SSE(流式)接口引发的问题

前言 最近我们公司也是在做认知助手&#xff0c;大模型相关的功能&#xff0c;正在做提示词&#xff0c;机器人对话相关功能。想要提高用户体验&#xff0c;使用SSE请求模式&#xff0c;在不等数据完全拿到的情况下边拿边返回。 之前做过一版&#xff0c;但不是流式返回&…...

开发工具之GIT协同开发流程和微服务部署实践与总结

GIT协同开发流程和微服务部署的实践&#xff0c;并总结经验和教训。通过合理的GIT协同开发流程和良好的微服务部署策略&#xff0c;团队可以更高效地开发和部署软件。 ## 引言 在当今快节奏的软件开发环境中&#xff0c;采用合适的工具和流程对于实现高效协同开发和可靠部署至…...

数据库操作

数据库操作 1、 表之间连接 MYSQL 题 1、取第二高薪2、取第N高薪3、分数排名 inner join&#xff1a;2表值都存在 outer join&#xff1a;附表中值可能存在null的情况。 总结&#xff1a; ①A inner join B&#xff1a;取交集 ②A left join B&#xff1a;取A全部&#…...

MySQL-删除重复数据

在实际应用中&#xff0c;遇到一个这样的问题&#xff0c;MySQL中存储的数据为资讯类数据&#xff0c;在页面展示时会出现多个平台的新闻报导相同的内容&#xff0c;导致页面会出现重复数据。因为数据是每天定期更新&#xff0c;所以最快捷有效的方式是在更新完数据后增加一个去…...

Android Handler完全解读

一&#xff0c;概述 Handler在Android中比较基础&#xff0c;本文笔者将对此机制做一个完全解读。读者可简单参考上述类图与时序图&#xff0c;便于后续理解。 二&#xff0c;源码解读 1&#xff0c;主线程伊始 众所周知&#xff0c;通过Zygote的fork方式&#xff0c;新创建…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...