vue相关知识补充

其实最近实习下来，感觉明白一整个软件流程再去学习是很重要的；暂时了解到的
现在的计算机市场感觉还是偏硬件的稳定；软件几乎都要全栈；
1.比如老板看市场迎合需求想要一个产品上线；
2.然后产品经历调研，把老板的话转电子，转文字；然后设计需求文档，
3.静态页面给前端；前端去实现静态页面，然后在实现跳转，发请求，打包，调接口
4.后端选择技术选型；选定之后做功能的实现，web开发类

setup函数，他里面写对象，返回的时候return返回就行；这个就是主要是为了封装更简单的api

在js里面敲setup函数，从vue里面导入函数；然后直接定义方法，就不用敲return了，这里面的东西可以直接绑定到dom里面；用双括号；然后就是，但是传参必须是对象类型；如果想接受简单类型的话，那就用ref

如果不想用对象类型的数据，就是一个简单的数据的话；那我们就用ref,这两个函数都是产生响应式数据；

ref直接给个参数值；其实定义的count是一个对象；然后直接在dom里面打印输出，然后点击事件；绑定好，点击事件的方法里面，里面需要点访问value

<template><p>这里是系统管理</p><button @click="setCount">{{ msg.count }}1</button><button @click="setCount">{{ MSG }}</button>
</template>
<script setup>
import { reactive, ref } from 'vue';// 创建一个变量去接受这个方法的返回值；这个方法是reactive
// 只接受对象类型的参数
const msg = reactive({count:0
})
// 设置一个方法，去实现对上一个数据的累加
const setCount = () => {
msg.count++
MSG.value++
}
const MSG = ref(0)
</script>

ref其实也是依赖于reactive函数 基本上ref更合适，更全面

补一个setup函数主要的优势就是在于他是组合式api省去了export default的麻烦；不用返回，直接里面写const的命名的箭头函数就可以了；

计算属性

计算属性也是主要做计算

导入一个ref函数然后里面接受一个数组；完了之后输出一下，再写一个方法，返回大于2的数组；记住都要.访问到value，因为他本身是一个对象；然后.filter这个方法是返回一个数组；
下一个方法是写了一个入栈，压入元素的操作；压入9和10；很好理解

事件侦听

watch侦听主要是用于检测数据变化，数据一旦有变化咱们就可以立即感知；然后传值；不论是新值还是旧值；
immediate 和deep 他监听的必须是ref或者是reactive的函数返回的东西，能用于非常多的场景

一次性侦听多个函数，无论如何都是新旧值，给一个数组，存两个数据；然后后面跟着新旧的数据名词，驼峰式；然后箭头函数，函数体是打印（什么都行）然后打印数组，总结的来说举例思路就是；用ref或者reactive这种返回一个响应式数据；然后，再设置一个函数咱们去更改值；然后我们用watch去监听数据，新旧数据，输出什么的都可以；

侦听ref和reactive这两个都是浅层，深层，比如咱们就是用ref传了一个对象属性过来；然后，他默认是不会执行回调的；我们需要在侦听里面写上一个deep这种深层函数，默认值设置为true;再侦听里面，我们不需要加.value读取，咱们的watch会处理

生命周期函数的应用

创建前后，渲染前后，挂载前后，销毁前后
多次调用直接按先后顺序调用；场景适用于改别人vue代码的时候；你可以在外面写；

父子跨层通讯

vuex

vuex的作用主要是集中管理，比如很多页面和组件都要用到个人信息吧，Vuex可以实现共享；
集中管理状态
将组件间需要共享的状态（如用户登录状态、用户名、头像、地理位置信息、商品收藏、购物车物品等 ）抽取出来，存储在全局的store（仓库，存储处）中统一管理维护 。避免状态分散在各个组件，导致数据管理混乱，方便对状态进行统一操作和监控。比如在大型电商项目中，购物车数据可存于 Vuex 的store，不同页面组件都能访问修改。方便增删改查了
实现组件通信
方便深层嵌套组件或兄弟组件间的数据通信。在常规组件通信里，多层嵌套组件传值繁琐，兄弟组件传值也较麻烦，而 Vuex 可让组件通过读取和修改store中的状态来交互，无需复杂事件传递和回调。比如在社交应用中，顶部导航栏组件和内容展示组件可通过 Vuex 共享用户登录状态信息。
保证数据流可预测
引入严格数据流控制机制，规定状态修改只能通过特定方式（提交mutation ）进行。mutation是同步函数且为纯函数，相同输入必有相同输出且无副作用，能更明确追踪状态变化，避免因随意修改状态导致的逻辑混乱和难以调试问题 。
支持异步操作处理
通过action处理异步操作，如发送网络请求获取数据。在action中可进行异步逻辑，完成后再提交mutation变更状态。比如在应用从后端获取用户信息时，可在action中发起axios请求，拿到数据后提交mutation更新用户信息状态 。
便于调试
集成到 Vue 官方调试工具 devtools extension，提供零配置的 time - travel 调试（可回溯状态变化历史 ）、状态快照导入导出等高级调试功能，方便开发者定位和解决状态管理相关问题 。
实现模块化管理
支持将状态划分为多个模块（modules 组件 ），每个模块有自己独立的state、getters、mutations和actions 。在大型复杂应用中，能让不同业务模块的状态管理更清晰、代码结构更易维护。比如一个综合管理系统，可按用户管理、订单管理等业务划分模块。

