前后端数据交互
一、后端部分1.创建Spring Boot项目：在IDEA中创建一个Spring Boot项目，引入必要的依靠。
2.编写Controller层：在Spring Boot项目中创建Controller，用于处理前端的哀求和响应数据。
@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层处理业务逻辑，如从数据库中获取数据。
//接口
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层：
@Mapper
public interface DemoStaffDao extends BaseMapper<DemoStaff> {
} 5.entity层：创建实体类来表示数据对象。
二、前端部分
1.创建Vue项目
2.编写组件：创建Vue组件来渲染页面和处理用户交互，比方：
<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 中，可以添加如下设置类：
@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组件中通过异步哀求获取后端数据，然后更新页面。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]