Vue3项目探索

前言

在我们建立sse连接的时候，由于HTTP/1.1的限制，在该协议下，大多数现代浏览器（如Chrome、Firefox、Edge）对同一域名（协议+域名+端口）的并发连接数限制通常为6个。这意味着，同一个浏览器标签页（或同一浏览器实例）中，对相同域名最多只能同时建立约6个SSE连接，超出此数量的新连接会被浏览器阻塞，直到有连接被关闭。

若需要突破此限制，可考虑以下方案：

组件传值

我上次所撰写的页面属于一个分步骤走的流程页面，因此每个步骤页面都有共同的父组件index.vue，因此各个步骤页面的 数据都是统一通过父组件进行请求和分发的，因此只有父子组件之间的数据流动。这里我是使用的 defineProps和 defineEmits来实现组件双向绑定（v-model）的标准且兼容性广泛的方法。其核心在于理解 v-model 本质上是语法糖，它自动处理了一个名为 modelValue的 prop 和一个名为 update:modelValue的自定义事件 。

实习产生的经验总结

sseDemo演练

概述

由于个人之前未进行sse的代码训练，便进行了sse的相关代码训练操作。

本周主要对SSE的项目进行了系统的训练，通过Nodejs构建后端来进行sse的本地演练测试。该实践基于nodejs的express框架搭建的后端，然后通过vuejs的前端进行请求学习。

后端部分通过设置SSE必需的响应头以及相应的定时器发送数据来建立sse接口，前端部分则通过eventSource.value = new EventSource(sse数据接口地址)来进行连接，利用eventSource.value.onopen,eventSource.value.onmessage 以及 eventSource.value.addEventListener('自定义事件名'，函数)来实现对后端数据的接收。

详细总结

此处包含我个人对项目代码的一些详细解读，当然为了撰写效率，其包含了ai的总结部分，但基本思路和知识是对的就行。

对于SSE的基本知识：SSE简介 | xh's blog

对于源项目代码的解读：SSE服务代码解读 | xh's blog

本周主要是根据学长的安排进入了流量开发小组，主要是对接天翼云后端api进行监听器部分的功能点开发以及创建后端服务器组的功能点实现。

创建监听器

首先是创建监听器的页面，它包含五个步骤，每个步骤都分了单独的页面。由此我将文件分为主文件index.vue和五个步骤的页面文件。主文件便负责了各种页面的数据的请求以及最后创建监听器的请求。

同时此功能点每个步骤间有各类数据的关联，其难点便在于对各组件之间传值的方式的书写。这里我使用的是defineProps结合 defineEmits的方式实现各个组件之间的数据同步的。因为本身Vue 3支持多个v-model绑定，因此可实现更简洁的双向数据流：

本周并未完全按照计划走，而是加上学长的建议进行了一些动态的调整。本周进行了HTTP底层逻辑的复习，Vitest的学习---也是最主要的，同时将我的个人githubpages站点更换为VuePress框架并进行了自动化的githubpages打包上传部署

HTTP

HTTP（超文本传输协议）是一种详细规定了浏览器和万维网服务器之间互相通信规则的应用层协议。它基于TCP/IP通信协议来传递数据，如HTML文件、图片文件、查询结果等。同时它是一种无连接，无状态并媒体独立的协议。

请求报文格式

请求行（方法、URL、协议版本）
请求头（多个键值对）
空行
请求体（可选，如POST提交的数据）

本周按照计划的那样，进行了基本的git学习以及一些Echart的实操。同时修复了一些项目的代码具体的修复想法都写在了之前的文件里了，这里不再赘述。同时也尝试了熟悉了VueX的代码。

项目代码学习

对于项目代码的阅览，我主要包括动态路由，VueX中的commit，以及&&运算符的巧用的学习

Dynamic Router

动态路由是一种根据用户权限动态控制前端页面访问权限的技术方案。其核心原理是将后端返回的用户菜单权限数据与前端预定义的路由配置进行映射和匹配。

具体的实现流程是：用户登录成功后，前端根据其权限标识（如角色或权限列表）从后端接口获取对应的菜单数据。随后，前端通过一个转换函数（如 filterAsyncRoutes）将这些菜单数据加工成符合 Vue Router 规范的路由配置对象。这个过程通常涉及组件的动态解析（例如使用 () => import(...)实现懒加载）和路由层级的递归处理。生成的有效路由配置会通过 router.addRoute（Vue Router 4）或 router.addRoutes（Vue Router 3）方法动态注入到路由实例中。同时，侧边栏导航菜单会根据处理后的权限数据，利用递归组件或 v-for指令动态渲染，确保用户界面与其权限实时同步。