在app中,更改个人信息的业务逻辑通常是这样的:
1. 前端页面提供一个表单,让用户输入新的个人信息。
2. 用户提交表单时,前端会向后端发送一个请求,将新的个人信息传递给后端。
3. 后端接收到请求后,会根据请求中传递的信息更新用户信息,并将更新后的用户信息返回给前端。
4. 前端接收到后端返回的更新后的用户信息后,将其更新到页面上。
下面是一个前端如何请求及后端 Node 如何返回字段的示例:
前端页面:
<!-- html 页面中提供一个表单,让用户可以输入新的个人名称 -->
<form @submit.prevent="submitForm">
<label for="newName">New Name:</label>
<input type="text" id="newName" v-model="newName" required>
<button type="submit">Submit</button>
</form>
在这里,v-model
指令将用户输入绑定到 newName
变量中,@submit.prevent="submitForm"
指令绑定了表单提交事件,并触发 submitForm
方法。
前端 Vue 组件:
export default {
data() {
return {
newName: '' // 初始化新名称为空字符串
}
},
methods: {
submitForm() {
// 向后端发送 POST 请求,将 newName 传递给后端
axios.post('/api/updateName', { name: this.newName })
.then(response => {
// 成功接收到后端返回的数据,将其更新到页面上
this.$store.commit('updateUserInfo', response.data)
})
.catch(error => {
console.error(error)
})
}
}
}
在这里,axios
是一个常用的 HTTP 库,可以用来发送 HTTP 请求。submitForm
方法会发送一个 POST 请求到 /api/updateName
路径,并将 newName
作为请求体传递给后端。请求成功后,updateUserInfo
方法会将更新后的用户信息保存到 Vuex 状态中,从而更新到页面上。
后端 Node.js API:
app.post('/api/updateName', (req, res) => {
const newName = req.body.name // 从请求体中获取新的个人名称
const userId = req.session.userId // 从 session 中获取用户 ID
// 根据用户 ID 更新用户信息,例如存储到数据库中
updateUser(userId, { name: newName })
// 返回更新后的用户信息
const updatedUser = getUser(userId)
res.json(updatedUser)
})
在这里,app.post('/api/updateName')
会监听一个 POST 请求,并根据请求的数据更新用户信息。例如,可以将新的个人名称存储到数据库中。更新后,通过 getUser(userId)
方法获取更新后的用户信息,并将其作为 JSON 数据返回给前端。前端可以根据返回的数据更新页面上的用户信息。