《Web应用基础》课程结业报告

一、网页概述

本网页主题为《世界一级方程式》，包括主页，F1简介，荣誉墙，视频墙，照片墙五个页面。

主页

你可以在这里看到有关F1的轮播图片和我是如何走进F1的世界的。

 F1简介

这个页面包含了关于F1和FIA国际汽车联合会的简介与官方网址。

F1荣誉 

这个页面包含了F1赛车的起源，十位伟大的F1车手和2022赛季锦标赛的介绍

 视频

这个页面包含了六个F1的精彩视频 

 照片墙

这个页面包含了六张关于F1的图片

 二、开发过程

先给出App.vue组件

 

整体结构：该组件包含一个 div 标签，id 属性设置为 “nav”，用于包裹导航栏的内容。

标题和音乐控制：在导航栏中，.h-title 类设置了标题和音乐控制的部分。

• div-title 类用于包裹标题和音乐控制按钮。
• <a> 标签用于包裹标题，并设置了一个链接地址 #。
• music-control 类用于包裹音乐控制按钮，使用 @click 监听点击事件，并调用 musicCtrol 方法。
• 音乐控制按钮是一个 div 标签，根据 musicState 的值来显示不同的音乐开关图标。

音乐播放器：使用 <audio> 标签来嵌入音乐播放器，通过 ref 属性获取到该标签的引用。

• controls 属性显示音乐播放器的控制条。
• autoplay 属性自动开始播放音乐。
• hidden 属性隐藏音乐播放器。

导航菜单：使用 <ul> 标签和 .navv 类来显示导航菜单。

• 导航菜单中的每个项使用 <li> 标签来包裹，并通过 <router-link> 组件实现路由导航。

<router-view>：这是一个用于显示当前路由组件的占位符。当路由切换时，相应的组件将渲染到这个位置。

 

 

mounted生命周期钩子：

• 在 mounted() 钩子中，通过设置 document.documentElement.className 来解决在GitHub Pages中引入CSS图片无法获取的问题。
• NODE_ENV 是从环境变量中获取的。

setup函数：

• 使用 ref 函数创建了一些响应式变量：audio、musicState、hour、minute 和 second。
• audio 变量是一个引用，可用于引用 <audio> 标签。
• musicState 是一个布尔值，表示音乐播放状态，初始值为 false。
• musicCtrol() 方法用于切换音乐播放和暂停状态。根据 musicState 的值来控制音乐的播放和暂停。
• 通过 setInterval() 定时器每秒钟获取当前的小时数、分钟数和秒数，并将其赋值给相应的响应式变量。
• 最后，通过 onMounted() 钩子在组件挂载后执行定时器逻辑。

返回响应式变量和方法：

• 在 return 语句中，将上述的响应式变量和方法作为组件的响应式属性返回。

 

 

样式：

• h2 标签样式: 设置了字体粗细、颜色、字母间距、字体大小。
• a 标签样式: 去除了文字装饰。
• ul 标签样式: 去除了默认样式和项目符号。
• .h-title 类样式: 设置了粘性定位、顶部位置、背景颜色和阴影效果。
• .music-control 类样式: 设置了绝对定位和位置属性。
• .music-control img 样式: 设置了图片的高度、宽度和透明度。
• .div-title h1 样式: 设置了标题的颜色、居中对齐和内边距。
• .navv 类样式: 设置了外边距、显示方式、横向对齐、宽度、内边距和顶部边框。
• .navv a 样式: 设置了字体大小、内边距、字体粗细和颜色。

 

 

通过该模板代码，可以实现一个具有标题、音乐播放器和导航菜单的导航栏组件。

1.主页

轮播图

 主页主要是轮播图的实现，其中，轮播图用一个<ul>元素包裹多个<li>元素，每个<li>元素代表一张图片。通过设置left属性，将当前显示的图片移动到视图中

样式如下： 

 

 切换轮播图片

手动切换

通过点击向右和向左的按钮可以切换到相邻的图片。点击向右按钮时，将num增加1，如果num大于6，则将其重置为1；点击向左按钮时，将num减少1，如果num小于1，则将其重置为6。根据新的num计算出新的偏移量leftLength，并通过DOM操作将轮播图移动到相应的位置。

 

自动切换

在组件挂载后，启动一个定时器，每隔3秒自动切换到下一张图片。定时器回调函数中，将num增加1，如果num大于6，则将其重置为1。根据新的num计算出新的偏移量leftLength，并通过DOM操作将轮播图移动到相应的位置。同时更新导航栏的样式，将当前图片对应的导航点设置为选中状态。

 

 

