Vue+element ui实现好看的个人中心

目录

• 一、效果图
• 二、项目结构
• 三、界面效果和代码实现
• • 1.路由注册
  • 2.个人主页实现
  • 3.编辑弹窗按钮实现
  • 4.个人简介实现
  • 5.发贴页实现
  • 6.收藏页实现
  • 7.关注和收藏页实现
• 四、总结

---

一、效果图

仿照原神社区的个人中心写了个个人中心界面，下图分别为原神社区个人中心主页和我画的个人中心的效果图：

原神社区个人中心效果图：

我画的个人中心效果图：

---

下面上代码

二、项目结构

router文件夹里的index.js为路由注册文件，person文件夹里Info文件为个人简介页，MyArticle文件为发布页，MyCollect为文件收藏页，MyFanAndFollow文件为粉丝和关注页，Personal文件为个人中心主页，PersonalDia文件为编辑按钮弹窗。

三、界面效果和代码实现

1.路由注册

首先要去router文件夹的index.js文件进行路由注册

代码如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/',
          component: r => require.ensure([], () => r(require('@/views/Index')), 'index')
        },
        {
          path: '/newsuser/personal/:id',
          component: r => require.ensure([], () => r(require('@/views/person/Personal')), 'personal'),
          meta: {
            requireLogin: true
          },
          children: [
            {
              // path: '/personal/info/:id',
              path: '/newsuser/personal/info/:id',
              name:'info',
              component: r => require.ensure([], () => r(require('@/views/person/Info')), 'info')
            },
            {
              path:'/newsuser/personal/myarticle/:id',
              name:'myarticle',
              component: r => require.ensure([], () => r(require('@/views/person/MyArticle')), 'myarticle')
            },
            {
              path:'/newsuser/personal/mycollect/:id',
              name:'mycollect',
              component: r => require.ensure([], () => r(require('@/views/person/MyCollect')), 'mycollect')
            },
            {
              path:'/newsuser/personal/myfan/:id',
              name:'myfan',
              component: r => require.ensure([], () => r(require('@/views/person/MyFanAndFollow')), 'myfan')
            },
            {
              path:'/newsuser/personal/myfollow/:id',
              name:'myfollow',
              component: r => require.ensure([], () => r(require('@/views/person/MyFanAndFollow')), 'myfollow')
            }
          ]
        }
      ]
    },
  
export default router

2.个人主页实现

Personal.vue:

<template>
  <div>
    <div class="PersonTop">
      <div class="PersonTop_img">
        <img v-image-preview :src="avatar" />
      </div>
      <div class="PersonTop_text">
        <div class="user_text">
          <div class="user_name">
            <span> {
  { nickname }} </span>
          </div>
          <div class="user-v" v-if="v === 3">
            <img src="@/assets/img/V.png" class="user-v-img" />
            <span class="user-v-font">优质媒体作者</span>
          </div>
          <div class="user_qianming">
            <span> {
  { design }}</span>
          </div>
          <div class="user_anniu">
            <el-button
              class="el-icon-edit"
              v-if="this.$route.params.id === this.$store.state.id"
              type="primary"
              size="medium"
              plain
              @click="edit"
              >编辑</el-button
            >
            <el-button
              v-else
              @click="follow"
              type="primary"
              size="medium"
              icon="el-icon-check"
              v-text="
                isfollowid.indexOf(this.$route.params.id) > -1
                  ? '已关注'
                  : '关注'
              "
            ></el-button>
          </div>
        </div>
        <div class="user_num">
          <div style="cursor: pointer" @click="myfan">
            <div class="num_number">{
  { fanCounts }}</div>
            <span class="num_text">粉丝</span>
          </div>
          <div style="cursor: pointer" @click="myfollow">
            <div class="num_number">{
  { followCounts }}</div>
            <span class="num_text">关注</span>
          </div>
          <div>
            <div class="num_number">{
  { goodCounts }}</div>
            <span class="num_text">获赞</span>
          </div>
        </div>
      </div>
    </div>
    <div class="person_body">
      <div class="person_body_left">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span class="person_body_list" style="border-bottom: none"
              >个人中心</span
            >
          </div>
          <!-- <div
            class="person_body_list"
            v-for="(item, index) in person_body_list"
            :key="index"
          >
            <router-link :to="{ name: item.name, params: item.params }">{
  {
              item.label
            }}</router-link>
          </div> -->
          <el-menu
            router
            active-text-color="#00c3ff"
            class="el-menu-vertical-demo"
          >
            <el-menu-item