vue+elementui写一个个人信息页面,要求包含用户id,用户名称,用户密码,用户手机,用户地址,个性签名,用户头像,要求有布局且铺满页面,头像为圆框并且用img,修改信息的接口路径为/config/sysmalluser/update
时间: 2023-09-30 14:05:31 浏览: 116
vue实现个人信息查看和密码修改功能
5星 · 资源好评率100%
可以使用Vue和Element UI来创建一个个人信息页面。首先,你需要安装Vue和Element UI的相关依赖。
在你的Vue组件中,你可以使用`el-row`和`el-col`来创建页面布局,并使用`el-input`和`el-avatar`等元素来展示用户信息。
下面是一个简单的示例代码:
```html
<template>
<div>
<el-row>
<el-col :span="24">
<h1>个人信息</h1>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form label-width="100px" :model="userInfo">
<el-form-item label="用户ID">
<el-input v-model="userInfo.id"></el-input>
</el-form-item>
<el-form-item label="用户名称">
<el-input v-model="userInfo.name"></el-input>
</el-form-item>
<el-form-item label="用户密码">
<el-input v-model="userInfo.password" type="password"></el-input>
</el-form-item>
<el-form-item label="用户手机">
<el-input v-model="userInfo.phone"></el-input>
</el-form-item>
<el-form-item label="用户地址">
<el-input v-model="userInfo.address"></el-input>
</el-form-item>
<el-form-item label="个性签名">
<el-input v-model="userInfo.signature"></el-input>
</el-form-item>
<el-form-item label="用户头像">
<el-avatar :src="userInfo.avatar" :size="100"></el-avatar>
</el-form-item>
<el-button type="primary" @click="updateUserInfo">保存</el-button>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
id: '',
name: '',
password: '',
phone: '',
address: '',
signature: '',
avatar: ''
}
};
},
methods: {
updateUserInfo() {
// 调用接口路径为/config/sysmalluser/update,传递用户信息进行更新
// 使用axios或其他HTTP库向后端发送请求
}
}
};
</script>
<style>
/* 添加样式以使头像为圆形 */
.el-avatar img {
border-radius: 50%;
}
</style>
```
这是一个基本的个人信息页面示例,你可以根据需要进行修改和扩展。记得在`updateUserInfo`方法中调用后端接口`/config/sysmalluser/update`以更新用户信息。你可以使用axios或其他HTTP库来发送请求。
希望这可以帮助到你!
阅读全文