关于ant-design-pro与Java后台的数据交互

1.首先在config.js中配置服务器如图
关于ant-design-pro与Java后台的数据交互_第1张图片
2.在services层中找到api.js并在里面写向后台要发送的请求

关于ant-design-pro与Java后台的数据交互_第2张图片/api就代表着上图的http://localhost:8080/只要是这个地址,都用/api代替;static/user/getUser是后台的接口

3.在model里创建一个模型调用该方法
3.1在头部引用要调用的方法,并设置命名空间
在这里插入图片描述
3.2调用该方法
关于ant-design-pro与Java后台的数据交互_第3张图片
3.3接着在reducers写该方法
关于ant-design-pro与Java后台的数据交互_第4张图片上图type是save说一在reducers中要跟上面一致,data是上面定义的一个集合
关于ant-design-pro与Java后台的数据交互_第5张图片
items是定义的一个变量
4.在主页面引用该模型
关于ant-design-pro与Java后台的数据交互_第6张图片
接着在componentDidMount()方法调用模型里的方法,componentDidMount()方法是在所有东西加载完后最后加载的
关于ant-design-pro与Java后台的数据交互_第7张图片type里test代表模型的名字,fetch是模型中方法的名字
4.1接着在render中赋值
关于ant-design-pro与Java后台的数据交互_第8张图片这样后台的数据就能在这里运用了,刚接触不太懂,总结的一点经验,有错的地方希望大神指点。

你可能感兴趣的:(前端框架)