Vue + Spring Boot project: navigation bar and Book page design


Article directory

Preface

We have talked about using Element to assist the development of front-end pages before, but only used a relatively small amount of content. In this article, we will make the core page of the system - the front-end part of the book management page, aiming to be familiar with more features of Vue.

1, Implementation of navigation bar

Although our project is essentially a single page application, there are several functional pages on the surface, such as the home page, library, notebook, etc. in the later stage, according to the situation, some functions can be integrated to make a background management page. In order to facilitate users to switch between these three pages, we need to add a navigation bar.

The requirements of this navigation bar are simple:

  • Can be displayed on each page
  • Beautiful

1. Routing configuration

In order to achieve the first requirement, we need to put the navigation bar on the parent page of other pages (for Vue, it is the parent component). As we said before, App.vue is the parent component of all components, but it is not appropriate to put the navigation bar in, because our login page should not display the navigation bar.

To solve this problem, we directly create a new component in the src/components directory, named Home.vue. The original code is as follows:

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {
    name: "Home"
}
</script>

<style scoped>

</style>

Here, like App.vue, a < router view / > is written, which is where the sub page (component) is displayed.

Next, establish the parent-child relationship of the route. Note that we refer to other components through import in one component, which can also be called parent-child components. However, if we want to control the display of child components, we need to configure the routing.

Open router/index.js, and modify the code as follows

import Vue from 'vue'
import Router from 'vue-router'
// Import authored components
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    // Here is the fixed writing
    {
      path: '/home',
      name: 'Home',
      component: Home,
      // The home page does not need to be accessed
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex,
          meta: {
            requireAuth: true
          }
        }
      ]
    },

    // Here is the fixed writing
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

Note that we haven't set the access path of the home page to / home/index, and we can still access the home page through / index. In fact, this configuration can't feel the existence of / home. Then add a new page, which can directly add the corresponding content in children.

2. Use NavMenu component

Open the document of Element, and find the NavMenu component related content:

https://element.eleme.cn/2.0/#/zh-CN/component/menu

There are two navigation styles: top bar and side bar. We select the top bar type and click to display the code

There are actually two top bars. The top bar has no background color, and the bottom bar has background color.


These codes basically cover all kinds of uses, we can choose the parts we need, and modify it according to the following documents.

We create a common folder in the components folder to store public components, and create a new component NavMenu.vue in the folder. The code I modified is as follows:

<template>
    <el-menu
      :default-active="'/index'"
      router
      mode="horizontal"
      background-color="white"
      text-color="#222"
      active-text-color="red"
      style="min-width: 1300px">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
      <a href="#nowhere" style="color: #222;float: right;padding: 20px;">More functions</a>
      <i class="el-icon-menu" style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i>
      <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">White Jotter - Your Mind Palace</span>
    </el-menu>
</template>

<script>
  export default {
    name: 'NavMenu',
    data () {
      return {
        navList: [
          {name: '/index', navItem: 'home page'},
          {name: '/jotter', navItem: 'Notebook'},
          {name: '/library', navItem: 'Library'},
          {name: '/admin', navItem: 'Personal Center'}
        ]
      }
    }
  }
</script>

<style scoped>
  a{
    text-decoration: none;
  }

  span {
    pointer-events: none;
  }
</style>

Two points need to be explained here.

First, in the < El Menu > tab, we turn on the router mode. The explanation in the Element document is as follows:

Second, we use the v-for instruction to render the navList array as a set of < El menu item > elements, that is, the contents of the navigation bar. Of course, we can also write separately. This kind of usage is just a little more six y (it is very useful when we need to change the contents of the list dynamically)

In addition, I added something else for the sake of beauty. It's very basic, so I won't say much.

Next, we need to put this component in Home.vue.

Modify the code of Home.vue as follows:

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
import NavMenu from './common/NavMenu'
export default {
  name: 'Home',
  components: {NavMenu}
}
</script>

<style scoped>

</style>

Start the front and rear end projects, and test the following:

npm run dev



In this way, we visit http://localhost:8080/index , the navigation bar appears at the top. At this time, we have no other page to visit, so click the button to jump to the blank page.


Well, there's nothing on the front page. I'm not going to say anything more about this page. You can use it as a pure display page to practice html, css and so on. The source code of my homepage can be downloaded from GitHub for reference, which is roughly like this.

2, Book management page

This is our core page. We design it first, and then we can realize specific functions.

I patted my head and thought about it. The page needs the following contents:

  • 1. Book display area
  • 2. Category navigation bar
  • 3. Search bar
  • 4, page number

2.1. LibraryIndex.vue

Create a new folder library in src/components and a new component LibraryIndex.vue as the root component of the book page. The code is as follows

<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <switch></switch>
      <!--<SideMenu></SideMenu>-->
    </el-aside>
    <el-main>
      <!--<books></books>-->
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: 'AppLibrary'
}
</script>

<style scoped>

</style>

The commented out parts are the components that need to be written next. Here we use the Container layout Container provided by Element to divide the whole page into two parts: sidebar and main area. For details, please refer to

https://element.eleme.cn/2.0/#/zh-CN/component/container

Next, we configure the route of this page. Modify the router/index.js code as follows:

import Vue from 'vue'
import Router from 'vue-router'
// Import authored components
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'
import Home from '@/components/Home'
import LibraryIndex from '../components/library/LibraryIndex'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    // Here is the fixed writing
    {
      path: '/home',
      name: 'Home',
      component: Home,
      // The home page does not need to be accessed
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex,
          meta: {
            requireAuth: true
          }
        },
        {
          path: '/library',
          name: 'Library',
          component: LibraryIndex,
          meta: {
            requireAuth: true
          }
        }
      ]
    },

    // Here is the fixed writing
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

