全站公共组件 个人信息修改页面完整代码实现一、模块需求全局顶部导航栏展示平台名称、登录用户昵称、头像、个人中心入口统一空白占位组件无数据页面通用个人中心页面展示头像、昵称、学号支持修改昵称、上传更换头像统一弹窗、消息提示工具全站复用。二、核心前端代码全局导航组件 layout-header.vue判断登录状态展示用户信息未登录显示登录按钮个人中心表单vueel-form :modeluserForm el-form-item label头像 el-upload action/api/upload/img :on-successavatarSuccess el-image :srcuserForm.avatar/el-image /el-upload /el-form-item el-form-item label昵称 el-input v-modeluserForm.username/el-input /el-form-item el-button clicksaveInfo保存修改/el-button /el-form头像上传成功后调用后端用户信息更新接口刷新本地用户信息。三、后端配套接口用户信息查询、用户昵称 / 头像更新接口简单参数接收与数据库更新。四、页面运行截图【此处插入全站顶部导航栏、个人中心主页、修改头像弹窗、空白无数据占位组件】五、封装思想总结公共组件抽离重复 UI全局 Axios 统一处理请求逻辑实现一次封装、全站复用降低代码冗余后期修改样式、弹窗提示只需修改一处无需改动所有页面。