Vue + Element做个个人中心玩玩~_vue3+element 实现个人信息页

文章目录

• 前言
• 个人空间
• 信息修改
• • 基本信息实现
  • 信息修改实现
  • 头像修改实现
  • 账号管理实现
• 文章列表实现
• 收藏实现
• • 问答收藏
  • 文章收藏
• 总结

前言

最近想要换个脑子玩玩，写个页面玩玩~

先看看效果：

后面加个路由超链接，嘿嘿~

个人空间

我们先来聊聊主要的这个玩意，也就是咱们的入口。

对应的路由是：
这里面的组件可不少，里面还有很多分组件，没写，有空我就写写。

  {
      path: '/myspace',
      name: 'myspace',
      component: myspace,
      children:[
        {
          path: 'showinfo',
          name: 'showinfo',
          component: showinfo
        },
        {
          path: 'infoeditor',
          name: 'infoeditor',
          component: infoeditor,
        },
        {
          path: 'countcontrol',
          name: 'countcontrol',
          component: countcontrol,
        },
        {
          path: 'imageUp',
          name: 'imageUp',
          component: imageUp
        },
        {
          path: 'privateAarticle',
          name: 'privateAarticle',
          component: privateAarticle,
        },
        {
          path: 'publicArticle',
          name: 'publicArticle',
          component: publicArticle,
        },
        {
          path: '',
          name: 'allArticle',
          component: allArticle,
        },
        {
          path: 'columnArticle',
          name: 'columnArticle',
          component: columnArticle
        },
        {
          path: 'statusArticle',
          name: 'statusArticle',
          component: statusArticle
        },
        {
          path: 'mycolums',
          name: 'mycolums',
          component: mycolums
        },
        {
          path: 'myjoincolums',
          name: myjoincolums,
          component: myjoincolums
        },
        {
          path: 'collectionAns',
          name: collectionAns,
          component: collectionAns
        },
        {
          path: 'collectionArticle',
          name: collectionArticle,
          component: collectionArticle
        },
        {
          path: 'collectionColums',
          name: collectionColums,
          component: collectionColums
        }
      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

个人空间导航代码如下：

<template>
  <div>
    <el-container style="height: 600px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改</template>
            <el-menu-item-group>

              <router-link class="alink" to="/myspace/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/myspace/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/myspace/imageUp">
                <el-menu-item index="1-3">

                  头像修改

                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/myspace/countcontrol">
                <el-menu-item index="1-4">

                    账号管理

                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理</template>
            <el-menu-item-group>
              <router-link class="alink" to="/myspace/privateAarticle">
                <el-menu-item index="2-1">
                  私密文章
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/myspace/publicArticle">
                <el-menu-item index="2-2">
                  PUBLIC
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/myspace">
                <el-menu-item index="2-3">
                  全部文章
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/myspace/columnArticle">
                <el-menu-item index="2-4">
                  我的专栏
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/myspace/statusArticle">
                <el-menu-item index="2-5">
                  审核状态
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writeblog">
                <el-menu-item index="3-1">
                  文章书写
                </
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92