导航栏功能

在页面底部的导航栏中，通过多个圆点表示不同的图片。点击其中一个圆点时，根据点击的索引值切换到相应的图片，并更新导航栏的样式，将当前图片对应的导航点设置为选中状态。

 

组件的实现通过Vue 3的setup()方法来配置和设置组件，使用了一些Vue的便捷函数和原生JavaScript DOM操作，以及一些CSS样式来实现轮播图的功能和样式。组件提供了一些变量和函数来进行交互和动态绑定，在挂载到DOM后自动启动定时器进行自动切换轮播图的功能。通过这些功能的组合实现了一个完整的轮播图组件。

 2.F1简介

这个页面制作较为简单，用于展示F1与FIA的简介内容。

布局和样式

<section> 元素使用class= “profile-section” 和 id=“profile” 对整个模块进行定位和样式控制。

 

 

 

.profile-container 类用于对整个内容区域进行样式设置，包括设置了固定宽度和水平居中。

.left-area 和 .right-area 类分别对左侧和右侧内容区域进行样式设置，包括设置了宽度为50%和相对定位。

.img-F1 类用于对图片进行样式设置，包括设置了圆角、宽度、高度和边框。在鼠标悬停时，通过 :hover 伪类改变边框颜色。

.bg-area 类为背景区域提供了样式，包括背景颜色、边距和阴影效果。

.btn-a 类为了解更多的按钮提供了样式，包括背景颜色、内边距和圆角。在鼠标悬停时，通过 :hover 伪类改变背景颜色。

scoped 属性确保这些样式仅适用于当前组件，并不会影响其他组件的样式。

内容的展示

上图包含了所以不重复给出代码。

在左侧区域，使用 <img> 元素展示一张带有链接的图片，通过 <h3> 元素显示标题，通过 <p> 元素显示描述内容，最后通过 “了解更多” 的按钮链接提供更多信息。右侧同理。

3.荣誉

这个页面主要通过时间线的形式展示了三个部分：F1赛车起源、F1十位伟大车手、2022赛季世界一级方程式锦标赛。

F1赛车起源

这是关于F1赛车起源和发展的描述。它利用class="fa fa-heart-o"显示了一个心形图标,这个图标来自图标库，这是它的引入：import 'font-awesome/css/font-awesome.min.css'，并在图标旁边显示了一个标题和一段描述性的文本。

 

另外两个类似，不做过多解释 

 css展示

 

 

.honor-section 设置背景颜色为白色，上方内边距为40像素。

.honor-wrap 设置宽度为1170像素，水平居中，左右内边距为15像素。

.timeline 在时间线之前添加一个垂直的线条，线条颜色为#555。

.timeline li 设置每个事件项的容器高度为200像素，并设置下方内边距为70像素，以保证垂直排列。

.timeline-image 设置时间线中心图标的样式，图标背景颜色为一种深灰色，圆形样式，垂直居中显示，字体颜色为白色。

.timeline-panel 设置事件内容面板容器的左侧对齐，左内边距为100像素，宽度占35%。

.timeline-panel-right 设置事件内容面板容器的右侧对齐，右内边距为100像素，宽度占35%。

.timeline-panel h2 设置事件标题的样式，居中对齐，字体大小为28像素，字母间距为1像素，字体颜色为一种橙色。

.timeline-panel-right h2 设置右侧对齐的事件标题的样式，其他属性与上述相同。

.timeline-panel p 设置事件内容的样式，颜色为一种淡粉色，文本右对齐。

.timeline-panel-right p 设置右对齐的事件内容的样式，其他属性与上述相同。

.honor-header h2 span 设置事件标题中的 “的” 字的样式，颜色为一种灰色，左右边距为8像素。

.line 设置一个水平分割线的样式，线条高度为5像素，颜色为一种灰色，最大宽度为90像素，居中对齐。

.intro 设置事件副标题的样式，颜色为一种灰色，字体大小为18像素。

4.视频

这个页面用于展示有关F1的视频合集。该组件包含三个视频行，每个视频行都包含左侧和右侧两个视频面板。每个视频面板都包含一个标题和描述。在每个视频行中，左侧的视频面板显示视频的标题和描述，而右侧的视频面板显示另一个视频的标题。每个视频面板标题下方都有一个链接，点击链接后会打开一个新窗口，并跳转到指定的链接地址。

视频行

这是其中一个视频行的代码：

 其他视频行的代码类似，故不放出。

