Bootstrap

Vue+Spring Boot项目练习（六：导航栏与图书页面设计）

前一段时间使用的意志都是idea来开发的前端，这次使用VsCode来实现前端的设计

一、导航栏的实现

目前先添加首页、图书馆、笔记本、个人中心功能

1、路由配置

实现所需添加的demo如图所示
在这里插入图片描述
在src\views下创建Home.vue初始代码如下

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

<script>
  export default {
    name: 'Home',
  }
</script>
<style scoped>

</style>

这里和 App.vue 一样，写入了一个 <router-view/>，也就是子页面（组件）显示的地方，但想要通过 <router-view/> 控制子组件的显示，则需要进行路由的相关配置
打开src\router.js编写以下代码

默认访问路径没有设置/home/index但仍然可以通过 /index 访问首页
这样配置其实是感受不到 /home 这个路径的存在的。
之后再添加新的页面，可以直接在 children 中增添对应的内容。

import Vue from "vue";
import Router from "vue-router";



import AppIndex from "@/views/AppIndex";
import Login from "@/views/Login";
import Home from "@/views/Home";
import LibraryIndex from "@/views/library/LibraryIndex";


Vue.use(Router);


export default new Router({
    routes: [
        {
            path: '/home',
            component: Home,
            redirect:'/index',
            children:[
                {
                    path: '/index',
                    name: 'AppIndex',
                    component: AppIndex,
                    meta: {
                        requireAuth: true
                    }
                },{
                    path:'/library',
                    component:LibraryIndex,
                    meta:{
                        requireAuth:true
                    }
        

                }
            ]
        },
        {
            path: "/login",
            component:Login
        }
        // {
        //     path: "/index",
        //     component: AppIndex,
        //     meta:{
        //         requireAuth: true
        //     }
        // }
    ]
});

2、使用NavMenu组件

查看element的NavMenu组件


在 <views/>文件夹里新建一个 <common>文件夹用来存储共工组件，创建 NavMenu.vue修改后代码如下

<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;">更多功能</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">Xiao Wei - My  Graduation Project</span>
    </el-menu>
</template>

<script>
  export default {
    name: 'NavMenu',
    data () {
      return {
        navList: [
          {name: '/index', navItem: '首页'},
          {name: '/jotter', navItem: '笔记本'},
          {name: '/library', navItem: '图书馆'},
          {name: '/admin', navItem: '个人中心'}
        ]
      }
    }
  }
</script>

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

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

注意
在这里插入图片描述
修改后 的Home.vue

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

  </div>
</template>

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

</style>

访问http://localhost:8080/#/index，则会跳出导航栏

在这里插入图片描述

二、图书管理页面

先设计页面所需：功能图书展示区域、分类导航栏、搜索栏、页码

1、LibraryIndex.vue

在views中新建文件夹library，再创建组件LibraryIndex.vue关系为src\library\LibraryIndex.vue代码如下

<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 { component } from 'vue/types/umd'
import SideMenu from './SideMenu'
import Books from './Books.vue'
  export default {
    name: 'AppLibrary',
    components:{SideMenu,Books}
  }
</script>

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

</style>

配置这个页面的路由，修改 router.js 代码如下：

import Vue from "vue";
import Router from "vue-router";



import AppIndex from "@/views/AppIndex";
import Login from "@/views/Login";
import Home from "@/views/Home";
import LibraryIndex from "@/views/library/LibraryIndex";


Vue.use(Router);


export default new Router({
    routes: [
        {
            path: '/home',
            component: Home,
            redirect:'/index',
            children:[
                {
                    path: '/index',
                    name: 'AppIndex',
                    component: AppIndex,
                    meta: {
                        requireAuth: true
                    }
                },{
                    path:'/library',
                    component:LibraryIndex,
                    meta:{
                        requireAuth:true
                    }
        

                }
            ]
        },
        {
            path: "/login",
            component:Login
        }
        // {
        //     path: "/index",
        //     component: AppIndex,
        //     meta:{
        //         requireAuth: true
        //     }
        // }
    ]
});

访问 http://localhost:8080/#/library ，发现可以访问了

2、SideMenu.vue

编写一个侧边栏组件。放在 library文件夹中，代码如下

<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">全部</span>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">文学</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">流行</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-menu"></i>
      <span slot="title">文化</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-menu"></i>
      <span slot="title">生活</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-menu"></i>
      <span slot="title">经管</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-menu"></i>
      <span slot="title">科技</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>

在 LibraryIndex.vue中使用这个组件
在这里插入图片描述
访问 http://localhost:8080/#/library查看效果
在这里插入图片描述

3、Books.vue

用一个组件来显示图书

<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="封面">
          </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: '三体',
            author: '刘慈欣',
            date: '2019-05-05',
            press: '重庆出版社',
            abs: '文化大革命如火如荼进行的同时。军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展。但在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。地球文明向宇宙发出的第一声啼鸣，以太阳为中心，以光速向宇宙深处飞驰……'
          }
        ]
      }
    }
  }
</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>

注意事项
在这里插入图片描述
最后把 Books 组件放在 LibraryIndex.vue 中，并稍微修改一下样式
在这里插入图片描述
最后通过访问http://localhost:8080/#/library查看结果

在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
设计模式：外观模式（Facade）
华为OD机试 Python【求数组组合最小和的k对元素】
「AIGC」使用AI集成工具提升工作效率
Linux这11个鲜为人知的命令，超级实用！
【4】在测试集上评估模型精度
Leetcode - 周赛410
rollup 和cute基本使用方法(转)
Github上关于iOS的各种开源项目集合（强烈建议大家收藏，查看，总有一款你需要）
NoSQL数据库介绍+Redis部署
Python零基础入门（二）——IDE介绍以及Python+PyCharm的安装
;