2-5.vue+axios+element-ui实现分页查询

最新推荐文章于 2024-08-30 17:04:20 发布

落叶~

最新推荐文章于 2024-08-30 17:04:20 发布

阅读量2.6k

点赞数 4

分类专栏： Vue与Element-ui结合使用

本文链接：https://blog.csdn.net/weixin_43913219/article/details/104661635

版权

本文介绍了如何结合Vue、Axios和Element-UI实现后台分页查询功能。首先，需要安装Axios环境，然后在Vue中配置跨域以访问服务器接口。接着，使用Element-UI的分页组件并编写相应的事件处理方法，如handleCurrentChange和handleSizeChange，以实现实时更新数据。最后，展示了不同分页设置下的商品展示效果。

摘要由CSDN通过智能技术生成

Vue与Axios结合进行后台交互

这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020
在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。

安装axios的环境

1.在使用axios与后台进行交互时，需要进行一些配置。

利用npm命令安装axios环境

npm install axios

安装成功之后可以在/package.json文件中查看到axios的相关依赖。
在/src/main.js文件中引入axios

import Axios from 'axios'
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

2.在准备好axios的安装环境之后，先在<template>标签中写好需要的模板。这里用到了element-ui组件库中的Pagination分页组件。

<template>
   <el-pagination 
		 @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
		 :page-sizes="[5,7,10,20,30]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
	 </el-pagination>
</template>

注明：

current-page：当前页数，支持 .sync修饰符，currentPage初始值为1,m默认显示第一页；
page-size：每页显示条目个数，支持.sync修饰符，pageSize初始值为，默认每页显示5条数据；
page-sizes：每页显示个数选择器的选项设置，是整型数组类型:number[]；
layout：组件布局，子组件名用逗号分隔，这里设置的组件布局是总条数–每页显示条数–前一页–页面数–下一页–跳转到指定页面；
total：总条目数，这里的总条目数是访问后台服务器取得数据库中的商品总条数，total初始值设为0；
@size-change：每页显示条数(pageSize)改变时会触发的事件：handleSizeChange方法；
@current-change：当前页面数(currentPage) 改变时会触发的事件：handleCurrentChange方法；

3.因为访问的服务器不是本地服务器，所以需要在vue中进行跨域配置，不然无法访问到接口的数据。在/config/index.js文件中进行相关配置，找到proxyTable选项进行跨域配置。

proxyTable: {
   
	 "/api":{
   
            target: 'http://www.xxxxx.com',
            changeOrigin: true,
            pathRewrite: {
   
                '^/api': '/'
       }
}

注明：

target是请求源地址；
changeOrigin设置为true时，发送请求头中host会设置成target，设置是否跨域；
pathRewrite是路径重写。

4.现在写一下分页查询的searchByPage()方法，其中需要传入两个参数：当前显示页数(currentPage)以及每页显示条目个数(pageSize)。

searchByPage(currentPage, pageSize) {
   
		var demo = new URLSearchParams()
		demo.append("page", currentPage);
		demo.append("size", pageSize)
		axios.post('/test/findAllShopByPage', demo).then((response) => {
   
			if(response.data.code==0){
   
				console.log("分页查询到的数据：", response.data.data.content)
				this.total=response.data.data.totalElements//数据库中商品总条数
				this.shopGoods = response.data.data.content
			}else{
   
				console.log("查询失败原因：", response.data.message)
			}
		}).catch((error