Vue2 第十七节 Vue中的Ajax
1.Vue脚手架配置代理
2.vue-resource
一.Vue脚手架配置代理
1.1 使用Ajax库 -- axios
① 安装 : npm i axios
② 引入: import axios from 'axios'
③ 使用示例

1.2 解决开发环境Ajax跨域问题
跨域:违背了同源策略,同源策略规定协议名,主机名,端口号必须一致
解决方法:配置代理服务器
两种方式
方式① :
(1) 在 Vue.config.js 中添加如下配置转发的服务器
devServer: {proxy: 'http://localhost:5000'
}
(2) 重新启动脚手架
(3) 请求的地方写8080

(4)说明:
- 优点:配置简单,请求资源时直接发给前端8080即可
- 缺点:不能配置多个代理,无法灵活控制请求是否走代理
- 工作方式:如果本地存在就会直接从本地拿,不会去请求代理服务器
方式 ②
(1)配置
- '/atguigu':请求前缀,如果有请求前置,就走代理,如果没有,就不走代理,做到了灵活控制
- 在请求的时候,前缀是放到端口号后面的
- pathRewrite:匹配路径,把atguigu的字符串变成空字符串,转发到服务器那边就是正确的路径
-
changeOrigin为true时,服务器收到的host为 localhost:5000
-
changeOrigin 为false时, 服务器收到的host为 localhost:8080
-
changeOrigin 默认值为true
devServer: {proxy: {'/atguigu': {target: 'http://localhost:5000',pathRewrite: { '^/atguigu': '' },ws: true, // 用于支持webSocketchangeOrigin: true // 用于控制请求头中的host值},'/demo': {target: 'http://localhost:5001',pathRewrite: { '^/demo': '' },// ws: true, // 用于支持webSocket// changeOrigin: true // 用于控制请求头中的host值}}}

(2) 说明
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
- 缺点:配置略微繁琐,请求资源时必须加前缀
二. vue-resource(了解)
vue插件库,vue1.x使用广泛,官方已不维护
① 安装:npm i vue-resource
② 引入:import vueResource from 'vue-resource'
③ 使用:Vue.use(vueResource)
使用:this.$http.get

相关文章:
Vue2 第十七节 Vue中的Ajax
1.Vue脚手架配置代理 2.vue-resource 一.Vue脚手架配置代理 1.1 使用Ajax库 -- axios ① 安装 : npm i axios ② 引入: import axios from axios ③ 使用示例 1.2 解决开发环境Ajax跨域问题 跨域:违背了同源策略,同源策略规定协议名࿰…...
ES6 - 字符串新增的一些常用方法
文章目录 0,新增的一些方法1,includes()、startsWith()、endsWith()2,repeat()3,padStart()、padEnd()4,trimStart()、trimEnd()5,replaceAll()6,at() 0,新增的一些方法 介绍一些ES6…...
最新SQLMap安装与入门技术
点击星标,即时接收最新推文 本文选自《web安全攻防渗透测试实战指南(第2版)》 五折购买链接:u.jd.com/3ibjeF6 SQLMap详解 SQLMap是一个自动化的SQL注入工具,其主要功能是扫描、发现并利用给定URL的SQL注入漏洞。SQLMa…...
Java 使用 Google Guava 实现接口限流
一、引入依赖 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version> </dependency>二、自定义注解及限流拦截器 自定义注解:Limiter package com.haita…...
帮助中心的价值是什么?怎样才能在线搭建官网网站帮助中心?
帮助中心(Help Center)是一个提供公司或组织产品或服务相关信息的在线平台。它的价值在于为用户提供便捷的自助服务和解决问题的渠道,同时也能减轻客服人员的负担。 如何在线搭建官网网站帮助中心的步骤 确定需求:在搭建帮助中心…...
Kubernetes——理论基础
Kubernetes——理论基础 一、Kubernetes 概述1.K8S 是什么?2.为什么要用 K8S?3.Kubernetes 主要功能 二、Kubernetes 集群架构与组件三、Master 组件1.Kube-apiserver2.Kube-controller-manager3.Kube-scheduler4.配置存储中心——etcd 四、Node 组件1.Kubelet2.Ku…...
【VUE3】
Vue 3 是当下最流行的前端框架之一,其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例: 创建 Vue 实例 import { createApp } from vueconst app createApp({data() {return {message: Hello, Vue 3!}} })app.mo…...
《金融数据保护治理白皮书》发布(137页)
温馨提示:文末附完整PDF下载链接 导读 目前业界已出台数据保护方面的治理模型,但围绕金融数据保护治理的实践指导等尚不成熟,本课题围绕数据保护治理的金融实践、发展现状,探索和标准化相关能力要求,归纳总结相关建…...
上海亚商投顾:沪指震荡微涨 金融、地产午后大幅走强
上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 市场情绪 三大指数早盘震荡,午后集体拉升反弹,创业板指涨超1%。券商等大金融板块午后再度走强&#…...
Linux文件管理知识:查找文件
前几篇文章一一介绍了LINUX进程管理控制命令及网络层面的知识体系,综所周知,一个linux系统是由很多文件组成的,那么既然有那么多文件,那我们该如何管理这些文件呢? Linux中的所有数据都是以文件形式存在的,…...
【TypeScript】安装的坑!
TypeScript安装 安装TypeScript安装时候可能报错这样开头的数据(无法枚举容器中的对象)——原因:没权限先解决没权限的问题如果发现无法修改-高级-修改继续安装想使用tsc-发现,tsc不能用解决方法:配置环境变量最后的最…...
spring boot 2.x 使用 jpa 映射 json mysql列数据映射乱码
通过下面的依赖,可以将 mysql 的 json 列字段(mysql 5.7及以上的版本支持),映射成 Java Bean <dependency><groupId>com.vladmihalcea</groupId><artifactId>hibernate-types-52</artifactId><v…...
创建Helm脚本
一、创建脚本 Helm 是 Kubernetes 的包管理工具,它可以帮助您简化和自动化 Kubernetes 应用程序的部署和管理。使用 Helm,您可以创建和管理称为 Helm Chart 的应用程序打包,这些 Chart 包含了 Kubernetes 资源和配置信息,可以在不…...
2.05 购物车后台刷新并显示
一.用户登录添加商品使用cookie存入购物车,并把购物车商品传入到后台 步骤1:创建购物车BO对象 public class ShopcartBO {private String itemId;private String itemImgUrl;private String itemName;private String specId;private String specName;p…...
2023年第四届“华数杯”数学建模思路 - 案例:异常检测
文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常检测 异常…...
inline的盒子设置transform不生效
目录 如何遇到的问题原因为什么会这样怎么解决 如何遇到的问题 最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。 span::before {font-famil…...
自然语言处理学习笔记(四)————词典分词
目录 1.中文分词 2.词典分词 (1)词的定义 (2)词典性质——齐夫定律 (3)词典 (4)加载词典 (5)hanlp词典路径 1.中文分词 中文分词:指的是将一…...
jsoncpp库和nlohmann-json库实现JSON与字符串类型转换
在ROS中,可以使用jsoncpp库来实现JSON与字符串类型之间的转换。jsoncpp是ROS自带的一个JSON库,它提供了一些函数来解析和生成JSON数据。 下面是一个使用jsoncpp库实现JSON与字符串类型转换的示例代码: #include <ros/ros.h> #include…...
20230803 函数传参引用
定义多输出变量的函数时,通过直接传参数内存地址在函数内部直接修改外部变量的值。需要定义函数时 在输入参数前加 引用符号 & 。 C 值传递、指针传递、引用传递详解...
IDEA SpringBoot项目引入外部jar并打包
1、首先,我们再pom.xml中导入依赖包时,打包可以正常进行。 但如果我们引入了第三方的外部jar包(这里需要先把jar包添加到该项目依赖库中,这里不做演示),如图 2、导致打包时报错,程序包不存在或…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
