spring boot+vue个人博客四：首页和公共头部组件

最新推荐文章于 2025-01-14 16:42:13 发布

原创最新推荐文章于 2025-01-14 16:42:13 发布 · 923 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#个人博客 #html #vue

实战专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍使用Vue.js搭建前端应用的过程，包括配置路由、创建首页及头部组件，并解决重复点击路由的常见问题。通过实际代码示例，展示如何设置路由、编写组件样式和JS逻辑，实现优雅的页面切换与交互。

系列大纲
GitHub（还没开发完成）
在线演示www.yzpnb.top
第一章：(后端)搭建spring boot脚手架：https://blog.youkuaiyun.com/grd_java/article/details/107452826
第二章：权限整合shiro+jwt，完成后端接口：https://blog.youkuaiyun.com/grd_java/article/details/107481570
第三章：搭建前端vue整合element ui脚手架：https://blog.youkuaiyun.com/grd_java/article/details/107498140
第四章：首页和公共头部组件：https://blog.youkuaiyun.com/grd_java/article/details/107507213
第五章：完成登陆注册页面，nginx网关对接后端：https://blog.youkuaiyun.com/grd_java/article/details/107515437
第六章：博客页面，观看博客，博客编辑功能：https://blog.youkuaiyun.com/grd_java/article/details/107525128
第七章：打包部署，多节点部署方案：https://blog.youkuaiyun.com/grd_java/article/details/107533253

一、首页

在这里插入图片描述

1、创建路由页面和路由

