20260122

今天晚上把个人信息表完善了

先展示一下UserController和UserService新增的两个方法

因为今天写的大多是前端界面，所以补的后端代码很少

UserController

    @GetMapping("/user/info")
    public User getUserById(@RequestParam String id) {
        return userService.getUserById(id);
    }

    @PutMapping("/user/update")
    public String update(@RequestBody User user){
        userService.updateUserById(user);
        return "0";
    }

UserService

    public User getUserById(String id) {
        return userMapper.selectById(id);
    }

    public void updateUserById(User user) {
        userMapper.updateById(user);
    }

下面是前端新写的

home.vue

<template>
  <div>你好,用户{{ user.id }}</div><br>
  <router-link to="/userinfo">用户信息</router-link><br>
  <router-link to="/test">测试页面</router-link>
</template>
<script>
import axios from 'axios';
import { userStore } from '../../store/user';

  export default {
    data(){
      return {
        user:{}
      }
    },
    created(){
      this.user = userStore();
      axios.get('http://localhost:8080/user/inf o', {
        params: {
          id: this.user.id
        }
      }).then(res => {
        const userInfo = res.data
        this.user.id=userInfo.id
        this.user.name=userInfo.name
        this.user.sex=userInfo.sex
        this.user.birthday=userInfo.birthday
      })
    }
  }
</script>

userinfo

<template>
  <div>用户信息</div>
  <br>
  <table>
    <tbody>
      <tr>
        <td>账号</td>
        <td>{{ user.id?user.id:"无" }}</td>
        <td v-if="updateShow">不可修改</td>
      </tr>
      <tr>
        <td>姓名</td>
        <td>{{ user.name?user.name:"无" }}</td>
        <td v-if="updateShow"><input type="text" v-model="updateInfo.name"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td>{{ user.sex?user.sex:"无" }}</td>
        <td v-if="updateShow"><select v-model="updateInfo.sex">
          <option>男</option>
          <option>女</option>
        </select></td>
      </tr>
      <tr>
        <td>生日</td>
        <td>{{ user.birthday?user.birthday:"无" }}</td>
        <td v-if="updateShow"><input type="date" v-model="updateInfo.birthday"></td>
      </tr>
      <tr>
        <td>民族</td>
        <td>{{ user.nationality?user.nationality:"无" }}</td>
        <td v-if="updateShow"><input type="text" v-model="updateInfo.nationality"></td>
      </tr>
      <tr>
        <td>学历</td>
        <td>{{ user.education?user.education:"无" }}</td>
        <td v-if="updateShow"><select v-model="updateInfo.education">
          <option>小学及以下</option>
          <option>初中</option>
          <option>高中</option>
          <option>专科</option>
          <option>本科</option>
          <option>研究生</option>
          <option>博士及以上</option>
        </select></td>
      </tr>
      <tr>
        <td>宗教信仰</td>
        <td>{{ user.religion?user.religion:"无" }}</td>
        <td v-if="updateShow"><select v-model="updateInfo.religion">
          <option>无</option>
          <option>佛教</option>
          <option>道教</option>
          <option>基督教</option>
          <option>伊斯兰教</option>
          <option>其他</option>
        </select></td>
      </tr>
      <tr>
        <td>婚姻状况</td>
        <td>{{ user.marriage?user.marriage:"无" }}</td>
        <td v-if="updateShow"><select v-model="updateInfo.marriage">
          <option>未婚</option>
          <option>已婚</option>
          <option>离异</option>
          <option>丧偶</option>
        </select></td>
      </tr>
      <tr>
        <td>居住情况</td>
        <td>{{ user.residence?user.residence:"无" }}</td>
        <td v-if="updateShow"><select v-model="updateInfo.residence">
          <option>独居</option>
          <option>与配偶/伴侣居住</option>
          <option>与子女居住</option>
          <option>与父母居住</option> 
          <option>与兄弟姐妹居住</option>
          <option>与其他亲属居住</option>
          <option>与非亲属关系的人居住</option>
          <option>养老机构</option>
        </select></td>
      </tr>
      <tr>
        <td>经济来源</td>
        <td>{{ user.financial?user.financial:"无" }}</td>
        <td v-if="updateShow"><select v-model="updateInfo.financial">
          <option>务工</option>
          <option>务农</option>
          <option>退休金/养老金</option>
          <option>子女补贴</option>
          <option>亲友资助</option>
        </select></td>
      </tr>
      <tr>
        <td>精神类疾病</td>
        <td>{{ user.disease?user.disease:"无" }}</td>
        <td v-if="updateShow"><input type="text" v-model="updateInfo.disease"></td>
      </tr>
    </tbody>
  </table>
  <br>
  <router-link to="/home">返回首页</router-link>
  <button @click="change" v-if="!updateShow">修改</button>
  <button @click="update" v-if="updateShow">保存修改</button>
  <button @click="cancel" v-if="updateShow">取消</button>
  <button @click="test" v-if="updateShow">test</button>
</template>
<script>
import axios from 'axios';
import { userStore } from '../../store/user';

export default {
  data(){
    return {
      user:{},
      updateShow:false,
      updateInfo:{}
    }
  },
  created(){
    this.user = userStore();
    axios.get('http://localhost:8080/user/info', {
      params: {
        id: this.user.id
      }
    }).then(res => {
      this.user=res.data
      this.updateInfo={...res.data}
      console.log(this.updateInfo)
    })
  },
  methods:{
    change(){
      this.updateShow=!this.updateShow;
    },
    update(){
      axios.put('http://localhost:8080/user/update',this.updateInfo,
      ).then(res=>{
        switch(String(res.data)){
          case '0':
            alert('修改成功');
            this.updateShow=!this.updateShow;
            this.user={...this.updateInfo};
            break;
          default:
            alert('修改失败:'+res.data);
            break;
        }
      })
    },
    cancel(){
      this.updateShow=!this.updateShow;
    },
    test(){
      console.log(this.updateInfo)
    }
  }
}
</script>

啊，累死了