Springboot+React+antd开发问题记（一）

最新推荐文章于 2025-06-26 10:52:38 发布

原创最新推荐文章于 2025-06-26 10:52:38 发布 · 8.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

前端开发同时被 2 个专栏收录

4 篇文章

订阅专栏

antd

1 篇文章

订阅专栏

本文记录了使用Springboot、React和antd进行前后端开发时遇到的跨域、树选择和动态复选框/下拉框的问题。解决跨域需在前端配置utils/config.js和后端添加@Configuration注解。树选择动态生成，数据结构包括label、name、value及嵌套children。树选择显示问题通过设置style宽度解决。动态复选框和下拉框的实现涉及取值和传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.跨域访问

前台修改utils/config.js文件中的serviceDomainxx中的地址，再把此地址加在上方CORS里。

后台部分需要在config.java相应的函数前面加@Configuration 的注释

注意各种地址的配置

2.树选择

2.1 树选择动态生成

<Col {...ColProps} xl={{ span: 3 }} md={{ span: 5 }} >
  {getFieldDecorator('modelId')(
    <TreeSelect
      treeData={treeData}
      placeholder="模块名称"
      style={ {width: '100%'} }
    />)}
</Col>

treeData就是要塞进去的东西了。

后台传来的数据结构为

success：true

rows：{

label：

name：

value：

children{

label：

name：

value：

children：{

……

}

传的时候传data.rows给route

2.2 树选择框显示不全：style={ {width: '100%'} }

添加在标签内就可以了

3.动态复选框、下拉框写法

先取到值在index画面里（传过去就可以，不一定要index，看情况而定）比如bll这个值，（已经是后台拼好的啦）

const bllOptions = bll ?loopCheckbox(  bll  ) : []

其中loopCheckbox在utils/index.js里，记得

module.exports

里要添加上新写的遍历语句，

const loopCheckbox = data => data.map((item) => {
  return <Checkbox value={item.VALUE} >{item.LABEL}</Checkbox>
});

这样就拼接完成了
<Col xl={{ span: 5 }} md={{ span: 12}} >
  <FormItem label="办理量"
            hasFeedback {...formItemLayouts}
  >
    {getFieldDecorator('bll', {
      initialValue: editObj !== null ? editObj.bll : '',
      rules: [],
    })(<CheckboxGroup >
      {bllOptions}
      </CheckboxGroup>

    )}
  </FormItem>
</Col>

这是写在要使用复选框界面里的代码
4. switch
switch是ant design 的开关，不选择的话是undefined，选择上会默认传一个true回去。
似乎需要靠onchange改变值的样子。
5.针对输入框和字符串拼接，可尝试使用

 addonBefore="+"addonAfter="Km"