修改教师信息 - 教师管理系统

<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>import { createRouter, createWebHistory,RouteRecordRaw } from 'vue-router'
const routes:Array<RouteRecordRaw>=[<br />
{<br />
path:'/',<br />
name:'LoginA',<br />
component:()=&gt;import('../components/main/LoginA.vue'),</p>
<pre><code>},  
// {  
//     path:'/forgetPassword',  
//     name:'ForgetPassword',  
//     component:()=&gt;import('../components/main/ForgetPassword.vue'),  

// },  
{  
    path:'/student',  
    name:'Student',  
    component:()=&gt;import('../views/Student.vue'),  
    redirect:'/chart',  
    children:[  
        {  
            path:'/selectCourse',  
            name:'SelectCourse',  
            component:()=&gt;import('../components/main/SelectCourse.vue'),  

        },  
        {  
            path:'/updateStudentInfo',  
            name:'Update',  
            component:()=&gt;import('../components/main/UpdateStudentInfo.vue'),  

        },  
        {  
            path:'/selectedCourse',  
            name:'SelectedCoures',  
            component:()=&gt;import('../components/main/SelectedCourse.vue'),  

        },  
        {  
            path:'/selectStudentScore',  
            name:'SelectStudentScore',  
            component:()=&gt;import('../components/main/SelectStudentScore.vue'),  


        },  
        {  
            path:'/courseAssessChart/:id',  
            name:'CourseAssessChart',  
            component:()=&gt;import('../components/chart/CourseAssessChart.vue')  
        },  
        {  
            path:'/chart',  
            name:'Chart',  
            component:()=&gt;import('../components/chart/chart1.vue')  
        }  
    ]  
},  
{  
    path:'/manager',  
    name:'Manager',  
    component: () =&gt; import('../views/Manager.vue'),  
    children: [  
        {  
            path: '/findAllTeacher',  
            name: 'findAllTeacher',  
            component: () =&gt; import('../components/main/findAllTeacher.vue'),  
        },  
        {  
            path:'paySalary',  
            name:'paySalary',  
            component: () =&gt;import ('../components/main/findAllTeacher.vue')  
        },  
        {  
            path:'addTeacher',  
            name:'addTeacher',  
            component: () =&gt; import('../components/main/AddTeacher.vue')  
        },  
        {  
            path:'creatClass',  
            name:'creatClass',  
            component:() =&gt; import('../components/main/creatClass.vue')  
        },  
        {  
            path:'selectClassStudent',  
            name:'selectClassStudent',  
            component:() =&gt; import('../components/main/selectClassStudent.vue')  
        },  

    ]  
},  

{  
    path:'/parent',  
    name:'Parent',  
    component: () =&gt; import('../views/Parent.vue'),  
    children:[  
        {  
            path:'/FindTeacher',  
            name:'FindTeacher',  
            component:()=&gt;import('../components/main/FindTeacher.vue')  
        },  
        {  
            path:'/FindStudentMark',  
            name:'FindStudentMark',  
            component:()=&gt;import('../components/main/FindStudentMark.vue')  
        },  
    ]  
},  

{  
    path:'/login',  
    component:()=&gt;import('../views/Login.vue')  
},  
{  
    path:'/loginPar',  
    name:'LoginPar',  
    component:()=&gt;import('../components/main/LoginPar.vue'),  
},  

{  
    path:'/loginAdmin',  
    name:'LoginAdmin',  
    component:()=&gt;import('../components/main/LoginAdmin.vue'),  
},  

{  
    path:'/registerPar',  
    name:'RegisterPar',  
    component:()=&gt;import('../components/main/RegisterPar.vue')  
},  
{  
    path:'/sendMail',  
    name:'SendMail',  
    component:()=&gt;import('../components/main/SendMail.vue')  
},  
{  
    path:'/courseAssess/:id&amp; :name',  
    name:'CourseAssess',  
    component:()=&gt;import('../views/CourseAssess.vue')  
},  
{  
    path:'/Teacher',  
    name:'Teacher',  
    component: () =&gt; import('../views/Teacher.vue'),  
    children:[  
        {  
            path:'/teacher/MyInformation',  
            name:'MyInformation',  
            component:() =&gt; import('../components/main/MyInformation.vue')  
        },  
        {  
            path: '/teacher/MyClass',  
            name:'MyClass',  
            component: () =&gt; import('../components/main/MyClass.vue')  
        },  
        {  
            path: '/teacher/ChockIn',  
            name:'ChockIn',  
            component: () =&gt; import('../components/main/ChockIn.vue')  
        }  
    ]  
},  
</code></pre>
<p>]</p>
<p>const router=createRouter({<br />
history:createWebHistory(),<br />
routes<br />
})</p>
<p>export default router</p>
<p>package com.hongmao.web.servlet;</p>
<p>import com.fasterxml.jackson.databind.ObjectMapper;
import com.google.gson.Gson;
import com.hongmao.pojo.ResultInfo;
import com.hongmao.pojo.Student;
import com.hongmao.pojo.Teacher;
import com.hongmao.service.StudentService;
import com.hongmao.service.TeacherService;
import com.hongmao.service.impl.StudentServiceImpl;
import com.hongmao.service.impl.TeacherServiceImpl;</p>
<p>import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;</p>
<p>/**</p>
<ul>
<li>
<p>@author 张锐</p>
</li>
<li>
<p>@version 2023.1</p>
</li>
<li>
<p>@date 2023/8/25 16:54 星期五
*/
@WebServlet('/myInformation')
public class MyInformation extends HttpServlet {</p>
<p>@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Gson gson = new Gson();
Teacher teacher = gson.fromJson(request.getReader(), Teacher.class);
TeacherService teacherService = new TeacherServiceImpl();
int i = teacherService.updateInfo(teacher);
ResultInfo resultInfo = new ResultInfo();
if (i &gt; 0) {
resultInfo.setFlag(true);
resultInfo.setMessage('修改成功');
} else {
resultInfo.setFlag(false);
resultInfo.setMessage('修改失败');
}
ObjectMapper mapper = new ObjectMapper();
response.setContentType('application/json;charset=utf-8');
mapper.writeValue(response.getWriter(), resultInfo);
}</p>
<p>@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}</p>
</li>
</ul>
<p>package com.hongmao.dao.impl;</p>
<p>import com.alibaba.druid.util.JdbcUtils;
import com.hongmao.dao.TeacherDao;
import com.hongmao.pojo.Teacher;
import com.hongmao.util.DruidUtil;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;</p>
<p>/**</p>
<ul>
<li>
<p>@author 刘宇峰</p>
</li>
<li>
<p>@version 1.8</p>
</li>
<li>
<p>@date 2023/8/20 11:01 星期日
*/
public class TeacherDaoImpl implements TeacherDao {
JdbcTemplate jt=new JdbcTemplate(DruidUtil.getDs());</p>
<p>//通过教师的Tid 找到本月考勤和教师职称---来算出本月应该发放的薪水</p>
<p>@Override
public boolean addTeacher(Teacher teacher) {
String sql='insert into teacher values(null,?,?,?,?,?,?,?)';
int update=jt.update(sql,teacher.getTName(),teacher.getTPassword(),teacher.getAge(),teacher.getSex(),
teacher.getTsId(),teacher.getPhone(),teacher.getDepartmentName());
if(update&gt;0){
return true;
}
return false;
}</p>
<p>@Override
public int updateTeacher(Teacher teacher) {
String sql = 'update teacher set tName=?, age=?, sex=?, phone=?,tpassword=? where tId=?';
System.out.println(teacher);
return jt.update(sql, teacher.getTName(), teacher.getAge(), teacher.getSex(), teacher.getPhone(),teacher.getTPassword(), teacher.getTid());
}</p>
<p>@Override
public Teacher selectInfo(int tid) {
try {
String sql = 'select * from teacher where tid=?';
return jt.queryForObject(sql, new BeanPropertyRowMapper&lt;&gt;(Teacher.class), tid);
} catch (DataAccessException e) {
return null;
}
}</p>
<p>@Override
public Teacher login(int tid, String tPassword) {
String sql='select * from teacher where tid=? and tPassword=?';
try {
return jt.queryForObject(sql,new BeanPropertyRowMapper&lt;&gt;(Teacher.class),tid,tPassword);
} catch (DataAccessException e) {
return null;
}
}
}</p>
</li>
</ul>
<p>为什么点击修改按钮后传入的参数tname和tpassword会为空</p>