script setupimport reactive from vueimport ElNotification from element-plusimport axios from axios;const formInline = reactive username nickname email phone gradeId const onSubm
要让新增教师成功,需要对接口进行正确的调用和参数传递,并处理接口返回的结果。
首先,在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="昵称: ">
<el-input v-model="formInline.nickname" clearable />
</el-form-item>
<el-form-item label="邮箱: ">
<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="年级: ">
<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>
这样,当点击添加按钮时,会调用接口并传递正确的参数,然后根据接口返回的结果进行相应的提示
原文地址: https://www.cveoy.top/t/topic/iaqJ 著作权归作者所有。请勿转载和采集!