Vue系列-前端条件分页查询全流程演示

最新推荐文章于 2025-06-27 11:45:00 发布

原创

最新推荐文章于 2025-06-27 11:45:00 发布 · 2.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript #spring boot #vue.js

本文介绍如何使用Vue.js配合axios进行前端条件分页查询，展示与后端SpringBoot的交互过程，包括数据表设计、API调用、列表布局和响应格式处理。

最近在做个人博客网站，后端的条件分页查询已经写好（见https://blog.youkuaiyun.com/ws6afa88/article/details/108928401），现在来用Vue做前端显示。

1. 数据表

在这里插入图片描述
数据表sql:

CREATE DATABASE /*!32312 IF NOT EXISTS*/`myblog` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `myblog`;

/*Table structure for table `articles` */

DROP TABLE IF EXISTS `articles`;

CREATE TABLE `articles` (
  `article_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `user_id` bigint(20) NOT NULL COMMENT '用户ID',
  `title` varchar(255) DEFAULT NULL COMMENT '文章标题',
  `name` varchar(255) DEFAULT NULL,
  `view_num` int(11) DEFAULT NULL COMMENT '浏览数',
  `comment_num` int(11) DEFAULT NULL COMMENT '评论数',
  `category_id` bigint(20) DEFAULT NULL COMMENT '文章分类ID',
  `create_time` datetime DEFAULT NULL COMMENT '创建日期',
  `like_num` int(11) DEFAULT '0',
  PRIMARY KEY (`article_id`),
  KEY `key_category_id` (`category_id`),
  KEY `key_userId` (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=99 DEFAULT CHARSET=utf8 COMMENT='文章表';

/*Data for the table `articles` */

insert  into `articles`(`article_id`,`user_id`,`title`,`name`,`view_num`,`comment_num`,`category_id`,`create_time`,`like_num`) values (1,0,'555','555.md',0,3,1,'2020-09-22 00:00:00',0),(83,1,'daidai','daidai.md',0,4,1,'2020-09-30 11:09:42',0),(84,1,'redis安装','redis安装.md',0,1,1,'2020-09-30 11:09:43',0),(85,1,'淘宝革命的启示录','淘宝革命的启示录.md',0,2,1,'2020-09-30 11:09:43',0),(98,1,'444','444.md',0,9,0,'2020-10-01 10:55:45',0);

2. 最终效果

在这里插入图片描述

3. axios函数

所需要的条件分页函数定义在article.js中

//条件分页查询
 export const findPage = (pageSize,pageNum,title) => {
   
   
	      return axios({
   
   
	        method: 'post',
	        url: `/findPage`,
	        data: {
   
   
	          sortView: "commentNum",   //暂时写死,按浏览量排序
	          direction: "desc",         //暂时写死,倒序
	          pag