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

最新推荐文章于 2024-06-18 07:03:35 发布
最新推荐文章于 2024-06-18 07:03:35 发布
阅读量1.2k 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44751671/article/details/121538564
版权

前一段时间使用的意志都是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查看结果

在这里插入图片描述

小威爱发牌
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue+Spring Boot实现Excel上传功能
08-26
使用Vue+Spring Boot实现Excel上传功能 在本文中，我们将介绍如何使用Vue+Spring Boot实现Excel上传功能。该功能主要由两个部分组成：前端部分使用Vue实现Excel上传，后端部分使用Spring Boot处理上传的Excel文件。...
SpringBoot 整合系列导航
11-15 442
一、SpringBoot整合 mybatisPlus-入门篇 二、SpringBoot整合MybatisPlus 实现多租户 三、SpringBoot 整合MybatisPlus 实现字段自动注入
springboot常用前端页面模板和框架
最新发布
猿脑2.0的博客
06-18 574
以上是一个简单的例子，展示了如何在 Spring Boot 应用程序中使用 Thymeleaf 模板引擎。根据你的项目需求，你可以选择合适的模板引擎来构建你的前端页面。Spring Boot 通常与各种前端技术结合使用，其中一种常见的方式是使用模板引擎来生成静态页面。（Gradle）文件中，然后设置好控制器来处理请求并返回模板视图。要开始使用模板引擎，通常需要添加相应的依赖到你的。
Springboot新生导航网站的设计与实现 毕业设计-16603
Weixin_CXSJ881的博客
05-17 781
新生导航网站主要包括用户端和管理端,用户端功能模块包括校园资讯、洗衣机信息、学校信息、学校场所、问答社区、跳蚤市场等，管理端功能模块包括公共管理、用户管理、二手市场管理、论坛管理等，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，本文采用Java语言、Springboot框架、Ajax技术进行业务系统的编码及其开发，完成了系统的主要模块的页面设计和功能实现....
vue实现导航栏功能的方法
花生日记
06-04 6155
为此，我们使用如下代码来实现。在该代码中，我们需要先将 button.dialog-position属性设置为 true，然后在后面加上一个 flag. position属性，其作用为使 button.dialog-position属性的值在 DOM中可见，这样可以使用户通过 button.dialog-position属性看到 button.dialog-position属性的值。因此，我们先在初始页面添加一个子组件，如下： 接下来，我们需要给导航栏添加一些内容，以便方便我们查看。
九 Springboot-页面模板`Thymeleaf`
姚桑带你学Java与架构
12-23 454
9.1 什么是Thymeleaf ​ 开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。 SpringBoot支持如下页面模板语言Thymeleaf,FreeMarker,Velocity,Groovy,JSP等 其中Thymeleaf是SpringBoot官方所推荐使用的，下面来谈谈Thymeleaf一些常用的语法规则。 9.2 Thymeleaf入门 步骤分析： 1 首先要想让springboot支持Thymeleaf必须先导入对应starte
（十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-23 6330
VUE侧边菜单栏导航设计（1）理解并逐步掌握VUE组件的含义；（2）深入理解VUE单页面应用；（3）初步掌握VUE路由的概念和使用方法。
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计（学习笔记07）
m0_57619948的博客
10-11 1295
一、导航栏的实现 这个导航栏的要求很简单： 能够在每个页面显示 美观 1.路由配置 为了实现第一个要求，我们需要把导航栏放在其它页面的父页面中（对 Vue 来说就是父组件），之前我们讲过，App.vue 是所有组件的父组件，但把导航栏放进去不合适，因为我们的登录页面中不应该显示导航栏。 为了解决这个问题，我们在 components 目录下直接新建一个组件，命名为 Home.vue，原始代码如下： 打开router/index.js，修改代码如下 2.使用 NavMenu 组件 ..
springboot——（6）添加一个vue项目调用springboot接口
qifengsunny的博客
08-25 4386
前两篇博文描述了node.js下载安装、cnpm创建vue项目相关内容，我们得到了一个能运行的最基础的vue框架。具体博文如下： https://blog.csdn.net/qq_15903671/article/details/82052035 https://blog.csdn.net/qq_15903671/article/details/82052251 vue项目命令行常用指令： ...
Spring Boot+Vue前后端分离，如何避免前端页面 404
01-08
在前后端分离的开发模式下，Spring Boot与Vue.js结合应用常常会遇到前端页面404错误的问题。这个问题主要是由于前端负责页面跳转，而后端仅提供数据接口导致的。传统的权限管理方式不再适用于这种架构，因此我们需要...
全注解 spring boot +spring security + mybatis+druid+thymeleaf+mysql+bootstrap
12-20
标题中的"全注解 spring boot +spring security + mybatis+druid+thymeleaf+mysql+bootstrap"是一个集成开发环境的配置，涉及到的主要技术有Spring Boot、Spring Security、MyBatis、Druid、Thymeleaf、MySQL以及...
毕业设计基于Springboot+Vue高校学生社团管理系统源码+sql数据库+项目说明.zip
06-15
首页：图片轮播（5张图片），社团列表的跳转链接，导航栏（logo，系统名字，首页，社团，活动，关于我们，用户头像和姓名，用户账号退出按钮），活动列表的跳转链接，公告（关于社团） 社团页面：两种方式展示...
Sprintboot Java 实现多层级菜单的读取和解析#导航菜单权限#Springboot
jingjiaohuan的博客
02-04 1199
记录开发过程中的经验总结。实现一个简单的菜单分级
《Spring Boot 框架课》3.创建菜单与游戏页面
weixin_49619623的博客
02-10 321
本节课主要实现前端的功能。
SpringBoot+LayUI动态展示侧边导航栏
wssc63262的博客
05-05 7431
采用springboot+mybatis+layui搭建一个动态的侧边导航栏 1.动态展示导航栏的数据如下图 json数据 思想：前端使用layui的标签属性获取到数据，用js进行拼接，展示到页面 2.主要页面代码 NavigationController.java package layui.demo.controller; import layui.demo.servi...
Springboot 项目实战：4 用Bootstrap编写导航栏样式
qq_63978775的博客
08-22 1898
将原来的HelloController修改为IndexController，如下图。项目启动后，在浏览器输入localhost:8887,可以得到如下效果。打开下载文件，复制其中的三个文件夹，粘贴到IDEA项目中的static文件夹中。找到index模板文件的下方的一个文件。（Bootstrap中文网 (bootcss.com)同时在模板文件夹中创建导航栏模板文件。,点击中文文档，选择上方的入门，下载第一个。点开上方的编辑配置，关闭启用启动优化。（宿舍怪谈可以改成别的名字）通过Bootstrap，
从头做图书馆管理系统课设，css3轮播图，导航栏，持续更新~（前端篇1）
终身学习
01-16 2580
  主要包括顶部菜单栏，上bannar图，导航栏，轮播图，在代码编写过程中一定要注意代码规范，千万要写注释，不然自己写着写着自己都忘了哪里是哪里，所有的代码都是手写的最基本的代码没有引入前端框架以便大家理解。   首先是顶部菜单栏： 首先要让顶部固定在浏览器上方不论滚到哪里都在顶部定位采用position: fixed; 底部阴影效果box-shadow:0px 15px 10px ...
