jeecgboot后端显示前端表单

### JeecgBoot 后端渲染前端表单的方法和配置 为了实现JeecgBoot后端渲染前端表单的功能，通常涉及前后端分离架构下的交互逻辑。具体来说，在JeecgBoot框架中，通过API接口从前端获取数据并由后端处理业务逻辑，再返回给前端进行页面渲染。 #### 1. 创建控制器方法 在Spring Boot应用中的`@RestController`类下创建一个新的HTTP GET或POST映射方法来接收来自Vue.js或其他前端技术栈发送过来的数据请求。此方法负责调用服务层完成相应的数据库操作，并最终封装成JSON格式响应体传回客户端[^2]。 ```java @RestController @RequestMapping("/api/form") public class FormController { @Autowired private IFormService formService; @PostMapping("/submit") public Result submit(@RequestBody FormData formData){ boolean success = formService.save(formData); if (success) { return Result.ok().message("提交成功"); } else { return Result.error().message("提交失败"); } } } ``` #### 2. 配置跨域资源共享(CORS) 由于前后端部署在同一台服务器上可能会遇到同源策略问题，因此需要适当调整CORS设置允许特定域名访问资源。可以在全局过滤器或者单独针对某个路径开启 CORS 支持[^1]。 ```properties spring.mvc.cors.allowed-origins=http://localhost:8080 spring.mvc.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS spring.mvc.cors.allowed-headers=* ``` #### 3. 使用Ant Design Pro 或者其他UI库构建表单项 对于前端部分，推荐采用 Ant Design Vue 这样的组件化 UI 库快速搭建美观易用的界面布局。利用其内置的各种输入框、选择器等控件轻松组合出自定义表单结构。 ```html <a-form :model="formState" name="basic"> <a-form-item label="Username" name="username"> <a-input v-model:value="formState.username"/> </a-form-item> <!-- 更多字段... --> </a-form> <script setup lang="ts"> import { reactive } from 'vue'; const formState = reactive({ username: '', }); </script> ``` #### 4. 动态加载表格列显示内容 如果涉及到更复杂的场景比如根据后台权限控制某些列是否可见，则可以参照如下方式实现在 `mounted()` 生命周期钩子内发起 AJAX 请求获取最新配置信息，并据此更新视图状态[^3]。 ```javascript export default { data() { return { corpList: [] }; }, mounted() { this.fetchCorpData(); }, methods: { async fetchCorpData() { const res = await axios.get('/api/corp'); this.corpList = res.data; }, customRender(text, record, index) { let result = ''; this.corpList.forEach(item => { if (item.id === text) { result = item.name; } }); return result; } } }; ```