springboot+vue前后端分离测试demo

这里的后端代码需要参考我之前的demo：这里

前端代码使用脚手架。

使用webstorm，idea

 

后端代码：

后端代码其他部分直接参考上个boot练习demo

 

注意需要修改端口否则前后端都是8080端口

 

前端·代码

vue cli3 装有vuex，router，axios插件

新建一个展示页面

 

 具体代码如下所示：

<template>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>gender</th>
    </tr>
    <tr v-for="item in books">
        <td>{{item.id}}</td>
        <td>{{item.stuName}}</td>
        <td>{{item.stuGender}}</td>
    </tr>
</template>
<script>
    import request from '../network/index'
    import axios from 'axios'
    export default {
        name: "ShowBook",
        //组件中需要使用函数返回
        data(){
            return{
                books:[
                    {
                        id:1,
                        stuName:'test',
                        stuGender:'male'
                    },
                ]
            }
        },
        created(){
            //我们不能直接在回调中使用this，因为在回调中使用this我们得到的是函数中的this而不是data中的this
            const _this=this;
            //获取后端数据
            axios.get('http://localhost:8181/findAll').then(function (res) {
                console.log(res);
                _this.books=res.data;
            })
        }
    }
</script>

<style scoped>

</style>

roater中注册组件我们使用懒加载的方式

 

解决跨域问题（这个是固定写法）

 

测试

 

 

 

问题1：dataFn.call is not a function

 

   原因：注意在组件中我们使用数据都是需要在函数中使用

    解决方法：使用return来返回数据，如下图所示