统一状态集成的数据就是存储在state
state 是数据的存储仓库，用于保存应用的状态。
getters 用于从 state 中派生出一些状态，类似于计算属性。
mutations 是唯一可以修改 state 的地方，必须是同步函数。
actions 用于处理异步操作，在异步操作完成后通过提交 mutations 来修改 state。
通过这四个概念的协同工作，Vuex 实现了一个可预测的状态管理模式，使得大型 Vue 应用的状态管理更加方便和高效。

vue -Router

1.先下载注册

2.配置好了之后，path自己定义规则
3./单一个这个是路由的根目录；
4./main这些就是你自己创建的子目录了；
5.你去页面，这是哈希模式所以在#/后输入你的页面名字就好了，就能访问到
6.记住不要再app.vue的全局页面里面写东西；不然路由也不好跳转，其实写一个router-view就差不多了；

想要点击跳转页面；
dom里面绑定点击跳转事件

<script setup>
import { useRouter } from 'vue-router';    
const router = useRouter();
const goToSystem = () => {router.push('/system');//router是常用的跳转页面的方式；
};
</script>

js里面写这些函数；.push的方法是指定页面跳转；前两句是导入路由方法，然后创建实例对象；然后写一个跳转的方法；方法体是路由跳转；里面是字符串
router.go（）里面的数字代表前进或后退；

请求FETCH

现在因为时间紧急，先用最简单最常用的；
发请求，前端需要一个数据提交渲染到页面；如何从后端调用？我们把渲染先写好了；里面的数据怎么写？
使用Fetch
添加链接描述
这个FetchAPI提供了一个js 的接口；让别的东西可以用这个方法去通信，去调用； 主要用于访问http管道的一些具体部分；例如请求然后响应；

跨域问题

有请求有交互，就伴随跨域问题
这是浏览器的一种安全机制，它规定了只有在协议、域名、端口都相同的情况下，两个页面之间才能相互访问对方的资源。例如，http://www.example.com 页面的脚本不能访问 http://api.example.com 的资源，因为域名虽然相似，但不完全相同，违反了同源策略。

前后端分离项目：前端项目通常部署在一个域名下，如 http://localhost:3000，而后端 API 可能部署在另一个域名或端口下，如 http://api.example.com:8080。当前端页面发送 AJAX 请求到后端 API 时，就会触发跨域问题。
调用第三方 API：如果在网页中需要调用第三方提供的 API，而这些 API 的域名与当前网页的域名不同，也会遇到跨域问题。例如，在自己的网站中调用百度地图的 API 获取地图数据。

解决方案
CORS（跨域资源共享）：这是一种最常用的解决跨域问题的方法。服务器通过设置响应头来允许特定域名的访问。例如，服务器可以设置 Access - Control - Allow - Origin 头来指定允许访问的域名。如果允许所有域名访问，可以将其设置为 。
特定访问
JSONP（JSON with Padding）：利用

AJAX

异步通信：传统的网页（不使用 AJAX）如果需要更新内容，往往会刷新整个页面。而 AJAX 允许在后台与服务器进行异步数据交换，意味着在向服务器发送请求和接收响应的过程中，网页的其他部分仍然可以正常工作，用户无需等待整个页面刷新，提升了用户体验。
数据交互格式：虽然 AJAX 名称中包含 XML，但现在它可以使用多种数据格式进行数据交换，如 JSON（JavaScript Object Notation），JSON 因其简洁性和易于解析的特点，在现代 Web 开发中更为常用。
创建 XMLHttpRequest 对象：在 JavaScript 中，XMLHttpRequest 对象是实现 AJAX 的核心，它用于与服务器进行通信。不同浏览器对 XMLHttpRequest 对象的支持略有不同，现代浏览器可以直接使用 new XMLHttpRequest() 来创建。
打开连接：使用 open() 方法指定请求的类型（如 GET、POST）、请求的 URL 以及是否异步等信息。
发送请求：使用 send() 方法将请求发送到服务器。对于 POST 请求，还可以在 send() 方法中传递要发送的数据。
监听状态变化：通过监听 XMLHttpRequest 对象的 onreadystatechange 事件，当请求状态发生变化时，可以获取服务器的响应信息。
处理响应：根据服务器返回的状态码和响应数据，进行相应的处理，如更新页面内容。

Jquery

