个人博客系统(Vue实现）的主页布局设计

Vue主页设计

微扬嘴角

7647人浏览 · 2022-06-14 23:13:31

微扬嘴角 · 2022-06-14 23:13:31 发布

源码地址：https://gitee.com/cheng-xuyuan/blogWeb.git（请忽略这句）
一、整体布局
上下划分，再左右划分。
在这里插入图片描述
主体代码：

 <el-container ">
    <!--  头部区域 -->
    <el-header>
    </el-header>
    <el-container>
    <!-- 侧边栏区域 -->
      <el-aside >
      </el-aside>
      <!-- 右侧主体区域 -->
      <el-main>
      </el-main>
    </el-container>
  </el-container>

说明：el-container标签是整个布局容器，el-header标签是容器上方（含“管理系统”的上方部分），el-aside标签是旁边的菜单列表，el-main标签是右边白色区域（后面会设置它显示后端传过来的数据）。
注：相关代码可以直接去Element官网找“Container布局容器”。
实现上述效果的代码(Home.vue组件）如下，后面讲解的内容都在上述代码的基础上进行修改完善：

<template>
  <el-container class="home-container">
    <!--  头部区域 -->
    <el-header height="50px">
      <div>
        <img src="../assets/home.png" alt="" width="100px" height="100px" />
        <span>个人主页</span>
      </div>
      <!-- 添加了一个退出按键，并给该按键添加退出事件 -->
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>

    <el-container>
      <el-aside width="200px">
      </el-aside>
      <el-main>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Home",
  data(){
    return {
    }
  },
  methods:{
    logout(){
      window.sessionStorage.clear();//销毁token
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.home-container{
  height:100%;
}
.el-header{
  background-color: #373D41;
  display:flex;
  justify-content: space-between;
  padding-left:0;
  align-items:center;
  color:#fff;
  font-size:20px;
}
.el-aside{
  background-color: #333744;
}
.el-main{
  background-color: #eaedf1;}
span{
  position: relative;
  bottom: 39px;
  left:29px;
}
</style>

二、设计左部的侧边栏（设计el-aside标签里的内容）
可以去Element官网找代码：NavMenu导航菜单->侧栏
主体代码：
在这里插入图片描述

    说明：el-menu标签是整个菜单容器，el-submenu标签表示一级菜单，el-menu-item标签是二级标签。el-submenu标签template标签用于设置该el-submenu标签内的内容的模板，el-menu-item内的template标签也是。
    效果如下，点击一级标签，即可自动展开二级标签。

具体设置：
在这里插入图片描述

效果如下：
在这里插入图片描述
点击文章管理栏：

也可以通过请求后端的返回数据来自动设置多个菜单（使用v-for和:key的指令).

补充一些使菜单栏更美观、体验感更好的技巧：
（1）el-menu标签的active-text-color属性可以设置被选中的二级菜单栏的颜色，可以设置被选中的菜单与其他菜单栏颜色不一致加以区分。
在这里插入图片描述
效果如下：

（2）el-menu标签的unique-opened属性设置为true时在展开一个一级菜单时其他已展开的菜单会自动关闭，注意设置为true时unique-opened前加:（分号），不然就设置为字符串了。
（3）可以看出上面的二级菜单展开时会突出，不美观，解决方法是将其边框去掉。
在这里插入图片描述
效果如下：

三、实现首页的路由重定向
在这里插入图片描述
可以看到现在进入个人主页下方右侧是空白的，可以使用路由来实现变换。
步骤：
（1）在el-main标签里添加一个路由器标签

（2）新建一个Welcome组件

（3）将该组件注册到路由器中，注意这里注册到home路径的子路径中，并使用重定向机制使的默认显示Welcom组件
在这里插入图片描述
效果如下：

（4）将el-menu标签的router属性设置为true.
补充：el-menu标签有一个router属性，将该属性设置为true时，点击一个二级目录即会跳转到由根目录+该二级菜单对应的el-menu-item的index属性值组成的路径中。
在这里插入图片描述
效果如下：

点击”发布的文章“：

（4）新建要显示的组件，这里以“发布的文章”为例

修改对应el-menu-item标签的index属性（index接下来起到路径的作用）：

在index.js文件中注册：

效果如下：