前后端分离开发数据对接
1、前端创建报表
新增路由Table
//新增一个Table路由
{
path: '/table',
name: 'Table',
component: () => import('../views/Table.vue')
}
创建一个报表的Component并命名为Table.vue
<template>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column fixed prop="id" label="编号">
</el-table-column>
<el-table-column prop="name" label="名称">
</el-table-column>
<el-table-column prop="author" label="作者">
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
tableData: [
{id: '2016-05-02', name: '王小虎', author: '上海'},
{id: '2016-05-04', name: '王小虎', author: '上海'},
{id: '2016-05-01', name: '王小虎', author: '上海'},
{id: '2016-05-03', name: '王小虎', author: '上海'},
{id: '2016-05-02', name: '王小虎', author: '上海'},
{id: '2016-05-04', name: '王小虎', author: '上海'},
{id: '2016-05-01', name: '王小虎', author: '上海'},
{id: '2016-05-03', name: '王小虎', author: '上海'},
{id: '2016-05-02', name: '王小虎', author: '上海'},
{id: '2016-05-04', name: '王小虎', author: '上海'},
{id: '2016-05-01', name: '王小虎', author: '上海'},
{id: '2016-05-03', name: '王小虎', author: '上海'},
{id: '2016-05-02', name: '王小虎', author: '上海'},
{id: '2016-05-04', name: '王小虎', author: '上海'},
{id: '2016-05-01', name: '王小虎', author: '上海'},
{id: '2016-05-03', name: '王小虎', author: '上海'}
]
}
}
}
</script>
到了这一步我们就完成的前端报表的创建
2、后端创建接口
前面我们已经创建了Book实体类、BookRepository以及BookController,这里不再贴上代码，唯一有变化的就是BookController，我们再原来的接口基础上增加了分页的功能
package com.maxchen.springboottest.controller;
import com.maxchen.springboottest.entity.Book;
import com.maxchen.springboottest.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @ClassName: BookController
* @Description: TODO
* @Author Maxchen
* @Date 2020/2/26 23:00
* @Version V1.0.0
*/
@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
private BookRepository bookRepository;
//GET方法返回list
//在原来的基础上增加了分页
@GetMapping("findAll/{page}/{size}")
Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
//获取分页参数
PageRequest pr = PageRequest.of(page,size);
//返回分页数据
return bookRepository.findAll(pr);
}
}
接着访问接口http://localhost:8181/book/findAll/0/10,即可看到以10行为一页第一页的数据
3、前后端对接
我们观察了接口之后发现几个重点的数据，content是数据的主体，size是单页数据条数，totalElements是数据的总条数
前端通过这几个参数展示分页数据表，我们联调前端代码:
el-pagination联调
<!--读取数据总数和单页面大小，对数据进行分页-->
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="page"
>
</el-pagination>
page联调
//分页加载时的数据
page(currentPage){
const _this = this
//读取接口，每6条数据分一页
axios.get('http://localhost:8181/book/findAll/'+(currentPage-1)+'/6').then(function(resp){
console.log(resp)
//读取接口的content主数据
_this.tableData = resp.data.content
//读取接口的size单页大小
_this.pageSize = resp.data.size
///读取接口的totalElements数据总数
_this.total = resp.data.totalElements
})
}
created联调
//进入此页面时初次加载的数据
created(){
const _this = this
axios.get('http://localhost:8181/book/findAll/0/6').then(function(resp){
console.log(resp)
_this.tableData = resp.data.content
_this.pageSize = resp.data.size
_this.total = resp.data.totalElements
})
}
整体代码
<template>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column fixed prop="id" label="编号">
</el-table-column>
<el-table-column prop="name" label="名称">
</el-table-column>
<el-table-column prop="author" label="作者">
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--读取数据总数和单页面大小，对数据进行分页-->
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="page"
>
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
//分页加载时的数据
page(currentPage){
const _this = this
//每6条数据分一页
axios.get('http://localhost:8181/book/findAll/'+(currentPage-1)+'/6').then(function(resp){
console.log(resp)
_this.tableData = resp.data.content
_this.pageSize = resp.data.size
_this.total = resp.data.totalElements
})
}
},
data() {
return {
tableData: [
{id: '1', name: '王小虎', author: '上海'},
{id: '2', name: '王小虎', author: '上海'},
{id: '3', name: '王小虎', author: '上海'},
{id: '4', name: '王小虎', author: '上海'},
{id: '5', name: '王小虎', author: '上海'},
{id: '6', name: '王小虎', author: '上海'},
{id: '7', name: '王小虎', author: '上海'},
{id: '8', name: '王小虎', author: '上海'},
{id: '9', name: '王小虎', author: '上海'},
{id: '10', name: '王小虎', author: '上海'},
{id: '11', name: '王小虎', author: '上海'},
{id: '12', name: '王小虎', author: '上海'},
{id: '13', name: '王小虎', author: '上海'},
{id: '14', name: '王小虎', author: '上海'},
{id: '15', name: '王小虎', author: '上海'},
{id: '16', name: '王小虎', author: '上海'}
]
}
},
//初次加载时的数据
created(){
const _this = this
axios.get('http://localhost:8181/book/findAll/0/6').then(function(resp){
console.log(resp)
_this.tableData = resp.data.content
_this.pageSize = resp.data.size
_this.total = resp.data.totalElements
})
}
}
</script>
最后我们可以查询到分页的数据表