jQuery 是一个快速、简洁且功能丰富的 JavaScript 库，由 John Resig 在 2006 年创建，旨在简化 HTML 文档遍历（dom)、事件处理(js)、动画效果(css) 和 Ajax (请求）交互等操作。以下从多个方面详细介绍 jQuery：
核心特点
简洁的语法：jQuery 提供了简洁的选择器语法，使得开发者可以轻松地选择 HTML 元素，执行操作。例如，使用 ${(}^{\prime }{p}^{\prime })可以快速选择页面上所有的<p>元素，大大减少了编写JavaScript代码的工作量。跨浏览器兼容性：不同浏览器对JavaScript和HTML标准的支持存在差异，jQuery封装了这些差异，提供了\ast \ast 统一的API\ast \ast ，使得开发者编写的代码可以在多种浏览器上正常运行，无需担心兼容性问题。丰富的插件生态系统：jQuery拥有庞大的\ast 插件库\ast ，涵盖了各种功能，如表单验证、图片轮播、菜单效果等。开发者可以根据需要选择合适的插件，快速实现所需功能，提高开发效率。链式操作：jQuery支持链式操作，即\ast \ast 可以在一个语句中连续调用多个方法\ast \ast ，使代码更加简洁和易读。例如：$(‘p’).css(‘color’, ‘red’).hide().show();

使用方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery Example</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><p>这是一个段落。</p><script>// 使用 jQuery 选择器选择所有 <p> 元素，并将其文本颜色设置为红色$('p').css('color', 'red');//设置样式直接点就完了；</script>
</body>
</html>

// 选择所有 <p> 元素
$('p');// 选择所有类名为 "highlight" 的元素
$('.highlight');// 选择 ID 为 "myElement" 的元素
$('#myElement');

// 修改元素的文本内容
$('p').text('新的文本内容');// 修改元素的样式
$('p').css('font-size', '20px');// 绑定点击事件  给当前页面所有按钮一起
$('button').click(function() {alert('按钮被点击了！');
});

restful

RESTful 是一种设计网络应用程序的架构风格，它基于 HTTP 协议，为网络服务提供了一组设计原则和约束条件，使得应用程序具有良好的可扩展性、可维护性和松耦合性。以下从多个方面详细介绍 RESTful：
核心概念
资源（Resource）：在 RESTful 架构中，一切皆为资源，资源可以是任何具有明确标识的事物，如用户、文章、订单等。每个资源都有一个唯一的标识符，通常通过 URL 来表示。例如，https://api.example.com/users/1 表示 ID 为 1 的用户资源。
统一接口（Uniform Interface）：RESTful 服务通过统一的接口进行资源的操作，主要使用 HTTP 方法来表示对资源的不同操作，常见的 HTTP 方法及其对应的操作如下：
GET：用于获取资源。例如，使用 GET /users/1 可以获取 ID 为 1 的用户信息。
POST：用于创建新资源。例如，使用 POST /users 并在请求体中包含用户信息，可以创建一个新的用户。
PUT：用于更新资源的全部内容。例如，使用 PUT /users/1 并在请求体中包含更新后的用户信息，可以更新 ID 为 1 的用户的全部信息。
PATCH：用于更新资源的部分内容。例如，使用 PATCH /users/1 并在请求体中包含需要更新的部分信息，可以只更新 ID 为 1 的用户的部分信息。
DELETE：用于删除资源。例如，使用 DELETE /users/1 可以删除 ID 为 1 的用户。
无状态（Stateless）：RESTful 服务是无状态的，即每个请求都应包含处理该请求所需的所有信息，服务器不会在请求之间保留客户端的状态。这样可以提高系统的可伸缩性和可靠性，因为服务器可以独立处理每个请求，而不需要考虑之前的请求状态。
分层系统（Layered System）：RESTful 架构可以由多个层次组成，每个层次都有特定的职责。例如，客户端可以通过中间层（如代理服务器）与服务器进行通信，中间层可以提供缓存、负载均衡等功能，而客户端和服务器不需要知道中间层的存在。
设计原则
URL 设计：URL 应该简洁明了，使用名词来表示资源，避免使用动词。例如，使用 /users 表示用户资源集合，而不是 /getUsers。同时，可以使用路径参数和查询参数来进一步定位和过滤资源。例如，/users?age=18 表示查询年龄为 18 的用户。
响应状态码：使用合适的 HTTP 状态码来表示请求的结果。常见的状态码及其含义如下：
200 OK：表示请求成功。
201 Created：表示资源创建成功。
400 Bad Request：表示请求参数有误。
401 Unauthorized：表示未授权访问。
404 Not Found：表示请求的资源不存在。
500 Internal Server Error：表示服务器内部错误。
数据格式：RESTful 服务通常使用 JSON 或 XML 作为数据交换格式，JSON 因其简洁性和易于解析的特点，在现代 Web 开发中更为常用。

const express = require('express');
const app = express();
const port = 3000;// 模拟用户数据
const users = [{ id: 1, name: 'John' },{ id: 2, name: 'Jane' }
];// 获取所有用户
app.get('/users', (req, res) => {res.json(users);
});// 获取单个用户
app.get('/users/:id', (req, res) => {const id = parseInt(req.params.id);const user = users.find(u => u.id === id);if (user) {res.json(user);} else {res.status(404).send('User not found');}
});// 创建新用户
app.post('/users', (req, res) => {const newUser = req.body;users.push(newUser);res.status(201).json(newUser);
});// 启动服务器
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});