教师信息修改 - 修改教师基本信息

<template>
    <div style='padding: 0 250px 0 250px ;'>
        <el-form ref='ruleFormRef' :model='ruleForm' status-icon :rules='rules' label-width='120px' class='demo-ruleForm'>
            <el-form-item label='教师id' prop='tid'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tid' autocomplete='off' :disabled='true'/>
            </el-form-item>
            <el-form-item label='教师名' prop='tname'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tname' autocomplete='off' :disabled='false' />
            </el-form-item>
            <el-form-item label='院名' prop='departmentName'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.departmentName' autocomplete='off' :disabled='true' />
            </el-form-item>
            <el-form-item label='职位' prop='tsId'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tsId' autocomplete='off' :disabled='true' />
            </el-form-item>
            <el-form-item label='年龄' prop='age'>
                <el-input style='width: 600px;margin: 5px 0;' v-model.number='ruleForm.age' :disabled='false' />
            </el-form-item>
            <el-form-item label='性别' prop='sex'>
                <el-radio-group style='margin: 0 auto;' v-model='ruleForm.sex' :disabled='false'>
                    <el-radio label='男' >男</el-radio>
                    <el-radio label='女' >女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='电话' prop='phone'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.phone' autocomplete='off' />
            </el-form-item>
            <el-form-item label='密码' prop='tpassword'>
                <el-input style='width: 600px;margin: 5px 0;' v-model='ruleForm.tpassword' autocomplete='off' />
            </el-form-item>
            <el-form-item>
                <el-button style='margin: 0 auto;' type='primary' @click='submitForm(ruleFormRef)'>修改</el-button>
                <el-button style='margin: 0 auto;' type='primary' @click='resetForm(ruleFormRef)'>Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import axios from 'axios';
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const checkAge = (_rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('Please input the age'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('Please input digits'))
        } else {
            if (value < 18) {
                callback(new Error('Age must be greater than 18'))
            } else {
                callback()
            }
        }
    }, 1000)
}


const ruleForm = ref({
    tid: '',
    tname: '',
    departmentName: '',
    tsId: '',
    phone: '',
    age: '',
    sex: '',
    tpassword: ''
})
axios({
    method: 'Get',
    url: '/api/myInformationServlet',
    params: { tid: localStorage.getItem('tid') }
}).then(function (result) {
    console.log(result);
    ruleForm.value = result.data.data;
    console.log(ruleForm.value);
})

const rules = reactive<FormRules<typeof ruleForm>>({
    age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios({
                method: 'POST',
                url: '/api/myInformation',
                data: ruleForm.value
            }).then(function (result) {
                if(result.data.flag){
                    alert('修改成功')
                }else{
                    alert(result.data.message)
                }
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script> 
<p>传入的参数tname和tpassword进入后端后就为空</p>
<p>根据提供的代码，无法确定为什么参数'tname'和'tpassword'在后端为空。您可以检查以下几个方面来排查问题：</p>
<ol>
<li>
<p>前端传参问题：确保在发送请求之前，'ruleForm'对象的'tname'和'tpassword'属性有正确的值。您可以在控制台打印输出这两个属性的值，以确认它们是否被正确地赋值。</p>
</li>
<li>
<p>后端接收参数问题：检查后端接口代码，确保它能正确地解析和接收前端传递的参数。您可以在后端接口中打印输出接收到的参数值，以确认它们是否为空。</p>
</li>
<li>
<p>数据传输格式问题：确认前端发送请求时使用的数据格式与后端接口所期望的数据格式一致。例如，如果后端接口期望的是JSON格式的数据，您可以使用axios的<code>headers</code>属性设置请求头的<code>Content-Type</code>为<code>application/json</code>。</p>
</li>
<li>
<p>后端逻辑问题：检查后端代码，确保它能正确地处理接收到的参数并进行相应的操作。您可以在后端代码中进行调试，以确认参数是否正确传递给了相关的方法或函数。</p>
</li>
</ol>
<p>通过检查以上几个方面，您应该能够找到问题所在并解决它。如果问题仍然存在，请提供更多的代码和错误信息，以便我们能够更好地帮助您。</p>