基于Spring Boot+Vue的博客系统 02——导航栏设计

最新推荐文章于 2024-02-27 17:45:16 发布

风絮_

最新推荐文章于 2024-02-27 17:45:16 发布

阅读量1k

点赞数 3

文章标签： vue BootstrapVue 导航栏博客

本文链接：https://blog.csdn.net/li3455277925/article/details/102467549

版权

小白搭博客（基于SpringBoot+Vue）专栏收录该内容

23 篇文章 17 订阅

订阅专栏

废弃说明：
这个专栏的文章本意是记录笔者第一次搭建博客的过程，文章里里有很多地方的写法都不太恰当，现在已经废弃，关于SpringBoot + Vue 博客系列，笔者重新写了这个系列的文章，不敢说写的好，但是至少思路更加清晰，还在看SpringBoot + Vue 博客系列文章的朋友可以移步：https://blog.csdn.net/li3455277925/category_10341110.html，文章中有错误的地方或者大家有什么意见或建议都可以评论或者私信交流。

删除HelloWorld.vue，在components文件夹下面新建一个navBar.vue组件，用来展示导航栏。此处用到BootstrapVue中的Nav组件：

navBar.vue

<template>
  <!-- variant属性用于调节导航栏的颜色 -->
  <b-navbar toggleable="lg" type="light" variant="light" sticky="true" fixed="top">
    <b-navbar-brand href="/">清沐的博客</b-navbar-brand>
    <!-- 该组件的target属性和下方标签的id对应，表示页面缩小之后要折叠的内容 -->
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <!-- 搜索框 -->
      <b-nav-form>
        <b-form-input size="sm" class="mr-sm-2" placeholder="请输入关键词"></b-form-input>
        <b-button size="sm" class="my-2 my-sm-0" type="submit">搜索</b-button>
      </b-nav-form>
      <!-- 导航栏右侧内容 -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item to="/">写博客</b-nav-item>
        <b-nav-item to="/">归档</b-nav-item>
        <b-nav-item to="/">关于我</b-nav-item>
        <b-nav-item to="/">留言</b-nav-item>
        <!-- 登录后操作下拉框 -->
        <b-nav-item-dropdown text="芊雨" right>
          <b-dropdown-item href="#">退出登录</b-dropdown-item>
        </b-nav-item-dropdown>
        <!-- 头像,外面嵌套b-nav-item是为了让头像上下居中 -->
        <b-nav-item>
          <b-img rounded="circle" blank="true" blank-color="red" class="head-img"></b-img>
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
  name: "navBar"
};
</script>

<style scoped>
.head-img {
  width: 25px;
  height: 25px;
}
</style>

官方文档

查阅文档可知：
b-navbar的属性含义：type为文字颜色，variant为主题颜色，sticky=“true” fixed="top"可设置其固定在页面上方
b-img的属性：round为图片形状，blank为是否是空白图片，blank-color为图片的背景色

这里颜色的设置可以参考Button里的颜色设置：
颜色参考

修改App.vue，将导航栏放在最上面

<template>
  <div id="app">
    <navBar></navBar>
    <router-view />
  </div>
</template>

<script>
import navBar from "@/components/common/navBar";
export default {
  name: "App",
  components: {
    navBar
  }
};
</script>

<style scoped>
</style>

在page文件夹下新建mainPage.vue文件，做主页面使用（注意不能使用main命名，否则会报错）

<template>
<div>
  mainPage
</div>
</template>

<script>
export default {
  name: "mainPage"
};
</script>

<style scoped>
</style>

在路由里注册mainPage.vue（也就是将/src/router/index.js修改为下面内容）

import Vue from 'vue'
import Router from 'vue-router'
import mainPage from "@/components/page/mainPage"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'mainPage',
      component: mainPage
    }
  ]
})

修改index.html，修改网页标题，网页背景色，网页图标（将图标命名为facvion.ico，放在/static/images/下）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 网页图标 -->
  <link rel="shortcut icon" type="image/x-icon" href="./static/images/favicon.ico" rel="external nofollow" />
  <title>清沐的博客</title>
  <style>
    html,
    body,
    #app {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
      background-color: #E9EAED;
    }
  </style>
</head>

<body>
  <div id="app"></div>
</body>

</html>

运行项目，效果如下图：

运行效果图

风絮_

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
基于Spring Boot+Vue的博客系统 02——导航栏设计

删除HelloWorld.vue，在components文件夹下面新建一个navBar.vue组件，用来展示导航栏。此处用到BootstrapVue中的Nav组件：navBar.vue<template> <b-navbar toggleable="lg" type="light" varia...
复制链接

扫一扫