前言

本来是想要说一下那个如何整合那个vue的Markdown编辑器的，但是由于这个后端没有搭建起来，所以图片上传做不了，所以先不介绍，后面在介绍怎么搞，值得一提的是在vue里面使用Markdown是真的简单，后面vue的Markdown组件可以直接把Markdown文档变成html文件，后面我存到服务器然后(存路径数据库）然后给前端直接渲染就好了。不像那个Django里面，用MVT模式开发的时候，还要自己整合 edit.md 而且网上的教程垃圾的一批还是我自己整合了一下（这里关于那篇文章本来是免费观看的，但是收藏了连赞都不给一下我真的是有点气不过，所以我选择了VIP可见，这里要是有想要的留个言我把Markdown文档给出来）

效果预览

这边要说明的是，我还没有完全做完，只是给了架子，说实话个人页面确实是比较难做的，而且这里面也是要做用户验证的，分为本用户访问自己的主页和别人访问自己的主页。

项目结构

这里的话有五个模块所以分为五个vue文件

路由注册

{path: '/space',name: 'space',component: Space,children:[{path: 'bokelist',name: 'bokelist',component: BokeList,},{path: "changeinfo",name: 'changeinfo',component: Changeinfo,},{path: "changepic",name: "changepic",component: Changpic},{path: "spaceinfo",name: "spaceinfo",component: Spaceinfo,},{path: "wirterboke",name: "wirterboke",component: Wirterboke}]
}

个人页面框架

这里的话是用element ui 做的

<template>
<div style="background-color: white"><el-container style="height: 800px; border: 1px solid #eee;"><el-aside width="200px" style="margin-top: 1%" ><div style="width: 190px;background-color: white;padding: 5px;margin: auto"><img v-model="user.userpic" v-bind:src="user.userpic" width="150px" height="150px" style="border-radius: 300px;margin-left: 8%"><br><br><p style="margin:0 auto;text-align: center" v-model="user.username">{{user.username}}</p></div><br><br><el-menu :default-openeds="['1','2']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>用户中心</template><el-menu-item-group><router-link class="alink" to="/space/spaceinfo"><el-menu-item index="1-1">个人信息</el-menu-item></router-link><router-link class="alink" to="/space/changepic"><el-menu-item index="1-2">修改头像</el-menu-item></router-link><router-link class="alink" to="/space/changeinfo"><el-menu-item index="1-3">修改信息</el-menu-item></router-link></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>博客管理</template><el-menu-item-group><router-link class="alink" to="/space/bokelist"><el-menu-item index="2-1">博客列表</el-menu-item></router-link><router-link class="alink" to="/space/wirterboke"><el-menu-item index="2-2">书写文章</el-menu-item></router-link></el-menu-item-group></el-submenu></el-menu></el-aside><el-container style="background-color: white"><el-main><router-view/></el-main></el-container></el-container></div>
</template><script>
export default {name: "Space",beforeRouteEnter: (to, from, next) => {console.log("准备进入个人信息页");let islogin = sessionStorage.getItem("isLogin")if(!islogin){next({path:'/login'});}next();},data() {return {user:{userpic :"static/userpic/userpic.jpg",username: '游客'}}},}
</script><style scoped>
.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
.alink{text-decoration: none;
}
</style>

这里再给出信息展示的代码

<template>
<div><div class="show"><p v-model="userinfo" style="margin-left:6%;margin-top: 5%">昵称:<span style="margin-left: 3%;line-height:40px">{{userinfo.username}}</span></p><p v-model="userinfo" style="margin-left:6%;margin-top: 5%">性别:<span style="margin-left: 3%;line-height:40px">{{userinfo.usersex}}</span></p><p v-model="userinfo" style="margin-left:6%;margin-top: 5%">邮箱:<span style="margin-left: 3%;line-height:40px">{{userinfo.useremail}}</span></p><p v-model="userinfo" style="margin-left:6%;margin-top: 5%">简介:<span style="margin-left: 3%;line-height:40px">{{userinfo.userjianjie}}</span></p></div>
</div>
</template><script>
//还是等跳转到这里的时候再来加载数据好一点
import {userinfo} from "../../userinfo/userinfo"
export default {name: "spaceinfo",data(){return{userinfo: userinfo}}
}
</script><style scoped>
.show{margin: 100px auto;width: 80%;height: 450px;border: 5px solid lightcyan;transition: all 0.9s;border-radius: 10px;}.show:hover{box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);margin-top: 90px;
}
</style>

总结

这里还是只能给出大体的框架，如果有需要的话还是说要自己根据那个结构去改，没有办法直接拿过来用。
那么目前的进度也是不错的。

之后尽量本周完成大部分工作，然后开源，那么下个礼拜我就可以开始进行后端开发了。

Vue实战开发二（个人中心实现）相关推荐

Vue实战篇二十八：实现一个手机版的购物车
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十七：实现走马灯效果的商品轮播图
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十六：创建动态仪表盘
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战开发移动端旅游网站
Vue实战开发旅游网站项目搭建搭建步骤项目结构首页拆解首页组件拆分步骤网络请求库axios axios与ajax Promise 安装axios 如何使用axios 请求和响应的拦截使 ...
Vue实战开发（一）验证码与登录页面
文章目录前言环境准备页面跳转登录页面验证码组件使用组件引入组件页面使用完整代码前言许久不见,最近在怼pytorch头有点小大,不过还好.最近也是要到期末了,所以的话刚刚好准备把这 ...
SpringBoot + Vue实战开发
首先创建项目就不多说了不管是IDEA或者是MyEdclipse 百度上都有. JDK要1.8以上版本的先简单的介绍一下SpringBoot,SpringBoot是继SSM(Spring,Sprin ...
推荐系统快速开发--豆瓣电影推荐系统的快速实战开发(二)
在我的上一篇博客中我简单解释了如何快速开发推荐系统的一些步骤,比如前期的数据分析,数据清洗过程,和后期的如何构建一个用户和物品的评分矩阵,如何利用计算皮尔森相关系数来寻找最相似的电影,这些过程和步骤可 ...
Vue实战篇十六：导航菜单
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...

Vue实战开发二（个人中心实现）

文章目录

前言

效果预览

项目结构

个人页面框架

总结

Vue实战开发二（个人中心实现）相关推荐

最新文章

热门文章