springboot+vue图书管理系统:[前台搭建+后台编写]（非常详细）
热门推荐
aniudunaichiji的博客
03-13 1万+
[ springboot+vue练手小项目 ] 技术栈： springboot+vue3+element-plus +Mybaties+hutool +mysql8 项目介绍 ：最近刚学了springboot+vue，就想着做一个小的前后端分离的练手项目，简单的后台管理页面，有基本的登陆注册+增删改查，后面具体的模块等需要的时候的再进行完善，这只是一个练手项目，如果大家运行不出来或者有疑问，欢迎交流。 我是个菜鸟，也不太会写文章，若有不足欢迎指正。 1.环境搭建 1.安装node环境,npm,cli，这
116.【SpringBoot和Vue结合-图书馆管理系统】
qq_69683957的博客
05-18 1692
前后端分离(一)、SpringBoot+Vue概述1.基本概述2.实现技术(二)、Vue3.x搭建 (SpringBoot+Vue)1.搭建Vue基本环境(1).搭建Vue项目框架(2).介绍Vue项目内容2.搭建SpringBoot基本环境(1).创建SpringBootTest项目(2).初始化项目(3).测试SpringBoot的控制层3.通过路由跳转访问组件 ⭐⭐(1).创建Book.vue组件(2).配置路由router/index.js(3).展示在App.vue之下4.SpringBoot+V
spring boot和vue实现导航栏的局部刷新
05-30
好的，下面我将更加详细地介绍如何使用Spring Boot和Vue实现导航栏的局部刷新。 1.创建Vue组件 首先，您需要在Vue中创建一个组件来呈现导航栏。您可以使用Vue Router的“<router-link>”组件来呈现导航栏链接。下面是一个简单的示例： ```vue <template> <div> <nav> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> </nav> </div> </template> ``` 2.创建Spring Boot控制器 接下来，在Spring Boot中，您需要创建一个控制器来处理Vue组件的请求，并使用Thymeleaf模板引擎来呈现Vue组件。下面是一个简单的示例： ```java @Controller public class NavigationController { @GetMapping("/navigation") public String navigation() { return "navigation :: navigation"; } } ``` 在这个示例中，“navigation()”方法处理“/navigation”请求，并返回名为“navigation”的Thymeleaf片段。这个片段只包含导航栏Vue组件的HTML和Vue.js代码。 3.使用Thymeleaf的片段功能 接下来，您需要在HTML页面中使用Thymeleaf的片段功能来呈现Vue组件。下面是一个示例： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <!-- 省略其他头部信息 --> </head> <body> <div id="app"> <div th:replace="fragments/navigation :: navigation"></div> <router-view></router-view> </div> <!-- 引入Vue.js和Vue Router --> <script src="/js/vue.js"></script> <script src="/js/vue-router.js"></script> <!-- 引入您的Vue组件 --> <script src="/js/navigation.js"></script> <script src="/js/app.js"></script> </body> </html> ``` 在这个示例中，“navigation”片段被放置在“<div th:replace="fragments/navigation :: navigation"></div>”中。这将使Thymeleaf只渲染导航栏Vue组件，而不是整个页面。 4.使用Vue的“mounted”生命周期钩子 最后，在Vue组件中，您可以使用Vue的“mounted”生命周期钩子来发出请求并获取导航栏数据。当数据返回时，您可以使用Vue的响应式数据来更新导航栏。下面是一个示例： ```vue <template> <div> <nav> <router-link v-for="link in links" :key="link.id" :to="link.url">{{ link.text }}</router-link> </nav> </div> </template> <script> export default { data() { return { links: [] }; }, mounted() { axios.get('/api/links').then(response => { this.links = response.data; }); } }; </script> ``` 在这个示例中，“mounted”钩子在Vue组件被挂载到页面后发出请求并获取导航栏数据。当数据返回时，它被存储在Vue组件的“links”属性中，并自动更新导航栏。 总结来说，您需要遵循以下步骤来在Spring Boot和Vue中实现导航栏的局部刷新： 1.创建Vue组件来呈现导航栏，其中包含Vue Router链接。 2.在Spring Boot中创建一个控制器来处理Vue组件的请求，并使用Thymeleaf模板引擎来呈现Vue组件。 3.使用Thymeleaf的片段（fragment）功能来呈现Vue组件。 4.在Vue组件中使用Vue的“mounted”生命周期钩子来发出请求并获取导航栏数据。 5.当数据返回时，使用Vue的响应式数据来更新导航栏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值