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

网络投稿 02-07 8233

目录一、效果图二、项目结构三、界面效果和代码实现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>  <el-menu router active-text-color="#00c3ff" class="el-menu-vertical-demo" > <el-menu-item index="info" :route="{ name: 'info', params: $route.params.id }" > <i class="el-icon-user"></i> <span slot="title">个人简介</span> </el-menu-item> <el-menu-item index="myarticle" :route="{ name: 'myarticle', params: $route.params.id }" > <i class="el-icon-edit-outline"></i> <span slot="title">发帖</span> </el-menu-item> <el-menu-item index="mycollect" :route="{ name: 'mycollect', params: $route.params.id }" > <i class="el-icon-document"></i> <span slot="title">收藏</span> </el-menu-item> <el-menu-item index="myfan" :route="{ name: 'myfan', params: $route.params.id }" > <i class="el-icon-tableware"></i> <span slot="title">粉丝</span> </el-menu-item> <el-menu-item index="myfollow" :route="{ name: 'myfollow', params: $route.params.id }" > <i class="el-icon-circle-plus-outline"></i> <span slot="title">关注</span> </el-menu-item> </el-menu> </el-card> </div> <div class="person_body_right"> <router-view></router-view> </div> </div> <personal-dia ref="dia" @flesh="reload" /> </div> </template> <script> import { userInfo } from "@/api/user"; import { myFollow, addFollow, deleteFollow, followAndFanCount, } from "@/api/follow.js"; import { mygoodCount } from "@/api/good"; import PersonalDia from "./PersonalDia.vue"; export default { components: { PersonalDia }, name: "Personal", inject: ["reload"], data() { return { avatar: "", nickname: "", v: 1, design: "", followCounts: "", fanCounts: "", goodCounts: "", isfollow: true, followData: { fanId: "", followId: "", }, isfollowid: [], }; }, mounted() { this.load(); }, watch: { $route(to, from) { if (to.path == `/newsuser/personal/${this.$store.state.id}`) { this.reload(); } else if (to.path == `/newsuser/personal/${this.$route.params.id}`) { this.reload(); } }, }, methods: { load() { userInfo(this.$route.params.id) .then((res) => { console.log(res); this.avatar = res.data.avatar; this.nickname = res.data.nickname; this.v = res.data.v; this.design = res.data.design; }) .catch((err) => { console.log(err); }); myFollow(this.$store.state.id) .then((res) => { res.data.forEach((res) => { this.isfollowid.push(res.id); }); }) .catch((err) => { console.log(err); }); followAndFanCount(this.$route.params.id) .then((res) => { this.followCounts = res.data.followCounts; this.fanCounts = res.data.fanCounts; }) .catch((err) => { console.log(err); }); mygoodCount(this.$route.params.id) .then((res) => { this.goodCounts = res.data.goodCounts; }) .catch((err) => { console.log(err); }); }, myfan() { this.$router.push({ path: `/newsuser/personal/myfan/${this.$route.params.id}`, }); }, myfollow() { this.$router.push({ path:`/newsuser/personal/myfollow/${this.$route.params.id}`, }); }, follow() { if (!this.$store.state.id) { this.$message({ showClose: true, message: "请登录后再进行操作哦", type: "warning", }); } else { this.followData.followId = this.$route.params.id; this.followData.fanId = this.$store.state.id; if (this.isfollowid.indexOf(this.followData.followId) > -1) { this.isfollow = true; } else { this.isfollow = false; } if (this.isfollow) { deleteFollow(this.followData) .then((res) => { this.isfollow = false; this.$message({ showClose: true, message: "已取消关注", type: "success", }); this.reload(); }) .catch((err) => { console.log(err); }); } else if (!this.isfollow) { addFollow(this.followData) .then((res) => { this.isfollow = true; this.$message({ showClose: true, message: "已成功关注", type: "success", }); this.reload(); }) .catch((err) => { console.log(err); }); } } }, edit() { this.$refs.dia.open(); }, }, }; </script> <style scoped> .me-video-player { background-color: transparent; width: 100%; height: 100%; object-fit: fill; display: block; position: fixed; left: 0; z-index: 0; top: 0; } .PersonTop { width: 1000px; height: 140px; padding-top: 20px; background-color: white; margin-top: 30px; position: absolute; left: 50%; transform: translateX(-50%); display: flex; border-radius: 5px; } .PersonTop_img { width: 150px; height: 120px; background-color: #8c939d; margin-right: 24px; margin-left: 20px; overflow: hidden; border-radius: 20px; } .PersonTop_img img { width: 100%; height: 100%; border-radius: 20px; } .PersonTop_text { height: 120px; width: 880px; display: flex; } .user_text { width: 60%; height: 100%; line-height: 30px; } .user_name { font-weight: bold; } .user-v { margin-bottom: -5px; } .user-v-img { width: 15px; height: 15px; } .user-v-font { font-size: 15px; color: #00c3ff; } .user_qianming { font-size: 14px; color: #999; } .user_num { width: 40%; height: 100%; display: flex; align-items: center; } .user_num > div { text-align: center; border-right: 1px dotted #999; box-sizing: border-box; width: 80px; height: 40px; line-height: 20px; } .num_text { color: #999; } .num_number { font-size: 20px; color: #333; } .el-menu-item>span { font-size: 16px; color: #999; } /*下面部分样式*/ .person_body { width: 1000px; margin-top: 210px; display: flex; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 5px; } .person_body_left { width: 27%; height: 600px; border-radius: 5px; margin-right: 3%; text-align: center; } .person_body_list { width: 100%; height: 50px; margin-top: 25px; font-size: 22px; border-bottom: 1px solid #f0f0f0; background-image: -webkit-linear-gradient( left, rgb(42, 134, 141), #e9e625dc 20%, #3498db 40%, #e74c3c 60%, #09ff009a 80%, rgba(82, 196, 204, 0.281) 100% ); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s linear infinite; } .el-menu-item { margin-top: 22px; } .person_body_right { width: 70%; /* height: 500px; */ border-radius: 5px; background-color: white; } .box-card { height: 500px; } /*ui样式*/ .el-button { width: 84px; } </style> 3.编辑弹窗按钮实现

效果图：代码如下： PersonalDia.vue:

<template> <div> <el-dialog title="修改个人信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose"> <el-form :model="form" :rules="rules" ref="form" label-width="150px"> <div class="updateinfo"> <div class="left"> <el-form-item label="头像" prop="avatar"> <img style="width:150px;height:110px" :src="form.avatar"></img> </el-form-item> <el-form-item label="账号密码" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item label="昵称" prop="nickname"> <el-input v-model="form.nickname"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item label="性别" prop="sex"> <el-switch v-model="form.sex" active-color="#13ce66" inactive-color="#ff4949" active-text="男" inactive-text="女" :active-value= "1" :inactive-value= "0" > </el-switch> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> </div> <div class="right"> <el-form-item label="用户编号" prop="id"> <el-input v-model="form.id" disabled></el-input> </el-form-item> <el-form-item label="账号" prop="account"> <el-input v-model="form.account" disabled></el-input> </el-form-item> <el-form-item label="地区" prop="area"> <el-input v-model="form.area"></el-input> </el-form-item> <el-form-item label="兴趣爱好" prop="hobby"> <el-input v-model="form.hobby"></el-input> </el-form-item> <el-form-item label="职业" prop="work"> <el-input v-model="form.work"></el-input> </el-form-item> <el-form-item label="个性签名" prop="design"> <el-input v-model="form.design"></el-input> </el-form-item> <el-form-item label="手机号码" prop="mobilePhoneNumber"> <el-input v-model="form.mobilePhoneNumber"></el-input> </el-form-item> </div> </div> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="handleClose">取消</el-button> <el-button type="primary" @click="submit">提交</el-button> </span> </el-dialog> </div> </template> <script> import { userInfo, updateUser } from "@/api/user.js"; export default { name: "PersonalDia", data() { return { dialogVisible: false, form: { avatar: "", password: "", nickname: "", age: Number, email: "", mobilePhoneNumber: "", sex: Number, id: Number, account: "", area: "", hobby: "", work: "", design: "", }, rules: { nickname: [ { required: true, message: "昵称不能为空", trigger: "blur" }, ], password: [ { required: true, message: "账号密码不能为空", trigger: "blur" }, ], }, }; }, mounted() { this.load(); }, methods: { open() { this.dialogVisible = true; }, load() { userInfo(this.$store.state.id) .then((res) => { console.log(res); Object.assign(this.form, res.data); }) .catch((err) => { console.log(err); }); }, submit() { updateUser(this.form) .then((res) => { console.log(res); this.dialogVisible = false; this.$emit("flesh"); }) .catch((err) => { console.log(err); }); }, handleClose() { this.dialogVisible = false; this.$emit("flesh"); }, }, }; </script> <style scoped> .updateinfo { height: 350px; overflow: auto; } .left { /* width: 330px; */ float: left; } .right { overflow: hidden; } </style> 4.个人简介实现

效果图：代码如下： Info.vue:

<template> <div> <el-card> <el-descriptions class="margin-top" title="简介" :column="2" border> <template slot="extra"> <el-button type="primary" v-if="$route.params.id==$store.state.id" size="small">操作</el-button> </template> <el-descriptions-item> <template slot="label"> <i class="el-icon-picture-outline"></i> 头像 </template> <img class="img" :src="avatar" alt="" /> </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-user"></i> 账户名 </template> {{ account }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-s-custom"></i> 昵称 </template> {{ nickname }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-odometer"></i> 年龄 </template> {{ age }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-male"></i> <i class="el-icon-female"></i> 性别 </template> <el-tag size="small">{{ sex }}</el-tag> </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-message"></i> 邮箱Email </template> {{ email }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 手机号码 </template> {{ mobilePhoneNumber }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 地区 </template> {{ area }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-office-building"></i> 职业 </template> {{ work }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-basketball"></i> 兴趣爱好 </template> {{ hobby }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-magic-stick"></i> 个性签名 </template> {{ design }} </el-descriptions-item> <el-descriptions-item> <template slot="label"> <i class="el-icon-date"></i> 注册日期 </template> {{ createDate | formatDate }} </el-descriptions-item> </el-descriptions> </el-card> </div> </template> <script> import { userInfo } from "@/api/user.js"; export default { name: "Info", data() { return { avatar: String, account: String, age: Number, email: String, mobilePhoneNumber: String, area: String, createDate: Number, nickname: String, sex: String, work: String, hobby: String, design: String, }; }, mounted() { this.load(); }, methods: { load() { userInfo(this.$route.params.id) .then((res) => { this.avatar = res.data.avatar; this.account = res.data.account; this.age = res.data.age; this.email = res.data.email; this.mobilePhoneNumber = res.data.mobilePhoneNumber; this.area = res.data.area; this.createDate = res.data.createDate; this.nickname = res.data.nickname; this.sex = res.data.sex == 1 ? "男" : "女"; this.work = res.data.work; this.design = res.data.design; this.hobby = res.data.hobby; }) .catch((err) => { console.log(err); }); }, }, }; </script> <style scoped> .img { width: 80px; height: 80px; } </style> 5.发贴页实现

效果图：代码： MyArticle.vue:

<template> <div class="myart1"> <article-item v-for="a in allData" :key="a.id" v-bind="a"/> <el-empty v-if="allData.length == 0" :image-size="250" description="暂未发表任何新闻额" ></el-empty> </div> </template> <script> import { myArticle } from "@/api/user.js"; import ArticleItem from '../../components/article/ArticleItem.vue'; export default { components: { ArticleItem }, name: "MyArticle", data() { return { allData:[] }; }, mounted() { this.load(); }, methods: { load() { myArticle(this.$route.params.id) .then((res) => { console.log(res); this.allData=res.data }) .catch((err) => { console.log(err); }); }, }, }; </script> <style> .myart1{ line-height: 30px; } </style> 6.收藏页实现

效果图：代码： MyCollect.vue:

<template> <div class="myart1"> <article-item v-for="a in allData" :key="a.id" v-bind="a"/> <el-empty v-if="allData.length == 0" :image-size="250" description="暂未收藏任何新闻额" ></el-empty> </div> </template> <script> import { myCollect } from "@/api/collect.js"; import ArticleItem from '../../components/article/ArticleItem.vue'; export default { components: { ArticleItem }, name: "MyCollect", data() { return { allData:[] }; }, mounted() { this.load(); }, methods: { load() { myCollect(this.$route.params.id) .then((res) => { console.log(res); res.data.forEach(element => { element.createDate=this.$options.filters['formatDate'](parseInt(element.createDate)) }); this.allData=res.data }) .catch((err) => { console.log(err); }); }, }, }; </script> <style> .el-card { border-radius: 0; } .el-card:not(:first-child) { margin-top: 5px; } .myart1{ line-height: 30px; } </style> 7.关注和收藏页实现

效果图：代码： MyFanAndFollow.vue:

<template> <div class="fanorfollow_box"> <div class="fanorfollow" v-for="(item, index) in allData"> <div class="fanorfollow_left"> <img class="fanorfollow_img" v-image-preview :src="item.avatar" /> </div> <div class="fanorfollow_info"> <div class="fanorfollow_info_top"> <span style="color: #666; max-width: 180px" @click="personal(item.id)" >{{ item.nickname }}</span > </div> <div class="fanorfollow_info_bottom"> <span @click="personal(item.id)">{{ item.design }}</span> </div> </div> <div class="fanorfollow_botton"> <el-button @click="follow(item.id)" type="primary" size="small" round icon="el-icon-check" v-text="isfollowid.indexOf(item.id) > -1 ? '已关注' : '关注'" ></el-button> </div> </div> <div> <el-empty v-if="allData.length == 0" :image-size="250" description="这里什么都没有哟" ></el-empty> </div> </div> </template> <script> import { myFollow, myFan, addFollow, deleteFollow } from "@/api/follow.js"; export default { name: "MyFanAndFollow", inject: ["reload"], data() { return { allData: [], isfollow: true, followData: { fanId: "", followId: "", }, isfollowid: [], }; }, watch: { $route(to, from) { if (to.path == `/newsuser/personal/myfan/${this.$route.params.id}`) { myFan(this.$route.params.id) .then((res) => { console.log(res); this.allData = res.data; myFollow(this.$route.params.id).then((res) => { res.data.forEach((element) => { this.isfollowid.push(element.id); }); }); }) .catch((err) => { console.log(err); }); } else { myFollow(this.$route.params.id) .then((res) => { console.log(res); this.allData = res.data; res.data.forEach((element) => { this.isfollowid.push(element.id); }); }) .catch((err) => { console.log(err); }); } }, }, mounted() { this.load(); }, methods: { load() { if ( this.$route.path == `/newsuser/personal/myfan/${this.$route.params.id}` ) { myFan(this.$route.params.id) .then((res) => { console.log(res); this.allData = res.data; myFollow(this.$route.params.id).then((res) => { res.data.forEach((element) => { this.isfollowid.push(element.id); }); }); }) .catch((err) => { console.log(err); }); } else { myFollow(this.$route.params.id) .then((res) => { console.log(res); this.allData = res.data; res.data.forEach((element) => { this.isfollowid.push(element.id); }); }) .catch((err) => { console.log(err); }); } }, follow(id) { if (!this.$store.state.id) { this.$message({ showClose: true, message: "请登录后再进行操作哦", type: "warning", }); return; } if (this.$store.state.id != this.$route.params.id) { this.$message({ showClose: true, message: "此页面不是你的个人中心哦", type: "warning", }); return; } this.followData.followId = id; this.followData.fanId = this.$store.state.id; if (this.isfollowid.indexOf(this.followData.followId) > -1) { this.isfollow = true; } else { this.isfollow = false; } if (this.isfollow) { deleteFollow(this.followData) .then((res) => { console.log(res.data); this.isfollow = false; this.$message({ showClose: true, message: "已取消关注", type: "success", }); this.reload(); }) .catch((err) => { console.log(err); }); } else if (!this.isfollow) { addFollow(this.followData) .then((res) => { console.log(res.data); this.isfollow = true; this.$message({ showClose: true, message: "已成功关注", type: "success", }); this.reload(); }) .catch((err) => { console.log(err); }); } }, personal(id) { this.$router.push({ path: `/newsuser/personal/${id}` }); }, }, }; </script> <style> .fanorfollow_box :hover { border-width: 1px; border-color: deepskyblue; } .fanorfollow { padding: 15px 40px 15px 30px; height: 50px; display: flex; align-items: center; border: 1px solid #ebebeb; } .fanorfollow :hover { border-width: 1px; border-color: deepskyblue; } .fanorfollow_left { width: 60px; height: 60px; } .fanorfollow_img { width: 100%; height: 100%; border-radius: 50%; border: 1px solid #ebebeb; vertical-align: top; } .fanorfollow_info { display: inline-block; margin-left: 20px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: hidden; } .fanorfollow_info_top { display: inline-block; font-size: 10; line-height: 14px; vertical-align: top; cursor: pointer; } .fanorfollow_info_top :hover { color: deepskyblue; } .fanorfollow_info_bottom { line-height: 14px; color: #999; margin-top: 5px; cursor: pointer; } .fanorfollow_info_bottom :hover { color: deepskyblue; } </style>

四、总结

差不多就这些，关注我后续会有更多精彩内容