前后端分离项目(六):数据分页查询(前端视图)

🚀 优质资源分享 🚀

|-------------------------------------------------------------------------------------------|-----|-------------------------------------------------------|
| 🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。 |

|--------------------------------------------------------------------------------------|-----|------------------------------|
| 💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |

好家伙,该项目为vue2项目

本篇更新数据分页查询的前端部分

先来看看最终效果**

最终代码:

复制代码
**#### "

text-center">用户管理
 
 "4">
 "primary" @click="addDialogVisible = true">添加用户
 

 
 "tableData" style="width: 100%">
 "id" label="序号" width="180">
 
 "name" label="书名" width="180">
 
 "author" label="作者 " width="180">
 

 
 pagination
 :page-size="6"
 :pager-count="11"
 layout="prev, pager, next"
 :total="total"
 @current-change="page">** 

import axios from ' axios '

export default {

name: 'MyUser',

data() {

return {

total: null,

// 用户列表数据

tableData: [

{ id: '1', name: '三体1', author: '大刘' },

{ id: '2', name: '三体2', author: '大刘' },

],

addDialogVisible: false, //控制添加用户对话框的显示与隐藏

addUserForm: {},

//添加表单的验证规则对象

addUserFormRules: {

// username: [{required:true,message:'请输入用户名',trigger:'blur'},

// {min:3,max:10,message:'用户名长度在3~10个字符',trigger:'blur'}],

// password: [{required:true,message:'请输入密码',trigger:'blur'},

// {min:6,max:15,message:'密码长度在6~15个字符',trigger:'blur'}],

// email: [{required:true,message:'请输入邮箱',trigger:'blur'}],

// mobile: [{required:true,message:'请输入手机号',trigger:'blur'}]

}

}

},

methods: {

page(currentPage){

const _this = this;

axios.get('http://localhost:8011/book/findAll/'+currentPage+'/6').then(function (resp) {

_this.tableData = resp.data.content

_this.total = resp.data.totalElements

console.log(resp.data)

})

}

},

created() {

const _this = this;

axios.get('http://localhost:8011/book/findAll/1/6').then(function (resp) {

_this.tableData = resp.data.content

_this.total = resp.data.totalElements

console.log(resp.data)

})

}

}

"less" scoped>

1.先来屡一下思路,

我们要在前端分页展示我们的数据, 一页六份数据,

那么我们要做到,每页对应一个不同的页数的网络请求,

拿到数据后,将它展示在table中

把我们要用的东西安装并配置一下

我们安装我们的老朋友Element UI

复制代码
*npm i element-ui -S**

再安装我们的axios

复制代码
**npm install axios -S**

main.js中,

复制代码
**import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

//导入路由模块
import router from "@/router"
// 导入样式
import './assets/css/bootstrap.css'
import './index.css'

Vue.config.productionTip = false

new Vue({
 router,
 axios,
 render: h => h(App),
 
}).$mount('#app')**

2.然后我们来逛一下element商城(去elementUI偷点组件)

拿个table

再拿个分页,

随后我们就可以搭建出我们的基础页面了

看一下后端给我们的数据长什么样子

复制代码
**page(currentPage){
 axios.get('http://localhost:8011/book/findAll/1/6').then(function (resp) {
 console.log(resp.data)
 })
 }**

看看数据

3.开写

来编辑"分页"

对应的page方法

复制代码
**page(currentPage){
 const \_this = this;
 axios.get('http://localhost:8011/book/findAll/'+currentPage+'/6').then(function (resp) {
 \_this.tableData = resp.data.content
 \_this.total = resp.data.totalElements

 console.log(resp.data)
 })
 }

 },**

注意:1.page方法中的currentPage是"当前页数",(跟翻译一个意思,人性化)

2.想想看这里this为什么要这样写

此处,我们调用网络请求拿到数据后,替换我们本来展示的数据就可以了

当然,我们还要还要将总数据量赋值给total

第一页的数据因为我们一开始就要看到,

所以我们把第一页的网络请求放在生命周期函数created中,

复制代码
**created() {
 const \_this = this;
 axios.get('http://localhost:8011/book/findAll/1/6').then(function (resp) {
 \_this.tableData = resp.data.content
 \_this.total = resp.data.totalElements

 console.log(resp.data)
 })
 }**

4.最后去把后端启动

(后端接口的详细写法在上一篇测试项目(五):数据分页查询(后端接口) - 养肥胖虎 - 博客园 (cnblogs.com)),

润!!!(激动)

数据库的表:

嗯.搞定了

最终效果放在开头了

相关推荐
佳腾_3 分钟前
【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
前端·中间件·性能优化·tomcat·web应用服务器
brzhang7 分钟前
告别 CURD,走向架构:一份帮你打通任督二脉的知识地图
前端·后端·架构
Moment14 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛15 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛16 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang16 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果23 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星25 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang32 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears32 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code