前后端交互的过程

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 {
    @Autowired
    private 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类型给前端，前端再根据后端返回的状态码执行后序逻辑，至此前后端就完成了一次交互，将用户提交的数据持久化到了数据库中