Vue + Element做个个人中心玩玩~
Posted Huterox
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
]
,
个人空间导航代码如下：
<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">
文章书写
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-postcard"></i>社区</template>
<el-menu-item-group>
<router-link class="alink" to="/myspace/myjoincolums">
<el-menu-item index="4-1">
我的社区
</el-menu-item>
</router-link>
<router-link class="alink" to="/myspace/mycolums">
<el-menu-item index="4-2">
我创建的社区
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-star-on"></i>收藏</template>
<el-menu-item-group>
<router-link class="alink" to="/myspace/collectionAns">
<el-menu-item index="5-1">
问答收藏
</el-menu-item>
</router-link>
<router-link class="alink" to="/myspace/collectionArticle">
<el-menu-item index="5-2">
文章收藏
</el-menu-item>
</router-link>
<router-link class="alink" to="/myspace/collectionColums">
<el-menu-item index="5-3">
社区收藏
</el-menu-item>
</router-link>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container
style="background-image: url(/static/logo/noticesbg.jpg);
background-repeat: no-repeat;
background-size:100% 100%;
"
>
<el-main>
<div style="width: 80%;margin: 0 auto">
<router-view></router-view>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default
name: "myspace",
data()
return
,
</script>
<style scoped>
.el-header
background-color: #e5efe2;
color: #333;
line-height: 60px;
.el-aside
color: #333;
.router-link-active
text-decoration: none;
.alink
text-decoration: none;
</style>
信息修改
由于每一个的组件都有一个分类，每一个分类的实现都是类似的，所以我们挑三个说说就行了，文章书写是一个超链接，会通向这儿，这个先去说过，我就不重复了。
基本信息实现
这个是展示，没什么copy组件的事儿
<template>
<div>
<div style="width:14%;height: 130px;border-radius: 100px;display:inline-block;">
<img
style="width:100%;height: 100%;border-radius: 100px"
src="/static/temporary/headpic.jpg"
class="image"
>
</div>
<br>
<br>
<el-descriptions :column="1" border>
<el-descriptions-item label="用户名" v-model="username" ><p class="message">username</p></el-descriptions-item>
<el-descriptions-item label="邮箱号" v-model="email" class="message"><p class="message">email</p></el-descriptions-item>
<el-descriptions-item label="白洞值" v-model="level" class="message"><p class="message">level</p></el-descriptions-item>
<el-descriptions-item label="座右铭" v-model="motto" class="message" ><p class="message">motto</p></el-descriptions-item>
<el-descriptions-item label="居住地" v-model="city" class="message"><p class="message">city</p></el-descriptions-item>
</el-descriptions>
</div>
</template>
<script>
export default
name: "showinfo",
data()
return
username: "Huterox",
email: 18100000000,
motto: "除非我不想赢，否则没人能让我输",
city: "九江",
level: 9999
</script>
<style scoped>
.message
width: 20em;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
</style>
信息修改实现
这个也没啥就是这个
<template>
<div style="width: 70%;margin-top: 5%">
<el-form :model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-dynamic"
>
<el-form-item
style="width: 49%"
label="昵称修改"
prop="name"
:rules="[
required: true, message: '请注意昵称长度在3~15个字符', trigger: 'blur' ,
min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'
]"
>
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<br>
<el-form-item label="性别" prop="region">
<el-select v-model="ruleForm.sex" placeholder="请选择性别">
<el-option label="男" value="shanghainet core WebApi——尝试企业微信内部应用