创新实训记录（九）

前言

本篇博客记录个人信息维护功能后端接口，页面以及实现效果。

后端接口

路由地址：
user/getuser_info获取个人信息
user/update_info更新个人信息

app.post(self.generate_route_path(["update_info"]), tags=self.tag, summary="更新用户信息")(user_service.update_info)
app.post(self.generate_route_path(["getuser_info"]), tags=self.tag, summary="获取用户信息")(user_service.get_user_info)

更新个人信息接口逻辑：根据前端传过来的信息对用户进行更新。

async def update_info(info_form: InfoForm, current_user: User = Depends(get_current_active_user)):
    """
       用户更新个人信息接口
       info_form 包含 name ,age,sex,description 字段
    """
    session = Session(bind=engine)
    try:
        # 根据用户ID查询用户
        user = session.query(User).filter(User.id == info_form.user_id).first()
        if not user:
            raise HTTPException(status_code=404, detail="用户不存在")

        # 更新用户信息
        user.name = info_form.name
        user.age = info_form.age
        user.sex = info_form.sex
        user.description = info_form.description

        session.commit()
        return {"code": 200, "message": "个人信息更新成功"}

    except Exception as e:
        session.rollback()  # 发生异常时回滚事务
        raise HTTPException(status_code=500, detail="个人信息更新失败，请重试")
    finally:
        session.close()

async def get_user_info(info_form: InfoForm, current_user: User = Depends(get_current_active_user)):
    """
       获取用户个人信息接口
    """
    session = Session(bind=engine)
    # 根据用户ID查询用户
    user = session.query(User).filter(User.id == info_form.user_id).first()

    print(user.sex)
    return BaseResponse(code=200, msg='用户信息获取成功', data={"name": user.name, 'age': user.age, 'sex': user.sex, 'description': user.description})

前端页面

• 必须填写所有信息才能正确更新。
• 年龄限定在1到100之间。

    <div class="user-profile">
        <div class="form-container">
            <h1>更新用户信息</h1>
            <form @submit.prevent="updateUser">
                <div class="form-group">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" v-model="user.name" required>
                </div>
                <div class="form-group">
                    <label for="age">年龄:</label>
                    <input type="number" id="age" v-model.number="user.age" @input="validateAge" required>
                    <span v-if="ageError" class="error-message">年龄必须在1到100之间</span>
                </div>
                <div class="form-group">
                    <label for="sex">性别:</label>
                    <select id="sex" v-model="user.sex" required>
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="description">个人介绍:</label>
                    <textarea id="description" v-model="user.description" required></textarea>
                </div>
                <button type="submit" :disabled="!isFormValid">更新</button>
            </form>
        </div>
    </div>

 created() {
        this.user.user_id = localStorage.getItem('user_id')
        this.getuser_info()
    },
    ![请添加图片描述](https://img-blog.csdnimg.cn/direct/b38198b6368c47e6859eca7a1306b82e.png)

 getuser_info(){
            getuser_info(this.user).then(res => {
                this.user.name = res.data.data.name;
                this.user.age = res.data.data.age;
                this.user.description = res.data.data.description;
                this.user.sex = res.data.data.sex;
                console.log(this.user);
            }).catch(e => {
                console.log(e)
            })
        },
 updateUser() {
            // console.log(this.user)
            update_info(this.user).then(res => {
                // console.log("用户信息已更新:", this.user);
                this.getuser_info();
                alert("用户信息已更新!");
            }).catch(e => {
                console.log(e)
            })
        },
validateAge() {
            // 检查年龄是否在1到100之间
            this.ageError = this.user.age < 1 || this.user.age > 100;
            this.isFormValid = !this.ageError; // 更新表单验证状态
        },

效果展示