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

Posted 2021-12-19 HUTEROX

文章目录

• 前言
• 效果预览
• 项目结构
• 个人页面框架
• 总结

前言

本来是想要说一下那个如何整合那个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>

总结

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

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