04、Vue与Ajax

4.1 发送AJAX异步请求的方式

发送AJAX异步请求的常见方式包括:

4.1.1. 原生方式

使用浏览器内置的JS对象XMLHttpRequest

const xhr = new XMLHttpRequest()
xhr.open()
xhr.send()
xhr.onreadystatechange = function(){}

4.1.2. 原生方式

使用浏览器内置的JS函数fetch

fetch(‘url’, {method : ‘GET’}).then().then() 
//第一次.then返回的是promise,第二次.then,才可以得到结果

4.1.3. 第三方库方式

jQuery(对XMLHttpRequest进行的封装)

$.get()
$.post()
$.ajax()
······

axios :基于Promise的HTTP库:axios (对XMLHttpRequest进行的封装)

axios.get().then()
axios.post().then()
axios.put().then()
axios.patch().then()
axios.delete().then()
·····

axios是Vue官方推荐使用的。

vue-resource

跟axios一样使用

  • 安装:npm i vue-resource
  • main.js中 import vueResource from ‘vue-resource’
  • main.js中 使用插件:Vue.use(vueResource)
  • 使用该插件之后,项目中所有的vm和vc实例上都添加了:$http属性。
  • 使用办法:

this.$http.get(‘’).then() 用法和axios相同,只不过把axios替换成this.$http

4.2 AJAX跨域

1. 什么是跨域访问?

(1) 在a页面中想获取b页面中的资源,如果a页面和b页面所处的协议、域名、端口不同(只要有一个不同),所进行的访问行动都是跨域的。

(2) 哪些跨域行为是允许的?

① 直接在浏览器地址栏上输入地址进行访问

② 超链接

③ <img src=”其它网站的图片是允许的”>

④ <link href=”其它网站的css文件是允许的”>

⑤ <script src=”其它网站的js文件是允许的”>

⑥ ......

(3) 哪些跨域行为是不允许的?

① AJAX请求是不允许的

② Cookie、localStorage、IndexedDB等存储性内容是不允许的

③ DOM节点是不允许的

2. AJAX请求无法跨域访问的原因:同源策略

(1) 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

(2) AJAX请求不允许跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。

3. 解决AJAX跨域访问的方案包括哪些

(1) CORS方案(工作中常用的)

① 这种方案主要是后端的一种解决方案,被访问的资源设置响应头,告诉浏览器我这个资源是允许跨域访问的:

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");

response.setHeader("Access-Control-Allow-Origin", "*");

(2) jsonp方案(面试常问的)

① 采用的是<script src=””>不受同源策略的限制来实现的,但只能解决GET请求。

(3) 代理服务器方案(工作中常用的)

① Nginx反向代理

② Node中间件代理

③ vue-cli(Vue脚手架自带的8080服务器也可以作为代理服务器,需要通过配置vue.config.js来启用这个代理)

(4) postMesssage

(5) websocket

(6) window.name + iframe

(7) location.hash + iframe

(8) document.domain + iframe

......

4. 代理服务器方案的实现原理

同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略的。

4.3 代理服务器

Vue脚手架内置服务器的地址:http://localhost:8080

我们可以额外再开启一个其它的服务器,这个服务器随意,例如:node server、Apache服务器、JBOSS服务器、WebLogic服务器、WebSphere服务器、jetty服务器、tomcat服务器......我这里选择的是基于express语言的一个服务器,这个web服务器开启了一个8000端口,提供了以下的一个服务:可以帮助我们获取到一个user列表

4.3.1、express的基本使用

官网:Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网

安装:npm init --yes 做一下初始化

npm install express --save

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{//设置响应response.send('HELLO EXPRESS');
});//4. 监听端口启动服务 
app.listen(8000, ()=>{console.log("服务已经启动, 8000 端口监听中....");
});

运行方式一:node 文件名.js

运行方式二:nodemon安装

可以帮助自动重启express后台服务器

https://www.npmjs.com/package/nodemon

npm install -g nodemon

安装完毕,重启severs.js

启动命令

nodemon severs.js

网址:http://127.0.0.1:8000/ 或 http://localhost:8000/

4.3.2、演示跨域问题

1、使用express打开8000服务器,自定义一个user数据

2、安装axios npm i axios

3、引入axios,并发送ajax请求