样式

.video-body：设置视频区域的宽度、内边距、外边距和定位属性。

.video-row：设置每一行视频的样式，包括高度、内边距、外边距和对齐方式。

.video-row h2：设置视频标题的字体大小和颜色。

.video-row p：设置视频描述的行高、字体大小和颜色。

.video-panel-left：设置左侧视频面板的宽度和文本对齐方式。

.video-link-left img 和 .video-link-right img：设置左右两侧链接图片的边框样式、圆角和尺寸。

.video-panel-right：设置右侧视频面板的宽度和文本对齐方式。

 5、照片墙

这个页面展示了有关F1的图片，包含了多张图片与其对应的标题。

组件模板

 

该组件包含一个section标签用于包裹整个照片墙的内容。section的class属性设置为"picture-section"，id属性设置为"picture"。

在section中，div标签设置了一个照片墙的标题和介绍。h2标签用于显示标题，class设置为"pic-header"。hr标签用于显示一条水平线，class设置为"line"。span标签用于显示介绍文字，class设置为"intro"。

在div标签中，包含了两个row-wrap的div标签。row-wrap用于包裹每一行的照片。每个row-wrap包含三个div标签，每个div标签显示一张照片和相应的标题。

每个div标签中，包含一个img标签和一个h1标签。img标签用于显示图片，src属性使用了相对路径。h1标签用于显示图片的标题。

样式

 

.picture-section 类被应用于组件最外层的 section 标签。它设定了背景色为白色，并给顶部添加了30px的内边距。

.pic-wrap 类定义了整个照片墙的样式。设置了10px的内边距，120px的左右外边距，并将其居中显示。

.row-wrap 类用于包裹每一行照片。采用了flex布局，并使用了 justify-content: space-between 将照片水平间距均匀分布，并在每行之间添加了5px的下边距。

.row-wrap img 类设置了每个图片的样式，包括固定的宽度、高度、边框盒模型和圆角化等。

三、遇到的问题

1.页面的跳转

问题描述：普通的页面跳转无法保留顶部的菜单栏，要保留的话会有很多重复代码。

2.打包时出错

问题描述：打包build时，出现Opening index.html over file:// won't work.

3.页面部署后出错

 问题描述：使用vue-cli构建的应用(vue-router history mode)，打包发布到github pages之后，无法正常运行。当直接访问类似 https://user.github.io 的链接时，抛出404错误。

4.CSS引入图片打包后,访问路径错误

问题描述：部署后无法获取资源，显示不出图片

四、问题解决

1.页面的跳转

• 一般页面跳转是指通过超链接或JavaScript代码触发浏览器跳转到新页面的过程。
• 页面跳转是传统的多页应用(MPA)的一种方式，每次跳转都会重新加载整个页面。
• 页面跳转可以使用浏览器的location对象、超链接<a>标签、JavaScript的window.location等实现。

要是这样写的话就会多出很多重复的代码去保留顶部的菜单栏了。

Vue Router跳转：

• Vue Router是为单页应用(SPA)设计的路由管理工具，侧重于在同一个页面内切换视图组件，实现无刷新更新内容。
• Vue Router使用了Vue的组件系统和响应式机制，可以动态渲染不同的组件，而无需重新加载整个页面。
• Vue Router通过改变URL来触发路由切换，但实际上仍然保持在同一个HTML页面，只是更新了特定区域的内容。

用vue-router就可以降低代码重复度，提高效率了。

2.打包时出错

解决：

改config\index.js中的build的对象

assetsPublicPath: '/',

改为

assetsPublicPath: './',

即可

当然也可以在dist，执行以下命令：

cd dist

npm install -g http-server

hs

3.页面部署后出错

Github pages原生不支持单页面应用，没有为前端路由提供支持，并且为了安全，也不支持自定义后台配置。因此，我们没办法直接配置服务来fallback我们的应用。所以要将router的history创建成HashHistory而不是History，这样虽然页面的url会难看，但是可以正常访问。

4.CSS引入图片打包后,访问路径错误

因为打包后图片是在根目录下,用相对路径肯定报错，把图片放到assets目录下,然后相对路径,打包后就正常了。

五、总结 

本次web结业作业学习了vue这个前端框架。对前端页面组件化。还有通过路由实现单页面不刷新切换有了一定的了解。同时学会了如何将自己的web页面托管到免费的服务器上。同时，相比学习c++ ，java等编程语言要花很久时间很大功夫才能看到自己的成果。web的学习能更快的完成自己的成果，更容易获得成就感。