StarBlog Blog Development Notes: Frontend Development (7) Main Page

Interface Design

Based on the layout provided by ElementUI.

On the left is the navigation bar, on the right side above is the tabs, followed by the main content area.

As shown in the figure.

Starting to Write Code

The content of the main page has become quite complex, so it's unrealistic to write everything in a single file.

Let's break it down.

Based on this layout, the page can be divided into three parts: the header, the main body, and the left-side navigation bar.

So, I'll create three new Vue pages:

• HeaderBar.vue
• Navbar.vue
• MainContent.vue

After completion, the directory structure looks like this:

views
├── 404.vue
├── HeaderBar.vue
├── Home.vue
├── Login.vue
├── MainContent.vue
└── Navbar.vue

Next, modify the Home.vue page.

<template>
  <div class="container">
    <!-- Navigation Menu Bar -->
    <navbar></navbar>
    <!-- Header Area -->
    <header-bar></header-bar>
    <!-- Main Content Area -->
    <main-content></main-content>
  </div>
</template>

<script>
import HeaderBar from "./HeaderBar"
import Navbar from "./Navbar"
import MainContent from "./MainContent"

export default {
  // name: 'Home',
  components: {
    HeaderBar,
    Navbar,
    MainContent
  }
};
</script>

<style scoped lang="scss">
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

PS: Initially, I named MainContent and HeaderBar simply as Main and Header, but this caused an error, and the page kept loading blankly. It might have conflicted with some existing naming.

Now, let's start writing the code for each part.

Navbar.vue

The left-side navigation includes an upper Logo area and a lower navigation menu area.

Layout Code

<template>
  <div class="menu-bar-container">
    <!-- logo -->
    <div class="logo" style="background:#14889A" :class="'menu-bar-width'"
         @click="$router.push('/')">
      <img :src="logoSrc" alt="">
      <div>StarBlog</div>
    </div>
  </div>
</template>

js

export default {
  name: "Navbar",
  data(){
    return {
      logoSrc: require('@/assets/codelab.jpg')
    }
  }
}

scss

.menu-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1020;

  .logo {
    position: absolute;
    top: 0;
    height: 60px;
    line-height: 60px;
    background: #545c64;
    cursor: pointer;

    img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      margin: 10px;
      float: left;
    }

    div {
      font-size: 25px;
      color: white;
      text-align: left;
      padding-left: 20px;
    }

  }

  .menu-bar-width {
    width: 200px;
  }
}

HeaderBar.vue

The header navigation primarily focuses on styling, adding username and avatar display on the right side.

Layout Code

<template>
  <div class="header" style="background:#14889A" :class="'position-left'">
    <!-- Toolbar -->
    <span class="toolbar">
      <el-menu class="el-menu-demo" background-color="#14889A" text-color="#14889A" active-text-color="#14889A"
               mode="horizontal">
        <el-menu-item index="1">
          <!-- User Info -->
          <span class="user-info"><img :src="user.avatar"/>{{ user.name }}</span>
        </el-menu-item>
      </el-menu>
    </span>
  </div>
</template>

JavaScript

export default {
  name: "HeaderBar",
  data() {
    return {
      user: {
        name: "CodeLab",
        avatar: require("@/assets/star.jpg"),
        role: "Super Admin",
      },
      activeIndex: '1',
      langVisible: false
    }
  },
  methods: {
    selectNavBar(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  mounted() {
    let user = sessionStorage.getItem("user")
    if (user) {
      this.user.name = user
      this.user.avatar = require("@/assets/star.jpg")
    }
  }
}

SCSS

.header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(180, 190, 190, 0.8);
  border-left-width: 1px;
  border-left-style: solid;
}

.navbar {
  float: left;
}

.toolbar {
  float: right;
}

.user-info {
  font-size: 20px;
  color: #fff;
  cursor: pointer;

  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0 10px 10px;
    float: right;
  }
}

.position-left {
  left: 200px;
}

MainContent.vue

The main content area contains tab navigation and a main content section. The route-view is placed within the main content, used for routing information.

Layout code

<template>
  <div id="main-container" class="main-container" :class="'position-left'">
    <!-- Tab -->
    <div class="tab-container"></div>
    <!-- Main Content Area -->
    <div class="main-content">
      <keep-alive>
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </keep-alive>
    </div>
  </div>
</template>

scss

.main-container {
  padding: 0 5px 5px;
  position: absolute;
  top: 60px;
  left: 1px;
  right: 1px;
  bottom: 0;
  background: rgba(67, 69, 70, 0.1);

  .main-content {
    position: absolute;
    top: 45px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    padding: 5px;
  }
}

.position-left {
  left: 200px;
}

Test Results

OK, let's see the effect

Done, finished~