Java小白，记录开发过程中 前端和后端中的数据是如何进行交互的
以角色管理中的添加角色接口为例：
-
点击添加按钮-设置一个单击事件addShow
定义一个添加用户信息的弹框，这个弹框中使用v-model双向绑定dialogvisible变量，当这个 值为true时，弹框打开，值为false时，弹框关闭
<!-- 添加按钮 --><div class="tools-div"><el-button type="success" size="small" @click="addShow">添 加</el-button></div><!-- 添加角色表单对话框 --><el-dialog v-model="dialogVisible" title="添加或修改角色" width="30%"><el-form label-width="120px"><el-form-item label="角色名称"><el-input v-model="sysRole.roleName" /></el-form-item><el-form-item label="角色Code"><el-input v-model="sysRole.roleCode" /></el-form-item><el-form-item><el-button type="primary" @click="addOrUpdateRole" >提交</el-button><el-button @click="dialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog>
-
响应单击事件-addShow方法实现弹框
在script标签里定义上述组件所需的绑定的对象，所需响应的函数，其中，后端所需要的sysRole对象就在前端定义，然后将这个对象属性绑定到弹框里相应的输入框中，当向框中输入数据时，就给这个对象的属性赋上了值。对于dialogVisible变量初始化为false，保证弹框一开始并不会出现，只有当点击了添加用户按钮时，才会在addShow方法中将其置为true, 为了防止下一个添加会展示上次添加的数据，所以需要先对sysRole进行清空
const dialogVisible = ref(false);
const sysRoleForm = {id:"",roleName: "",roleCode: ""
}
const sysRole = ref(sysRoleForm);
const addShow = () => {// 初始化表单数据sysRole.value = {};dialogVisible.value = true;
};
-
点击提交-响应addOrUpdateRole方法
根据id域是否有值来判断当前提交是修改的原来的角色，还是新创建的角色，因为新建的角色id是由数据库主键自增自动赋值的，所以add方法的id域肯定为空，这里就会发送异步请求，调用js文件中配置的请求类型，后端请求的地址等信息，把所有新增的用户信息sysRole发送给后端进行处理
//提交方法
const addOrUpdateRole = async () => {if (!sysRole.value.id) { //没有id就添加const {code} = await SaveSysRole(sysRole.value)if (code === 200) {dialogVisible.value = false; // 关闭弹框ElMessage.success("添加成功"); //提示fetchData(); //刷新列表}} else {const {code} = await UpdateSysRole(sysRole.value)if (code === 200) {dialogVisible.value = false; // 关闭弹框ElMessage.success("修改成功"); //提示fetchData(); //刷新列表}}
}
-
js文件中配置SaveSysRole对应的后端请求路径
const base_api = '/admin/system/sysRole'
//添加角色
export const SaveSysRole = (sysRole) => {return request({url: `${base_api}/saveSysRole`,method: 'post',//接口中使用@RequestBody注解 前端 data: 参数名称 表示传json格式//接口中没有@RequsetBody注解 前端 params: 参数名称 表示传普通参数data: sysRole,})}
-
后端Controller接收前端传入的参数，完成该请求，并将结果返回给前端
@RestController
@RequestMapping("/admin/system/sysRole")
public class SysRoleController {@Autowiredprivate SysRoleService sysRoleService;/*** 添加角色*/@PostMapping(value = "/saveSysRole")public Result saveSysRole(@RequestBody SysRole sysRole) {sysRoleService.saveSysRole(sysRole);return Result.build(null,ResultCodeEnum.SUCCESS);}
}后端就是mvc一套流程，由controller调用service, service调用mapper，最后在xml文件中写sql对应mapper中的方法，逐层向上返回，最终由controller返回Result类型给前端，前端再根据后端返回的状态码执行后序逻辑，至此前后端就完成了一次交互，将用户提交的数据持久化到了数据库中
