# 时间
现在已经 2022 年 5 月 10 日 09:57:02 了，提交作品是 20 号，虽然网页早已完成，但是 PPT 还没有动，所以这篇博客主要就来思考一下 PPT 要写什么，如何去介绍这个网页，这个网页用到了什么技术，为什么要做这个网页，围绕这几点，看看能不能想出一大堆文字，这样我滴任务就完成了。
询问了老师的意见，PPT 的作用就是用来介绍网页和队友的，所以使用博客来介绍网页性质是一样的，因为我的审美实在是太差啦，所以我还是使用博客来讲解此网页吧，毕竟我的话比较多，如果做 ppt，文字太多实际上是非常不美观的。
# 起因
我来蓝色技术工作室已经三个学期了，即使当上了团支书，也没有为这里做过什么很有意义的事情，能参加的比赛也是少之又少，拿不出什么成绩，感觉这个社团要凉凉了，但是硬件那边能参加的比赛很多，所以一直支撑这我们，为了这个社团，软件这里也需要多参加活动，保持活跃度，让大家都认识到这里是干什么滴，就这样想着开始从零开始，先参加学院的比赛打磨自己，就有了这个网页，其实还有很多滴原因。
比如软件这边展示的东西很少，也就是没有，大部分同学都是后端，只能写一写接口，这样怎么能拿出去展示，机械就不一样了，能做出许多好玩的东东，航模，智能车，3D 打印。相比软件，唯一能展示的只有网页了，所以刚学完 vue 的我准备自己写一个小小小的项目来巩固一下自己的知识，就想出了这个宣传网站，这样纳新的时候也许就可以展示这个拉夸的网页，让大家都清楚这个社团是干什么的，能为自己带来什么，这也许就是为什么诞生了这个拉夸的网页的原因～～
其实真正的原因就是... 胃痛患者参加了上学期学院的移动开发设计拿了二等奖领了一个雷蛇鼠标，我也想要！！！这才是主要原因，但是我总不能说我是想要鼠标和键盘才来参加比赛的吧，所以我只能说是，因为软件队能展示的东西只有网页，不然宣传社团的时候东西全是硬件队，软件队就会毫无存在感，好像两个都很重要，所以为了这些，我才有动力去完成这个网页，虽然没花几天，实际上我一两天就可以完成，毕竟功能不多，设计拉夸，毫无美感，但依旧是我的First Vue Web
# PPT
讲了许多没用的废话，现在可以开始思考一下如何去介绍网页了，为了不浪费大家的时间来看这个拉夸的网页，所以我准备 PPT 和网页以及代码同时讲，能讲的东西不算多，所以放在一起更好。
# SPA 单页面应用程序
开始之前肯定要介绍一下 SPA 单页面应用程序 然后演示一下 SPA 与其他网页的区别
什么是单页面应用程序
单页面应用程序 （英文名:Single Page Application）简称 SPA，指的就是一个 Web 网站中只有唯一一个 HTML 页面，所有的功能和交互都在这唯一的一个页面内完成单页面应用程序的特点
单页面应用程序将所有的功能局限于一个 web 页面中。仅在该 web 页面初始化时加载相应的资源（HTML，JavaScript，CSS）
一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换 HTML 内容，从而实现用户的交互。
单页应用程序的优点
良好的交互体验
- 单页面应用的内容的改变不需要重新加载整个页面
- 获取数据也是通过 Ajax 异步获取
- 没有页面之间的跳转，所以不会出现 “白屏现象”
良好的前后端工作分离模式
- 后端专注于提供 API 接口，更容易实现 API 接口的附庸
- 前端专注于页面的渲染，更利于前端工程化的发展
减轻服务器的压力
- 服务器只需提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍。
单页应用程序的缺点
- 首屏加载慢
- 不利于 SEO
文字太多懒得看，用几句话总结就是：SPA 非常好用，所有的功能和交互都在这唯一的一个页面内完成，跳转到其他页面不会刷新，但不管什么东西都是有缺点的，如果页面较大，那么开始加载网页的时候就会比较慢，即使是这样也可以通过懒加载来解决这个问题，也就是需要的时候加载，不需要的时候不加载。
# 组件库
作品使用了这两个组件库，有了这两个组件库给我带来了许多的帮助，所以为什么说两天就能做好了，
- Vant 轻量、可靠的移动端 Vue 组件库
- Element Ui 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
# 首页
刚进入页面的时候可以看到 Element Ui 中的对话框，提示同学疫情注意安全和配合学校工作。
使用了 Vant 组件中的 NavBar 导航栏，Swipe 轮播。
- 其中在 NavBar 导航栏中，使用作用域插槽把蓝色技术工作室的图标嵌入进去，并加了一个点击事件，也就是返回上一级。
即使是有组件库也无法满足，所以封装了一个活动组件，由于宣传页面不需要过多的数据，所以模拟后台发送 ajax 数据 通过
v-for来循环渲染和传参。点击卡片后可以跳转到相对应的页面。
✔️伪数据
ActivityList: [ | |
{ | |
img: 'https://i.ibb.co/v3CPzDj/Active-img-01.jpg', | |
font_title: '江西科技学院第四届轮式机器人竞速', | |
font_content: '为了加强我校大学生软硬件知识学习，提高实际运算能力，蓝色技术开始进行江西科技学院第四届轮式机器人竞速赛，比赛于2021年11月29日在J8-101举行', | |
type_font: '竞赛', | |
time: '2021.12.13' | |
}, | |
{ | |
img: 'https://i.ibb.co/4gJTyf0/1.jpg', | |
font_title: '蓝色技术工作室冬至饺子宴', | |
font_content: '时遇冬至，新加入工作室的小伙伴们已经开始融入这个集体，为了给大伙在忙碌之余增添些色彩，蓝色技术工作室特举办了一场盛大的饺子宴', | |
type_font: '活动', | |
time: '2021.12.22' | |
}, | |
{ | |
img: 'https://www.weihaisheng.com/wp-content/uploads/2021/12/2021-768x512.jpg', | |
font_title: '蓝色技术工作室年度总结', | |
font_content: '新年的到来是对过往的检讨对未来的期望,2021已去对过去的一年,总要有句结束语跟着零碎的图片共同回忆惆怅的2021', | |
type_font: '总结', | |
time: '2022.1.1' | |
}, | |
] |
✔️v-for 循环渲染与传参
<Activity | |
v-for="(item,index) in ActivityList" | |
:key="index" | |
:time="item.time" | |
:active_img="item.img" | |
:font_title="item.font_title" | |
:font_content="item.font_content" | |
:active_type="item.type_font" | |
@click.native="Hop_routing(index)"> | |
</Activity> |
# 活动页
- 点击左上角的图标即可返回上一个页面
this.$router.go(-1); - 当然，在右上角的菜单中也有返回上一级的按钮，使用了 Vant 和 Element Ui 中的抽屉和单元格
# robot
只有这个页面使用了 ajax 来请求数据
使用 v-model 与 input 表单相互绑定，然后绑定按钮，点击触发后发送 ajax 数据，并渲染页面
// 发送 | |
async send() { | |
if (this.ipt_text.trim() === '') { | |
this.ipt_text = '' | |
return Toast.fail('输入内容为空'); | |
return | |
} | |
let text = this.ipt_text | |
$(".talk_list").append(` <li class="right_word"> | |
<img style="width: 40px;height: 40px;border-radius: 50%" src="data:image/png;base64,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" /> | |
<span>${text}</span> | |
</li>`); | |
this.ipt_text = '' | |
this.myList = text; | |
const {data: res} = await axios.get('http://www.liulongbin.top:3006/api/robot', { | |
params: {spoken: text} | |
}) | |
// 清除 输入框内容 | |
let robot = res.data.info.text; | |
$(".talk_list").append(` <li class="left_word"> | |
<img style="width: 40px;height: 40px;border-radius: 50%" src="https://jxut-bst.github.io/uploads/avatar.png" /> | |
<span>${robot}</span> | |
</li>`); | |
// console.log(res) | |
}, |
考虑到 PC 端，按下回车键也可以触发按钮
如果技术扎实，完全可以把对话框封装成组件来使用，但是使用了 jquery 来渲染页面
$(".talk_list").append(` <li class="left_word"> | |
<img style="width: 40px;height: 40px;border-radius: 50%" src="https://jxut-bst.github.io/uploads/avatar.png" /> | |
<span>${robot}</span> | |
</li>`); |
# 好队友
| 队员 | 性别 | 班级 | 所做的事 |
|---|---|---|---|
| 李昊 | 男 | 20 专软件 4 班 | 页面布局与样式，编写博客介绍此网页 |
| 于佳琦 | 女 | 20 本计算机 5 班 | 提供相关图片，编写文案，提供样式建议 |
| 宁楠 | 男 | 21 专软件 5 班 | 提供伪后台代码与机器人接口 |
