vue+node+mysql实现分页展示数据
为什么要使用分页展示数据,因为如果一次性向服务器请求全部数据的话,数据量大的话,会对服务器造成阻塞,要提高性能,所以这就要使用分页展示数据,当我们用到表格当前页的数据,才向服务器发起相对应页码和码数的请求。用到的技术栈vue-cli + node + mysql前端页面编写页面搭建主要是用到了element-ui框架,用到了表格组件和分页组件代码<template>...
·
为什么要使用分页展示数据,因为如果一次性向服务器请求全部数据的话,数据量大的话,会对服务器造成阻塞,要提高性能,所以这就要使用分页展示数据,当我们用到表格当前页的数据,才向服务器发起相对应页码和码数的请求。
用到的技术栈
vue-cli + node + mysql
前端页面编写
页面搭建主要是用到了element-ui
框架,用到了表格组件和分页组件
代码
<template>
<div class="table">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
type="index"
:index="indexMethod"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="product_name"
label="手机"
width="180">
</el-table-column>
<el-table-column
prop="product_price"
label="价格"
width="100">
</el-table-column>
<el-table-column align="center" label="商品图片" width="120">
<template slot-scope="scope">
<img :src="scope.row.product_img" width="40" height="40" class="head_pic" />
</template>
</el-table-column>
<el-table-column
prop="product_desc"
label="描述">
</el-table-column>
</el-table>
<div id="pagepos">
<el-pagination
background
layout="prev, pager, next"
@current-change="currentPage"
:total="totalPage">
</el-pagination>
</div>
</div>
</template>
<style lang="less" scoped>
#pagepos{
// float:right
text-align:center;
margin-top:10px;
}
</style>
mysql数据库shop表数据
node后台接口
获取shop表的全部数据
//获取商品
router.get('/getProductData', (req, res) => {
const sqlStr = `SELECT * FROM shop`;
connection.query(sqlStr, (error, results, fields) => {
if (error) {
res.json({ err_code: 0, message: "获取失败" });
} else {
results = JSON.parse(JSON.stringify(results));
res.json({ success_code: 200, data: results })
}
})
})
分页展示接口
//分页查询
router.post('/page',(req,res)=>{
let pageNo = Number(req.body.page) || 1;
let pageCount = Number(req.body.pageSize) || 10;
let pageSize = pageCount;
let page = (pageNo - 1) * pageCount;
console.log(page,pageSize);
let sqlStr = `select * from shop limit ${page},${pageSize}`;
connection.query(sqlStr,(error,results,fields)=>{
if(error){
console.log(error);
res.json({ err_code: 0, message: "获取分页数据失败"});
}else{
console.log(results);
res.json({success_code: 200, message: '获取分页数据成功', data: results })
}
})
})
前端js部分
<script>
import axios from 'axios'
export default {
name: 'page-query',
data(){
return{
tableData: [],//当前页码表格数据
pageNo:1,//表格页码
pageCount:10,//数据数
currentNo:1,//当前页码
allData:[],//全部数据
totalPage:1//总页码
}
},
mounted(){
this.getData();
this.getPageTotal();
},
methods:{
//获取前10条数据
getData(index){
this.pageNo = index || this.pageNo
axios.post('http://139.9.107.233:3030/page',{page:this.pageNo,pageSize:this.pageCount}).then(res=>{
console.log(res.data.data);
this.tableData = res.data.data
}).catch(error=>{
console.log(error);
})
},
//当前页数据
currentPage(currentPage){
this.currentNo = currentPage;
console.log( this.currentNo)
this.getData(this.currentNo)
},
//获取序号
indexMethod(index){
return (this.currentNo -1) * this.pageCount + index + 1;
},
//获取总页数
getPageTotal(){
axios.get('http://139.9.107.233:3030/getProductData').then(res=>{
console.log(res.data.data);
this.allData = res.data.data;
this.totalPage = Math.ceil(this.allData.length / this.pageCount) * 10;
console.log(this.totalPage);
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
第一页数据
第二页数据
第三页数据
更多推荐
已为社区贡献2条内容
所有评论(0)