Java入门15：用户新增接口对接

该文章是Java入门系列的第十五章：前端对接用户新增接口

对接用户新增接口

我们先打开src\api\SystemSet\UserManage.ts文件，将新增用户的接口代码改成如下：

/**
 * 新增用户
 * @method postUser
 */
export const postUser = (data: any) => Axios.post(`add`, data)

我们再打开src\views\SystemSet\UserManage\index.vue文件，改一下handleSubmit()方法的代码，改成如下：

其中roleIdList改成字符串传，因为我们的数据库存的是字符串类型

const handleSubmit = async () => {
    await AddEditRef.value.ruleFormRef.validate((valid: any, fields: any) => {
        if (valid) {
            let form = AddEditRef.value.ruleForm

            form.roleIdList = form.roleIdList.join(',')

            let asyncFun: any = postUser
            if (editItem.value) {
                asyncFun = putUser
            }

            asyncFun(form).then((res: any) => {
                getTableData()
                addEditShow.value = false
                ElMessage({
                    message: res.msg,
                    type: "success",
                });
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

还有.env.development文件，代码改成如下，localhost改成后端本地的ip：

# 使用【演示环境】接口地址
VITE_API_URL=http://localhost:8080/

# 使用【本地环境】接口地址
# VITE_API_URL=http://localhost:8080/

最后我们在页面上点击“新增”按钮，填写新增用户的信息，点击确定

再查看数据库，可以看到user表中多了李四的信息

写在最后

以上就是对接用户新增接口的全部说明，下一章节开发用户查询接口