P.S has written about router configuration many times. Next, in order to save space, I will post only the main modified parts

Visit http://localhost:8080/library , found that it can be accessed, of course, the page is still blank, but the navigation bar appears, you can test the switch between the home page and the library page.

2.SideMenu.vue

Write a sidebar component. In the src/components/library folder, the code is as follows

<template>
  <el-menu
    class="categories"
    default-active="0"
    @select="handleSelect"
    active-text-color="red">
    <el-menu-item index="0">
      <i class="el-icon-menu"></i>
      <span slot="title">whole</span>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">literature</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">Popular</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-menu"></i>
      <span slot="title">Culture</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-menu"></i>
      <span slot="title">Life</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-menu"></i>
      <span slot="title">Management</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-menu"></i>
      <span slot="title">science and technology</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'SideMenu'
}
</script>

<style scoped>
  .categories {
    position: fixed;
    margin-left: 50%;
    left: -600px;
    top: 100px;
    width: 150px;
  }
</style>

Use this component in LibraryIndex.vue

<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <switch></switch>
      <SideMenu></SideMenu>
    </el-aside>
    <el-main>
      <!--<books></books>-->
    </el-main>
  </el-container>
</template>

<script>
import SideMenu from './SideMenu'
export default {
  name: 'AppLibrary',
  components: {SideMenu}
}
</script>

<style scoped>

</style>

Visit http://localhost:8080/library Viewing effect

3.Books.vue

Finally, we use a component to display books. This component is relatively complex. The initial code is as follows

<template>
  <div>
    <el-row style="height: 840px;">
      <!--<search-bar></search-bar>-->
      <el-tooltip effect="dark" placement="right"
                  v-for="item in books"
                  :key="item.id">
        <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.title}}</p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>{{item.author}}</span> /
          <span>{{item.date}}</span> /
          <span>{{item.press}}</span>
        </p>
        <p slot="content" style="width: 300px" class="abstract">{{item.abs}}</p>
        <el-card style="width: 135px;margin-bottom: 20px;height: 233px;float: left;margin-right: 15px" class="book"
                 bodyStyle="padding:10px" shadow="hover">
          <div class="cover">
            <img :src="item.cover" alt="cover">
          </div>
          <div class="info">
            <div class="title">
              <a href="">{{item.title}}</a>
            </div>
          </div>
          <div class="author">{{item.author}}</div>
        </el-card>
      </el-tooltip>
    </el-row>
    <el-row>
      <el-pagination
        :current-page="1"
        :page-size="10"
        :total="20">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Books',
  data () {
    return {
      books: [
        {
          cover: 'https://i.loli.net/2019/04/10/5cada7e73d601.jpg',
          title: 'Trisomy',
          author: 'Liu Chi Xin',
          date: '2019-05-05',
          press: 'Chongqing Publishing House ',
          abs: 'While the Cultural Revolution was in full swing. The "red shore project", the military's secret plan to explore alien civilization, has made a breakthrough. But at the moment when the launch button was pressed, ye Wenjie, who suffered from the disaster, did not realize that she had completely changed the fate of mankind. The first cry of earth civilization to the universe, centering on the sun, flies to the depths of the universe at the speed of light'
        }
      ]
    }
  }
}
</script>

<style scoped>
  .cover {
    width: 115px;
    height: 172px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 115px;
    height: 172px;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 102px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  a {
    text-decoration: none;
  }

  a:link, a:visited, a:focus {
    color: #3377aa;
  }
</style>

Many of the functions we will implement later are related to this component. At present, we need to pay attention to the following:

  • 1. The v-for instruction can be used for dynamic rendering later. Here, we use the contents of the three body as a default value, and check the effect first.
  • 2. The component provided by El toolip element is used to show the prompt information when hovering. Reference resources https://element.eleme.cn/2.0/#/zh-CN/component/tooltip
  • 3. Slot slot, and insert the content in the tag to the place specified by the parent component. Here we insert the content in El tool IP. It is also described in the above documents.
  • 4. In the cover image tag, we use the writing method of: src="item.cover", which is actually the abbreviation of v-bind:, which is used to bind the attribute of the tag to the value in data.
  • 5. Search bar ignored
  • 6. Paging uses the El pagination component, which is currently just the style.
    The style of the book card is imitated by Douban.

    Finally, put the Books component in LibraryIndex.vue and change the style slightly
<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <switch></switch>
      <SideMenu></SideMenu>
    </el-aside>
    <el-main>
      <books class="books-area"></books>
    </el-main>
  </el-container>
</template>

<script>
import SideMenu from './SideMenu'
import Books from './Books'
export default {
  name: 'AppLibrary',
  components: {SideMenu, Books}
}
</script>

<style scoped>
  .books-area {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
  }

</style>

P. I will try my best to put only the key parts in the code such as adding components after s, and we should try to debug ourselves more.

Last, Visit http://localhost:8080/library , the effect is as follows

That's what it looks like when it's fully functional

The source code of the project is on my GitHub, which can be downloaded for reference:

https://github.com/Antabot/White-Jotter

Thank you for your support! If you have any unclear questions, please send me an email and I will reply in time!

747 original articles published, 95 praised, 130000 visitors+
His message board follow

Tags: Vue github npm Attribute

Posted on Wed, 15 Jan 2020 19:57:36 -0800 by BinaryDragon