Vue.js 实战系列之实现视频类WebApp的项目开发——15. 用户信息编辑页面的实现

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

实现效果

---

功能实现

1. 创建顶部导航条组件

   我们发现，在项目中很多地方都用到了顶部导航条，所以就可以考虑将其封装成一个高可复用性的组件来使用。

   在 src/common/components/index 目录下新建 Header.vue

   因为要实现高可复用性，所以组件的内容都需要通过外部组件传递进来，通过 props 进行接收使用。

   返回上一层我们通过 $router.back() 来实现

   <template>
     <div class="header">
       <div class="left" v-if="hasLeft">
         <span class="iconfont icon-fanhui" v-if="isBack" @click="$router.back()" ></span>
         <span class="iconfont icon-guanbi" v-if="isClose" @click="$router.go(-1)" ></span>
       </div>
       <div class="title">
         <span>{{ title }}</span>
       </div>
       <div class="right" v-if="hasRight">
         <span>{{ rightText }}</span>
       </div>
     </div>
   </template>
   
   <script>
   export default {
       props: {
           title: {
               type: String,
               default: '',
               required: true,
           },
           hasLeft: {
               type: Boolean,
               default: true,
           },
           hasRight: {
               type: Boolean,
               default: false,
           },
           rightText: {
               type: String,
               default: '',
           },
           isBack: {
               type: Boolean,
               default: true,
           },
           isClose: {
               type: Boolean,
               default: false,
           },
       },
   };
   </script>
   
   <style lang="less" scoped>
   .header {
     height: 48px;
     width: 100%;
     background-color: #101821;
     color: #eee;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     padding: 0 10px;
     box-sizing: border-box;
     .left {
         position: absolute;
         left: 10px;
       .iconfont {
         font-size: 24px;
       }
     }
   }
   </style>
   

   公用组件完成了就可以在需要用的地方引入使用了。

   实现效果：
   

2. 用户信息编辑页面实现

   1. 创建相关路由

      在 src/router/index.js 中添加以下代码

   {
       path: '/edit',
       name: 'edit',
       component: () => import(/* webpackChunkName: "edit" */ '../views/mine/editInfo.vue'),
   },
   

   2. 在 src/views/mine 目录下新建 editInfo.vue

   <template>
     <div class="edit">
       <Header title="编辑资料" hasLeft></Header>
       <div class="edit-wrap">
         <div class="avatar-box">
           <div class="avatar">
             <img :src="userInfo.avathor" />
             <span class="iconfont icon-xiangji"></span>
             <input type="file" />
             <p>点击更换头像</p>
           </div>
         </div>
         <div class="edit-box">
           <div class="edit-item">
             <span class="label">名称</span>
             <span>
               {{ userInfo.name }}
               <span class="iconfont icon-right"></span>
             </span>
           </div>
           <div class="edit-item">
             <span class="label">抖音号</span>
             <span>
               {{ userInfo.dyh }}
               <span class="iconfont icon-right"></span>
             </span>
           </div>
           <div class="edit-item">
             <span class="label">简介</span>
             <span class="desc">
               点击设置
               <span class="iconfont icon-right"></span>
             </span>
           </div>
           <div class="edit-item">
             <span class="label">性别</span>
             <span>
               {{ userInfo.sex }}
               <span class="iconfont icon-right"></span>
             </span>
           </div>
           <div class="edit-item">
             <span class="label">生日</span>
             <span>
               {{ userInfo.birthday }}
               <span class="iconfont icon-right"></span>
             </span>
           </div>
           <div class="edit-item">
             <span class="label">所在地</span>
             <span>
               {{ userInfo.region }}
               <span class="iconfont icon-right"></span>
             </span>
           </div>
           <div class="edit-item">
             <span class="label">学校</span>
             <span>
               {{ userInfo.school === "" ? "点击设置" : userInfo.school }}
               <span class="iconfont icon-right"></span>
             </span>
           </div>
         </div>
       </div>
     </div>
   </template>
   
   <script>
   import Header from '@/common/components/index/Header.vue';
   import { mapState } from 'vuex';
   
   export default {
       components: {
           Header,
       },
       // 计算属性，监控userInfo
       computed: {
           ...mapState({
               userInfo: (state) => state.user.userInfo,
           }),
       },
   };
   </script>
   
   <style lang="less" scoped>
   .edit {
     background-color: #101821;
     color: #fff;
     min-height: 100vh;
     .edit-wrap {
       padding: 0 15px;
       box-sizing: border-box;
       .avatar-box {
         color: #ffffff;
         text-align: center;
         padding: 20px;
         .avatar {
           position: relative;
           .iconfont {
             position: absolute;
             font-size: 30px;
             left: 50%;
             top: calc(50% - 20px);
             transform: translate(-50%, -50%);
           }
           img {
             height: 100px;
             width: 100px;
             border-radius: 50%;
             opacity: 0.5;
           }
           input {
             position: absolute;
             left: 50%;
             top: 50%;
             width: 50%;
             transform: translate(-50%, -50%);
             opacity: 0;
           }
           p {
             font-size: 16px;
           }
         }
       }
     }
     .edit-box {
       border-top: 1px solid #292831;
       color: #919191;
       .edit-item {
         display: flex;
         justify-content: space-between;
         line-height: 60px;
         font-size: 16px;
         .label {
           color: #ffffff;
         }
         .icon-right {
           font-size: 20px;
         }
       }
     }
   }
   </style>
   
   

   3. 给 mine/index.vue 页面添加跳转时间，从用户信息页面跳转到用户信息编辑页面

   gotoEdit() {
   	this.$router.push({ name: 'edit' });
   },
   

---

总结

本章节需要注意的几个点：

• 路由的配置，这个页面跳到的是单独的一个页面，此页面不显示底部的tab栏，所以不能将此页面配置在 Home 的 children 下
• 公共组件的提取，实现组件的高可复用性

---

上一章节： 14. 用户信息界面实现

下一章节： 16. 用户信息编辑提交保存的实现

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

---

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。