前端页面开发｜校园二手平台全局公共组件、个人中心页面代码详解

全站公共组件 + 个人信息修改页面完整代码实现

一、模块需求

1. 全局顶部导航栏：展示平台名称、登录用户昵称、头像、个人中心入口；
2. 统一空白占位组件，无数据页面通用；
3. 个人中心页面：展示头像、昵称、学号；支持修改昵称、上传更换头像；
4. 统一弹窗、消息提示工具，全站复用。

二、核心前端代码

1. 全局导航组件 layout-header.vue，判断登录状态展示用户信息，未登录显示登录按钮；
2. 个人中心表单

vue

<el-form :model="userForm"> <el-form-item label="头像"> <el-upload action="/api/upload/img" :on-success="avatarSuccess"> <el-image :src="userForm.avatar"></el-image> </el-upload> </el-form-item> <el-form-item label="昵称"> <el-input v-model="userForm.username"></el-input> </el-form-item> <el-button @click="saveInfo">保存修改</el-button> </el-form>

1. 头像上传成功后调用后端用户信息更新接口，刷新本地用户信息。

三、后端配套接口

用户信息查询、用户昵称 / 头像更新接口，简单参数接收与数据库更新。

四、页面运行截图

【此处插入：全站顶部导航栏、个人中心主页、修改头像弹窗、空白无数据占位组件】

五、封装思想总结

公共组件抽离重复 UI，全局 Axios 统一处理请求逻辑，实现一次封装、全站复用，降低代码冗余，后期修改样式、弹窗提示只需修改一处，无需改动所有页面。