在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Login from '../views/login.vue'
import Blog from '../views/blog.vue'
import BlogEdit from '../views/blogEdit.vue'
import BlogDetail from '../views/blogDetail.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/Login',
    name: 'Login',
    component: Login
  },
  {
    path: '/Blog',
    name: 'Blog',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Blog
  },
  {
    path: '/Blog/Edit',
    name: 'BlogAdd',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: BlogEdit
  },
  {
    path: '/Blog/Edit/:BlogId',
    name: 'BlogEdit',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: BlogEdit
  },
  {
    path: '/Blog/Detail/:BlogId',
    name: 'BlogDetail',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: BlogDetail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2、全局样式

在这里插入图片描述

上面`//注释`不要加
css中注释是/**/而不是//，加上会报错

3、编写home首页(先简单做一个，之后详细开发)

html标签

在这里插入图片描述

  <div class="home">
	<div class="height1">
		<div class="height1_Div">
			<h1>My-Blog</h1>
			<p>只要朝着一个方向努力，一切都会变得心应手</p>
			<el-button type="primary" id="height1_button" @click="enterBlog()">Enter Blog</el-button>
		</div>
	</div>
</div>

样式

在这里插入图片描述

<style>
	/*首页面*/
  .height1{
	  background-image:url(http://www.lzqcode.com/templets/static/image/index_bg.jpg);/* 首页背景图片 */
	  background-position: center;/* 背景图片位置始终居中显示 */
	  background-attachment: fixed;/* 背景固定 */
	  background-repeat: no-repeat;/* 不平铺 */
	  position: relative;/* 相对定位 */
	  height: 100vh;/* 100vh表示正好和浏览器窗口大小一致 */
  }
  .height1_Div{
	  transition: 1.5s;/* 动画效果 */
	  transform: scale(.3);/* 缩放 */
	  color: rgb(255,255,255);/* 文字颜色 */
	  height: 20vh;/* 高度为浏览器20比 */
	  width: 100%;/* 宽度正好撑满 */
	  /* 以下是块级元素居中方案 */
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
  }
  .height1_Div h1{
	  font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;/* 设值文字 */
	  display: block;/* 转换为块级元素，让其独占一行 */
	  font-size: 2em;/* 字体大小 */
	  /* 外边距*/
	  margin-block-start: 0.67em;
	  margin-block-end: 0.67em;
	  margin-inline-start: 0px;
	  margin-inline-end: 0px;
  }
  .height1_Div p{
	  font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
	  margin: 20px 0;
	  letter-spacing: 10px;/* 文字间距 */
	  display: block;
	  /* 外边距*/
	  margin-block-start: 1em;
	  margin-block-end: 1em;
	  margin-inline-start: 0px;
	  margin-inline-end: 0px;
  }
  #height1_button{
	  margin-top: 20px;
	  display: inline-block;
	  height: 38px;
	  line-height: 38px;
	  padding: 0 18px;
	  text-align: center;
	  font-size: 14px;
	  border: none;
	  border-radius: 2px;
	  cursor: pointer;/* 鼠标指针指入变为手的形状 */
  }
</style>

4、js代码

在这里插入图片描述

export default{
		data(){
			return{
				
			}
		},
		created() {
			/*初始动画效果*/
			window.onload=function(){
				let height1_Div=document.querySelector(".height1_Div");
				height1_Div.style.transform="scale(1,1)";
			}
		},
		methods:{
			enterBlog(){
				this.$router.push({name:"Blog"})
			}
		}
	}

二、公共头部组件

在这里插入图片描述

1、代码

html

在这里插入图片描述

<template>
  <header class="Handler">
	  <div class="header-fixed">
		  <div class="header-inner">
			  <a href="javascript:void(0)" class="header-logo" id="logo">Mr.liu</a>
			  <nav class="nav" id="nav">
				  <ul>
					  <li><a href="/" >首页</a></li>
					  <li><a href="#" @click.stop.self="blog()">博客</a></li>
					  <li><a href="#" @click.stop.self="leaveWord()">留言</a></li>
					  <li><a href="#" @click.stop.self="diary()">日记</a></li>
					  <li><a href="#" @click.stop.self="FriendsOfTheChain()">友链</a></li>
				  </ul>
			  </nav>
			  <a href="#" class="blog-user">
				  <i class="el-icon-user-solid" @click="login()"></i>
			  </a>
			  <a class="phone-menu">
				  <i></i>
				  <i></i>
				  <i></i>
			  </a>
		  </div>
	  </div>
  </header>
</template>

css

<style scoped>
.Handler{
	width: 100%;
	min-height: 60px;
	position: fixed;
	background-color: rgba(255,255,255,1);
	z-index: 999;
	top: 0;
	left: 0;
	border-bottom: 1px solid #e8e9e7;
	font-size: 14px;
	
	display: block;
	font: 14px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
	color: #515250;
	-webkit-font-smoothing: antialiased;
	
	overflow: hidden;
}
.header-fixed {
    width: 90%;
}
.header-fixed {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.header-inner {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}
.header-logo {
    font-family: "agency fb";
    font-size: 40px;
    color: #444647;
    text-align: center;
    position: absolute;
    left: 0;
}
a, img {
    text-decoration: none;
    border: none;
}
#nav{
    display: block;
    position: absolute;
    right: 15%;
	margin: 0;
	padding: 0;
	border: 0;
}
ul {
    display: block;
    list-style-type: disc;
}
.nav li {
    display: block;
    float: left;
    margin: 10px 5px;
    position: relative;
}
.nav li:before {
    width: 0;
    height: 2px;
    position: absolute;
    bottom: -11px;
    left: 50%;
    background-color: #6bc30d;
    content: "";
    transition: all .6s;
    z-index: -1;
}
.nav li:hover:before {
    width: 100%;
    left: 0;
}
li {
    list-style: none;
}
.nav li a {
    display: block;
    line-height: 32px;
    padding: 4px 28px;
    color: #212220;
    font-weight: 400;
    font-size: 15px;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    -webkit-transition: all .2s;
    transition: all .2s;
}
.blog-user{
	position: absolute;
	right: 0;
	line-height: 60px;
	font-size: 24px;
	color: #000000;
}
</style>

js

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
	  blog(){
		  this.$router.push({name:'Blog'})
	  },
	  login(){
		  this.$router.push({name:'Login'})
	  },
	  leaveWord(){
		  // this.$router.push({name:'留言'})
	  },
	  diary(){
		  // this.$router.push({name:'日记'})
	  },
	  FriendsOfTheChain(){
		  // this.$router.push({name:'友链'})
	  },
  }
}
</script>

2、解决路由重复点击报错

在这里插入图片描述

const originalPush = VueRouter.prototype.push

 VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

3、引用组件

在这里插入图片描述

<template>
	<div>
		<Handler id="handler"></Handler>
		lll
	</div>
</template>

<script>
	import Handler from '@/components/Handler.vue'
	export default{
		components:{
			Handler
		}
	}
</script>

<style>
	#handler{
		position: relative;
	}
</style>