要让新增教师成功,需要对接口进行正确的调用和参数传递,并处理接口返回的结果。

首先,在onSubmit方法中,将需要传递给接口的参数添加到axios.post的第二个参数中,如下所示:

axios.post("http://nn.nncoding.icu:8080/api/teacher/save", {
    username: formInline.username,
    nickname: formInline.nickname,
    email: formInline.email,
    phone: formInline.phone,
    gradeId: formInline.gradeId
}, {
    headers: {
        token: token
    }
}).then((result) => {
    // 处理接口返回的结果
    ElNotification({
        title: '提示信息',
        message: "添加成功(5秒后自动消失)",
    })
}).catch((error) => {
    console.log(error);
    ElNotification({
        title: '提示信息',
        message: "添加失败(5秒后自动消失)",
    })
})

接着,在模板中的输入框和下拉框中,将v-model绑定的属性名修改为正确的属性名,如下所示:

<el-form-item label="教师名:">
    <el-input v-model="formInline.username" clearable />
</el-form-item>
<el-form-item label="昵称:&nbsp;">
    <el-input v-model="formInline.nickname" clearable />
</el-form-item>
<el-form-item label="邮箱:&nbsp;">
    <el-input v-model="formInline.email" clearable />
</el-form-item>
<el-form-item label="手机号:">
    <el-input v-model="formInline.phone" clearable />
</el-form-item>
<el-form-item label="年级:&nbsp;">
    <el-select v-model="formInline.gradeId" placeholder="选择年级" clearable>
        <el-option label="一年级" value="0" />
        <el-option label="二年级" value="1" />
        <el-option label="三年级" value="2" />
        <el-option label="四年级" value="3" />
        <el-option label="五年级" value="4" />
        <el-option label="六年级" value="5" />
    </el-select>
</el-form-item>

这样,当点击添加按钮时,会调用接口并传递正确的参数,然后根据接口返回的结果进行相应的提示

script setupimport reactive from vueimport ElNotification from element-plusimport axios from axios;const formInline = reactive username nickname email phone gradeId const onSubm

原文地址: https://www.cveoy.top/t/topic/iaqJ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录