美文网首页
Spring Boot+Vue 前后端数据对接(三)

Spring Boot+Vue 前后端数据对接(三)

作者: printf200 | 来源:发表于2020-07-07 12:49 被阅读0次

https://element.faas.ele.me/#/zh-CN/component/table

将代码复制到相应文件下

pageOne.vue
<template>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="300">
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="180">
            <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>
</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            }
        },

        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        }
    }
</script>

<style scoped>

</style>

一、加载动态数据

vue

修改  <el-table-column
                fixed
                prop="date"  #对应相应字段
                label="日期"  
                width="150">
        </el-table-column>

tableData: [{
                    date: '2016-05-02',  #获取数据一一对应
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                },

分页处理

image.png
<el-pagination
  background
  layout="prev, pager, next"
  page-size="6"
  :total="1000">
</el-pagination>

#total属性  :表示一共多少条
page-size属性:表示每页六条数据
绑定分页时间
        <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                @current-change="page">
        </el-pagination>
<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                alert(currentPage);
            }
        },
</script>

@current-change="page" 绑定事件

安装axios

vue add axios

安装axios报错

image.png

解决方案

在main.js里边把axios实例挂载到Vue原型上

main.js

import Vue from 'vue'
import axios from "axios";
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

Vue.config.productionTip = false
Vue.prototype.$ajax = axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

调用时方法

在需要发送请求的地方使用"$ajax"

 created(){
            this.$ajax.get("http://localhost:8181/book/findAll/1/6").then(function (resp) {
                console.log(resp);
            });
        },

前台获取数据

<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="publish"
                    label="出版社"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pages"
                    label="页数"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="定价"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                <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="total"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                alert(currentPage);
            }
        },
        created(){
            //处理this作用域问题
            const _this = this
            this.$ajax.get("http://localhost:8181/book/findAll/1/6").then(function (resp) {
              //获取数据
                _this.tableData = resp.data.content
                _this.total = resp.data.totalElements //获取总页数
            });
        },
        data() {
            return {
                total: null,
                tableData: null
            }
        }
    }
</script>

<style scoped>

</style>

处理分页

    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                //处理this作用域问题
                const _this = this
                this.$ajax.get("http://localhost:8181/book/findAll/"+currentPage+"/6").then(function (resp) {
                    _this.tableData = resp.data.content
                    _this.total = resp.data.totalElements
                });
            }
        },

后台接口处理


    @Autowired
    private BookRepository bookRepository;

    @GetMapping("findAll/{page}/{size}")
    public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
        //Pageable分页接口 org.springframework.data.domain.Pageable;
        //PageRequest实现接口 of方法获取
        Pageable pageable = PageRequest.of(page-1,size);
        //findAll的重载
        return bookRepository.findAll(pageable);
    }

相关文章

网友评论

      本文标题:Spring Boot+Vue 前后端数据对接(三)

      本文链接:https://www.haomeiwen.com/subject/tglsqktx.html