如何使用Vue+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
        }
      ]
    },

个人空间导航代码如下：

信息修改

由于每一个的组件都有一个分类，每一个分类的实现都是类似的，所以我们挑三个说说就行了，文章书写是一个超链接，会通向这儿，这个先去说过，我就不重复了。

基本信息实现

这个是展示，没什么copy组件的事儿

信息修改实现

这个也没啥就是这个

头像修改实现

然后是我的祖传代码，不过这次优化了一下

账号管理实现

这个其实就是修改账号，后面我想单独做大一点，所以要单独分开，例如信息验证，学历验证，专家验证啥的。

文章列表实现

这个部分是这样的

由于都是类似的，所以我直接把那个全部文章的代码拿出来

收藏实现

然后是收藏这个也是类似的

问答收藏

文章收藏

后面那个社区收藏是和问答收藏类似的，所以就这样了。

总结

其实做这个东西用组件开发是很快的，麻烦的就是美感，怎么放置，后面就好办了，写你的小接口，和后端打交道，其实看目前的前端视图也知道，功能很多，目前为了便于维护也是要走分布式架构的，这次我想玩玩多语言开发~

到此这篇关于如何使用Vue+Element做个个人中心的文章就介绍到这了,更多相关Vue+Element个人中心内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！