Vue + Spring Boot 项目实战（八）：导航栏与图书页面设计
文章目錄
- 前言
- 一、導航欄的實現
- 1.路由配置
- 2.使用 NavMenu 組件
- 二、圖書管理頁面
- 2.1. LibraryIndex.vue
- 2.SideMenu.vue
- 3.Books.vue
前言
之前講過使用 Element 輔助前端頁面的開發，但是只用到了比較少的內容，這一篇我們來做一下系統的核心頁面——圖書管理頁面的前端部分，旨在熟悉 Vue 的更多特性。
一、導航欄的實現
我們的項目雖然本質上是單頁面應用，但表面上有多個功能頁面，比如首頁、圖書館、筆記本等，后期根據情況還可以把一些功能集中起來做一個后臺管理頁面。為了方便用戶在這三個頁面之間切換，我們需要添加一個導航欄。
這個導航欄的要求很簡單：
- 能夠在每個頁面顯示
- 美觀
1.路由配置
為了實現第一個要求，我們需要把導航欄放在其它頁面的父頁面中（對 Vue 來說就是父組件），之前我們講過，App.vue 是所有組件的父組件，但把導航欄放進去不合適，因為我們的登錄頁面中不應該顯示導航欄。
為了解決這個問題，我們在 src/components 目錄下直接新建一個組件，命名為 Home.vue，原始代碼如下：
<template><div><router-view/></div> </template><script> export default {name: "Home" } </script><style scoped></style>這里和 App.vue 一樣，寫入了一個 <router-view/>，也就是子頁面（組件）顯示的地方。
接下來，來建立路由的父子關系。注意我們在一個組件中通過導入引用了其它組件，也可以稱之為父子組件，但想要通過 控制子組件的顯示，則需要進行路由的相關配置。
打開 router/index.js ，修改代碼如下
import Vue from 'vue' import Router from 'vue-router' // 導入編寫的組件 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: [// 下面是固定寫法{path: '/home',name: 'Home',component: Home,// home頁面并不需要被訪問到redirect: '/index',children: [{path: '/index',name: 'AppIndex',component: AppIndex,meta: {requireAuth: true}}]},// 下面是固定寫法{path: '/login',name: 'Login',component: Login}] })注意我們并沒有把首頁的訪問路徑設置為 /home/index，仍然可以通過 /index 訪問首頁，這樣配置其實是感受不到 /home 這個路徑的存在的。之后再添加新的頁面，可以直接在 children 中增添對應的內容。
2.使用 NavMenu 組件
打開 Element 的文檔，找到 NavMenu 組件相關內容：
https://element.eleme.cn/2.0/#/zh-CN/component/menu
主要有頂欄、側欄兩種導航樣式，我們選擇頂欄型，點擊顯示代碼
這個頂欄其實有兩個，上面的是沒有底色的，下面的是有底色的。
這些代碼基本涵蓋了各種用法，我們可以選擇自己需要的部分，并根據下面的文檔對它進行改造。
我們在 components 文件夾里新建一個 common 文件夾，用來存儲公共的組件，并在該文件夾新建一個組件 NavMenu.vue，經過我修改的代碼如下：
<template><el-menu:default-active="'/index'"routermode="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">White Jotter - Your Mind Palace</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>這里需要解釋兩點。
第一，在 <el-menu> 標簽中我們開啟了 router 模式，在 Element 文檔中的解釋如下：
第二，我們通過 v-for 指令，把 navList 數組渲染為一組 <el-menu-item> 元素，也即導航欄的內容。當然我們也可以分開寫，這種用法只是顯得 six 一些（當需要動態更改列表內容時就很有用了）
另外為了美觀我還加了點別的東西，都很基礎，就不多說了。
接下來，我們需要把這個組件放在 Home.vue 中。
修改 Home.vue 的代碼如下：
<template><div><router-view/></div> </template><script> import NavMenu from './common/NavMenu' export default {name: 'Home',components: {NavMenu} } </script><style scoped></style>啟動前后端項目，測試一下：
npm run dev
這樣，我們訪問 http://localhost:8080/index ，就會在頂部出現導航欄。這時我們還沒有別的頁面可以訪問，所以點擊按鈕就跳到了空白的頁面。
嗯，首頁也啥也沒有。這個頁面我不打算多說什么，大家可以把它作為一個純粹的展示頁面，練習一下 html、css 之類。我做的首頁源碼可以在 GitHub 上下載下來參考使用，大致是這樣的。
二、圖書管理頁面
這是我們的核心頁面，我們先把它設計出來，以后再去實現具體的功能。
我拍腦袋想了一下，頁面大概需要以下內容：
- 1、圖書展示區域
- 2、分類導航欄
- 3、搜索欄
- 4、頁碼
2.1. LibraryIndex.vue
在 src/components 中新建文件夾 library，新建組件 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>export default {name: 'AppLibrary' } </script><style scoped></style>注釋掉的部分是接下來需要編寫的組件。這里我們使用了 Element 提供的 Container 布局容器，把整個頁面分為了側邊欄和主要區域兩個部分，詳細了解請參考
https://element.eleme.cn/2.0/#/zh-CN/component/container
接下來我們配置這個頁面的路由，修改 router/index.js 代碼如下：
P.S 關于 router 的配置已經寫了許多次了，接下來為了節省篇幅，我就只貼出來主要修改的部分啦
訪問 http://localhost:8080/library ，發現可以訪問了，當然，頁面還是空白的，但是出現了導航欄，可以測試一下在首頁和圖書館頁面之間切換。
2.SideMenu.vue
編寫一個側邊欄組件。放在 src/components/library 文件夾中，代碼如下
<template><el-menuclass="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 中使用這個組件
<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>訪問 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>之后我們要實現的許多功能都與這個組件有關。目前用到的這部分，需要注意的有：
- 1、v-for 指令，之后可以使用動態渲染，這里我們用《三體》的內容作為一個默認值，先查看效果。
- 2、el-tooltip Element 提供的組件，用于展示鼠標懸停時的提示信息。參考 https://element.eleme.cn/2.0/#/zh-CN/component/tooltip
- 3、slot 插槽，及把標簽中的內容插到父組件指定的地方，這里我們插入了 el-tooltip 的 content 中。上述文檔中亦有描述。
- 4、封面圖像標簽中，我們使用了 :src="item.cover" 這種寫法，: 其實是 v-bind: 的縮寫，用于綁定把標簽的屬性與 data 中的值綁定起來。
- 5、搜索欄暫不理會
- 6、分頁使用 el-pagination 組件，目前只是樣式。
圖書卡片的樣式是模仿豆瓣讀書做的。
最后把 Books 組件放在 LibraryIndex.vue 中，并稍微修改一下樣式
P.S 以后添加組件之類的代碼我也盡量只放關鍵部分，大家要多嘗試自己調試。
最后，訪問 http://localhost:8080/library ，效果如下
功能完善之后是這個樣子的
項目的源碼在我的 GitHub 上，可以下載下來參考：
https://github.com/Antabot/White-Jotter
感謝大家的支持！如果有想不清楚的問題，請給我發個郵件，我一定及時回復！
總結
以上是生活随笔為你收集整理的Vue + Spring Boot 项目实战（八）：导航栏与图书页面设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java执行linux脚本 并返回其执行
- 下一篇： html5倒计时秒杀怎么做,vue 设