小白文章之---React前端框架和Spring Boot 后端框架调试

前后端整合后，在后端向前端传递数据时，很多时候需要进行调试，而我们的前端已经导成了包导入到了后端，这个时候就很难进行单独的在后端进行调试，或者还可以将前端的路径设置好在重新导入到后端，当然这个方法也是可行的，但是很耗费时间，不利于快速开发，这里我写一个比较简单的方法

数据传递方法：后端传递GSON数据，前端通过ajax接收

先说后端控制层，控制层获取到数据后，可以转换成GSON对象传递出去，这里我使用的是spring boot项目，可以直接使用@ResponseBody注解直接返回数据(如果需要传递多个对象的数据，可以使用匿名内部内)

	@ResponseBody
    private DisplayTable init() {
        List<Distributor> distributors = service.queryByKey(0, 10, "");
        String[] titles = {"编号", "姓名", "昵称", "电话", "性别", "头像", "余额"};
        //匿名内部内传递集合和表格标题栏
        DisplayTable table = new DisplayTable(distributors, titles);
        return table;
    }

前端通过ajax跳转路径获取返回值，我比较喜欢第三方的ajax工具getJSON
首先，需要导入jQuery的包，因为要使用“$”符号
这里我需要每次在界面打开时就加载表格数据，所以在componentDidMount方法中去实现ajax

	componentDidMount() {
        const _this = this;
        $.getJSON(`${global.server}/to/init`, {}, results => {
            _this.setState({
                distributors:results.distributors,
                titles:results.titles
            });
        })
    }

注：

这里需要注意，如果需要将获取的数据传值，需要注意this的指向问题

getJSON的url路径指向后端需要跳转的方法的路径，着了为了方便后面导包，我在这设置了个全局变量，这个变量是本地地址(http://localhost)，在使用使用转义字符去调用变量

let global = {
    server: "http://localhost"
}
export {
    global
}

通过“http://localhost/to/init”地址，就可以在前端跳转后端获取数据

注

前后端分离调试，跳转路径，需要注意服务器跨域的问题，我的前端是使用的React框架，后端是使用Spring Boot框架，所以只需要在跳转的控制层上加上“@CrossOrigin("*")”注解就能解决，这里的“ * ”是代表拦截所有的请求