前后端数据交互

一、后端部分

1.创建Spring Boot项目：在IDEA中创建一个Spring Boot项目，引入必要的依赖。

2.编写Controller层：在Spring Boot项目中创建Controller，用于处理前端的请求和响应数据。

java 复制代码

@RestController
@RequestMapping("/demo/staff")
public class DemoStaffController extends AbstractController {
    @Resource
    private DemoStaffService demoStaffService;
    @SysLog("保存/新增")
    @PostMapping("/save")
    @RequiresPermissions("demo:staff:save")
    public R saveStaff(@RequestBody DemoStaff staff){
        ValidatorUtils.validateEntity(staff);
        staff.setCreateBy(getUser().getUserId());
        demoStaffService.saveStaff(staff);
        return R.ok();
    }
}

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

java 复制代码

//接口
public interface DemoStaffService extends IService<DemoStaff> {
    void saveStaff(DemoStaff staff);
}

//实现类
@Service
public class DemoStaffServiceImpl extends ServiceImpl<DemoStaffDao, DemoStaff> implements DemoStaffService {
    @Resource
    private DemoStaffDao demoStaffDao;
   
    @Override
    public void saveStaff(DemoStaff staff){
        this.save(staff);
    }
}

4.编写Dao层：

java 复制代码

@Mapper
public interface DemoStaffDao extends BaseMapper<DemoStaff> {
}

5.entity层：创建实体类来表示数据对象。

二、前端部分

1.创建Vue项目

2.编写组件：创建Vue组件来渲染页面和处理用户交互，例如：

javascript 复制代码

<template>
  <div class="mod-config">
    <!-- 表单区域 -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <el-form-item>
        <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          paramKey: ''
        }
      }
    },
    components: {
    },
    activated () {
    },
    methods: {
      search() {
        this.pageIndex = 1 
        this.getDataList() 
      },
      getDataList () {
        this.dataListLoading = true 
        this.$http({
          url: this.$http.adornUrl('/sys/config/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'paramKey': this.dataForm.paramKey
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data);
          } else {
            console.log(data);
          }
        })
      }
    }
  }
</script>

3.样式：使用CSS.

三、前后端交互

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

java 复制代码

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
}

2.前端调用后端接口：在Vue组件中调用后端提供的API接口。

3.后端处理请求：Spring Boot中的Controller接收前端的请求，处理业务逻辑并返回数据。

4.前端处理响应：Vue组件中通过异步请求获取后端数据，然后更新页面。