<script>
//引入axios 
import axios from 'axios'
export default {name: 'hellowrod',data() {return {msg: '我是helloworld组件!'}},methods: {getuser() {// 需求:发送AJAX请求,访问:http://localhost:8000/user//本地内置服务器 http://localhost:8080/axios.get('http://localhost:8000/user').then(response =>{console.log('服务器返回的数据:',response.data);},error=>{console.log('错误信息',error.message);})}}
}
</script>

输出结果

4.4.1、配置vue.config.js文件 报错问题

注意,这里的vue.config.js可以自己在根目录下创建,跟src同级,如果报错,可能是脚手架版本的问题

如下图报错:defineConfig is not a function报错

(1)、打开终端cd vue 文件夹

(2)、npm audit fix --force

(3)、npm install

最后重启应该可以解决

4.4.2、简单开启

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({devServer: {// Vue脚手架内置的8080服务器负责代理访问8000服务器// 地址写到端口号就可以proxy: "http://localhost:8000",},
});

在vue文件中发送请求时,地址需要修改如下:

 methods: {getuser() {// 原理:发送AJXA请求的时候,会优先从自己的服务器当中去找 public/user资源// 如果找不到,就会去找代理,然后去http://localhost:8000上去找// axios.get('http://localhost:8080/user').then(// 当前按钮就在8080服务器上,资源也在8080上,所以http://localhost:8080可以省略axios.get('/user').then(response => {console.log('服务器返回的数据:', response.data);},error => {console.log('错误信息', error.message);})}}

原理:访问地址是http://localhost:8080/user,会优先去8080服务器上找/user资源,如果没有找到才会走代理。

另外需要注意的是:这种简单配置不支持配置多个代理。

4.4.3、高级开启

支持配置多个代理

1、可以再新建一个express2.js,增加一个模拟服务器

2、vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({//2、高级开启  可以代理多个服务器devServer: {proxy: {"/api": {//凡是请求路径以/api开始的,都走这个代理target: "http://localhost:8000",pathRewrite: { "^/api": "" }, //路径重新,凡是/api开始的路径,都替换为空串ws: true, //开启对websocket的支持(websocket是一种实时推动技术),默认是truechangeOrigin: true, //默认是true表示改变起源,(让对方服务器不知道我们真正的起源到底是哪里)},"/abc": {target: "http://localhost:8001",pathRewrite: { "^/abc": "" },ws: true,changeOrigin: true,},},},
});

helloword.vue 发送ajax请求

 methods: {getuser() {// 开启多个代理axios.get('/api/user').then(response => {console.log('服务器返回的数据:', response.data);},error => {console.log('错误信息', error.message);})},getpassword() {// 开启多个代理axios.get('/abc/password').then(response => {console.log('服务器返回的数据:', response.data);},error => {console.log('错误信息', error.message);})},}

4.4、axios的封装

看axios的使用笔记

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/493225.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全概论——防火墙原理与设计

一、防火墙概述 防火墙是一种装置&#xff0c;它是由软件/硬件设备组合而成&#xff0c;通常处于企业的内部局域网与 Internet 之间&#xff0c;限制 Internet 用户对内部网络的访问以及管理内部用户访问 Internet 的权限。换言之&#xff0c;一个防火墙在一个被认为是安全和可…

南城云趣:智能云平台,杜绝电动车充电安全隐患

电动自行车作为绿色低碳出行的主要方式之一,受到无数市民的推崇,而电动自行车数量的急剧上涨,也严重增加小区管理的负担。记者调查发现,目前电动自行车缺乏有效的管理,使得带车或电瓶上楼充电、乱停乱放、车辆容易被盗等安全问题日益突出,给社区消防安全和管理带来严峻的挑战。…

Linux 文件系统目录结构及其简要介绍

&#x1f44b; 欢迎来到“Linux学习&#xff1a;Linux 文件系统目录结构”篇&#xff01; 接下来让我们一起来学习一下Linux 文件系统目录结构吧&#xff01;祝你有所收获&#xff01; 文章目录 总结表格Linux 文件系统目录结构及其简要介绍补充小资源 小伙伴们都知道&#xff…

【服务器】MyBatis是如何在java中使用并进行分页的?

MyBatis 是一个支持普通 SQL 查询、存储过程和高级映射的持久层框架。它消除了几乎所有的 JDBC 代码和参数的手动设置以及结果集的检索。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java 的 POJO&#xff08;Plain Old Java Objects&#xff0c;普通老式 …

Elasticsearch-DSL高级查询操作

一、禁用元数据和过滤数据 1、禁用元数据_source GET product/_search {"_source": false, "query": {"match_all": {}} }查询结果不显示元数据 禁用之前: {"took" : 0,"timed_out" : false,"_shards" : {&quo…

使用 UniApp 在微信小程序中实现 SSE 流式响应

概述 服务端发送事件(Server-Sent Events, SSE)是一种允许服务器向客户端推送实时更新的技术。SSE 提供了一种单向的通信通道,服务器可以持续地向客户端发送数据,而不需要客户端频繁发起请求。这对于需要实时更新的应用场景非常有用。 流式传输的特点是将数据逐步传输给客…

【Tomcat】第六站(最后一站啦!):数据的返回

1. 引言 前端资源比如html页面&#xff0c;进行返回。截止到目前我们写的项目架构不支持前端页面&#xff08;静态资源 &#xff09;。 2. 数据的返回 2.1 准备 为了能够写前端页面&#xff0c;新建一个项目。选择Maven项目&#xff0c;下一步&#xff0c;下一步。 加载完…

electron-vite【实战系列教程】

创建项目 https://blog.csdn.net/weixin_41192489/article/details/144442262 安装必要的插件 UI 库 element-plus npm install element-plus --save安装 element-plus 图标 npm install element-plus/icons-vue安装插件 – 自动注册组件 vs 自动导入框架方法 npm install -…

信号处理相关的东东(学习解惑)

信号处理相关的东东&#xff08;学习解惑&#xff09; 所有内容学习自知乎专栏&#xff0c;https://www.zhihu.com/column/xinhao&#xff0c;写的很好&#xff0c;值得反复学习 时频域分析的一些常用概念 FROM&#xff1a;https://zhuanlan.zhihu.com/p/35742606 1、相加性…

[Python学习日记-73] 面向对象实战1——答题系统

[Python学习日记-73] 面向对象实战1——答题系统 简介 需求模型——5w1h8c 领域模型 设计模型 实现模型 案例&#xff1a;年会答题系统 简介 在学习完面向对象之后你会发现&#xff0c;你还是不会自己做软件做系统&#xff0c;这是非常正常的&#xff0c;这是因为计算机软…

简单工厂模式和策略模式的异同

文章目录 简单工厂模式和策略模式的异同相同点&#xff1a;不同点&#xff1a;目的&#xff1a;结构&#xff1a; C 代码示例简单工厂模式示例&#xff08;以创建图形对象为例&#xff09;策略模式示例&#xff08;以计算价格折扣策略为例&#xff09;UML区别 简单工厂模式和策…

SQL语句整理五-StarRocks

文章目录 查看版本号&#xff1a;SPLIT&#xff1a;insert 和 update 结合 select&#xff1a;报错&#xff1a;1064 - StarRocks planner use long time 3000 ms in memo phase&#xff1a;字段增删改&#xff1a; 查看版本号&#xff1a; select current_version(); current…

中化信息与枫清科技深化合作:共探“AI+”产业新生态

随着数字化转型的浪潮席卷全球&#xff0c;数据已成为推动创新和经济增长的关键力量。为持续深化数据要素价值挖掘与应用实践&#xff0c;推动打造行业交流平台&#xff0c;驱动产业创新共荣&#xff0c;2024 年 12 月 18 日 -19 日&#xff0c;由中国通信标准化协会主办的“20…

CH340系列芯片驱动电路·CH340系列芯片驱动!!!

目录 CH340基础知识 CH340常见类型 CH340引脚功能讲解 CH340驱动电路 CH340系列芯片数据手册 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME62…

进网许可认证、交换路由设备检测项目更新25年1月起

实施时间 2025年1月1日起实施 涉及设备范围 核心路由器、边缘路由器、以太网交换机、三层交换机、宽带网络接入服务器&#xff08;BNAS&#xff09; 新增检测依据 GBT41266-2022网络关键设备安全检测方法交换机设备 GBT41267-2022网络关键设备安全技术要求交换机设备 GB/…

【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

关键词&#xff1a;鸿蒙、ArkTs、Web组件、通讯、数据 官方文档Web组件用法介绍&#xff1a;文档中心 Web 组件加载沙箱中页面可参考我的另一篇文章&#xff1a;【HarmonyOS NEXT】 如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客 目录 如何在鸿蒙应用中加…

使用k6进行MongoDB负载测试

1.安装环境 安装xk6-mongo扩展 ./xk6 build --with github.com/itsparser/xk6-mongo 2.安装MongoDB 参考Docker安装MongoDB服务-CSDN博客 连接成功后新建test数据库和sample集合 3.编写脚本 test_mongo.js import xk6_mongo from k6/x/mongo;const client xk6_mongo.new…

电子应用设计方案-63:智能升降茶几系统方案设计

智能升降茶几系统方案设计 一、引言 智能升降茶几作为一种创新的家具产品&#xff0c;结合了实用性和功能性&#xff0c;能够满足不同场景下的使用需求。本方案旨在设计一款安全可靠、操作便捷、功能丰富的智能升降茶几。 二、系统概述 1. 系统目标 - 实现茶几桌面的平稳升降&…

C语言进阶(2) ---- 指针的进阶

前言&#xff1a;指针的主题&#xff0c;我们在初阶的《指针》章节已经接触过了&#xff0c;我们知道了指针的概念&#xff1a; 1.指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识一块内存空间。 2.指针的大小是固定的4/8个字节(32位平台/64位平台)。 3.指针是…

OpenHarmony-4.HDI 框架

HDI 框架 1.HDI介绍 HDI&#xff08;Hardware Device Interface&#xff0c;硬件设备接口&#xff09;是HDF驱动框架为开发者提供的硬件规范化描述性接口&#xff0c;位于基础系统服务层和设备驱动层之间&#xff0c;是连通驱动程序和系统服务进行数据流通的桥梁&#xff0c;是…