前后端整合后,在后端向前端传递数据时,很多时候需要进行调试,而我们的前端已经导成了包导入到了后端,这个时候就很难进行单独的在后端进行调试,或者还可以将前端的路径设置好在重新导入到后端,当然这个方法也是可行的,但是很耗费时间,不利于快速开发,这里我写一个比较简单的方法
数据传递方法:后端传递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("*")”注解就能解决,这里的“ * ”是代表拦截所有的请求