前后端数据交互

一、后端部分

        1.创建Spring Boot项目：在IDEA中创建一个Spring Boot项目，引入必要的依靠。
        2.编写Controller层：在Spring Boot项目中创建Controller，用于处理前端的哀求和响应数据。

1. @RestController
2. @RequestMapping("/demo/staff")
3. public class DemoStaffController extends AbstractController {
4.     @Resource
5.     private DemoStaffService demoStaffService;
6.     @SysLog("保存/新增")
7.     @PostMapping("/save")
8.     @RequiresPermissions("demo:staff:save")
9.     public R saveStaff(@RequestBody DemoStaff staff){
10.         ValidatorUtils.validateEntity(staff);
11.         staff.setCreateBy(getUser().getUserId());
12.         demoStaffService.saveStaff(staff);
13.         return R.ok();
14.     }
15. }

复制代码

        3.Service层：编写Service层处理业务逻辑，如从数据库中获取数据。

1. //接口
2. public interface DemoStaffService extends IService<DemoStaff> {
3.     void saveStaff(DemoStaff staff);
4. }
6. //实现类
7. @Service
8. public class DemoStaffServiceImpl extends ServiceImpl<DemoStaffDao, DemoStaff> implements DemoStaffService {
9.     @Resource
10.     private DemoStaffDao demoStaffDao;
11.    
12.     @Override
13.     public void saveStaff(DemoStaff staff){
14.         this.save(staff);
15.     }
16. }

复制代码

        4.编写Dao层：

1. @Mapper
2. public interface DemoStaffDao extends BaseMapper<DemoStaff> {
3. }

复制代码

        5.entity层：创建实体类来表示数据对象。
二、前端部分

1.创建Vue项目
2.编写组件：创建Vue组件来渲染页面和处理用户交互，比方：

1. <template>
2.   <div class="mod-config">
3.     <!-- 表单区域 -->
4.     <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
5.       <el-form-item>
6.         <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
7.       </el-form-item>
8.       <el-form-item>
9.         <el-button @click="search()">查询</el-button>
10.       </el-form-item>
11.     </el-form>
12.   </div>
13. </template>
15. <script>
16.   export default {
17.     data () {
18.       return {
19.         dataForm: {
20.           paramKey: ''
21.         }
22.       }
23.     },
24.     components: {
25.     },
26.     activated () {
27.     },
28.     methods: {
29.       search() {
30.         this.pageIndex = 1
31.         this.getDataList()
32.       },
33.       getDataList () {
34.         this.dataListLoading = true
35.         this.$http({
36.           url: this.$http.adornUrl('/sys/config/list'),
37.           method: 'get',
38.           params: this.$http.adornParams({
39.             'page': this.pageIndex,
40.             'limit': this.pageSize,
41.             'paramKey': this.dataForm.paramKey
42.           })
43.         }).then(({data}) => {
44.           if (data && data.code === 0) {
45.             console.log(data);
46.           } else {
47.             console.log(data);
48.           }
49.         })
50.       }
51.     }
52.   }
53. </script>

复制代码

        3.样式：利用CSS.
三、前后端交互

        1.跨域题目：在前后端分离开发中，会遇到跨域题目。后端可以通过设置跨域资源共享来办理。在 Spring Boot 中，可以添加如下设置类：

1. @Configuration
2. public class CorsConfig implements WebMvcConfigurer {
4.     @Override
5.     public void addCorsMappings(CorsRegistry registry) {
6.         registry.addMapping("/**")
7.             .allowedOrigins("*")
8.             .allowCredentials(true)
9.             .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
10.             .maxAge(3600);
11.     }
12. }

复制代码

        2.前端调用后端接口：在Vue组件中调用后端提供的API接口。
        3.后端处理哀求：Spring Boot中的Controller接收前端的哀求，处理业务逻辑并返回数据。
        4.前端处理响应：Vue组件中通过异步哀求获取后端数据，然后更新页面。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。