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

 

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

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

相关文章

idea-常用插件汇总

idea-常用插件汇总 码云插件 这个插件是码云提供的ps-码云是国内的一款类似github的代码托管工具。 Lombok Lombok是一个通用Java类库,能自动插入编辑器并构建工具,简化Java开发。通过添加注解的方式,不需要为类编写getter或setter等方法…

Java源码规则引擎:jvs-rules 8月新增功能介绍

JVS-rules是JAVA语言下开发的规则引擎,是jvs企业级数字化解决方案中的重要配置化工具,核心解决业务判断的配置化,常见的使用场景:金融信贷风控判断、商品优惠折扣计算、对员工考核评分等各种变化的规则判断情景。 8月是收获的季节…

7种有效安全的网页抓取方法,如何避免被禁止?

网页抓取是一种从互联网上抓取网页内容的过程,但在网络抓取种相信您也经常遇到障碍?尤其是做跨境业务的,在抓取国外的网站时更有难度。但我们站在您的立场上,提供七种有效的方法来进行网页抓取而不被阻止,最大限度地降…

js调用栈分析

s调用栈 执行上下文:执行上下文就是当前js代码被解析和执行所在环境的抽象的概念(执行环境) js中的任何代码都是在执行上下文中执行的 js的执行环境:JS代码运行起来,执行上下文 js的执行上下文分为三种&#xff1a…

windows安装kafka配置SASL-PLAIN安全认证

目录 1.Windows安装zookeeper: 1.1下载zookeeper 1.2 解压之后如图二 1.3创建日志文件 1.4复制 “zoo_sample.cfg” 文件 1.5更改 “zoo.cfg” 配置 1.6新建zk_server_jaas.conf 1.7修改zkEnv.cmd 1.8导入相关jar 1.9以上配置就配好啦,接下来启…

Atcoder 做题记录

My OI Blog A R C 155 F \mathbb{ARC \ 155 \ F} ARC 155 F E, F 先咕着,做一些多项式题,这篇题解是我人工翻译的 [1] Double Counting 双重计数 考虑从叶子节点开始,用唯一的方式(如果有的话)来构造出一棵满足条件的树…

“AI乳腺癌检测”风暴眼中的三篇论文

深度学习和医学研究界对谷歌、纽约大学和DeepHealth发表的三篇有前途的乳腺癌诊断论文引发的讨论非常热烈。 几年前,纽约大学的一组研究人员开始发表关于将深度学习应用于癌症筛查的论文。该团队的最新论文《深度神经网络改善放射科医生在癌症筛查中的表现》于2019…

mybatisplus集成geometry实现增改功能

前言 在我们工作中想要实现将空间点位信息存储到数据库时,一般使用以下语句实现 INSERT INTO test-point ( point,text ) VALUES ( st_GeomFromText ( POINT(1 1) ),第1个点);update test-point set pointst_PointFromText(POINT(5 5)) where id 10;但是这样每次都要去编写新…

【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原

文章目录 一、前言二、Cloud Studio 功能介绍三、实验介绍四、实操指导打开官网注册 Cloud Studio 五、开发一个简版的点餐系统安装 antd-mobile安装 Less 六、发布仓库七、开发空间八、总结 一、前言 IDE(集成开发环境)是一种软件工具,旨在…

Mybatis引出的一系列问题-动态 SQL

动态 SQL 是 MyBatis 的强大特性之一。如果你使用过 JDBC 或其它类似的框架,你应该能理解根据不同条件拼接 SQL 语句有多痛苦,例如拼接时要确保不能忘记添加必要的空格,还要注意去掉列表最后一个列名的逗号。利用动态 SQL,可以彻底…

IDEA Go语言开发环境无法debug调试

现象描述 使用idea 搭建go开发环境后如果debug调试可能会遇到错误: could not launch process: decoding dwarf section info at offset 0x0: too short。 解决方法 有些回答go get -u github.com/derekparker/delve/cmd/dlv 。现在如果使用go mod方式的话这个是…

c++转换构造,拷贝构造,operator=

c转换构造,拷贝构造,operator 一.转换构造 定义一个类 class CTest { public:int m_a;CTest(int m_a):m_a(0){} };在主函数中定义对象 CTest tes1(1); CTest tes2 5;//我们发现这种定义对象的方式不符合常理,这里其实是发生了隐式类型转…

【Android】Retrofit2和RxJava2新手快速上手

写这篇博客的目的 网上关于Retrofit2和RxJava2的博客特别多,但是内容特别复杂,一上来就讲解很高级的用法 其实我们没必要像高考做题家一样,把每个API都背的滚瓜烂熟 熟悉基本用法,高阶用法需要的时候再逐个了解就行了 因为博客…

R语言linkET包绘制相关性组合网络热图

热图就是使用颜色来表示数据相关性的图。能绘制热图的R包很多,既往我们已经介绍了《R语言pheatmap包绘制热图》,今天咱们来介绍一下R语言linkET包绘制相关性组合网络热图。相关性热图的意思热图和其他数据的关联性,比较的是多数据间的内在关系…

【宝藏系列】Linux 常用磁盘管理命令详解

【宝藏系列】Linux 常用磁盘管理命令详解 文章目录 【宝藏系列】Linux 常用磁盘管理命令详解前言1️⃣ df2️⃣du3️⃣fdisk📟磁盘格式化📠磁盘检验⌨️磁盘挂载与卸除📀卸载/dev/hdc6 前言 Linux磁盘管理常用三个命令为df、du和fdisk。 df…

Stable Diffusion教程(6) - 扩展安装

打开stable diffusion webUI界面 加载插件列表 依次点击扩展->可用->加载自 搜索插件 首先在搜索框输入你要安装的插件,然后点击插件后面的安装按钮 如果你需要的插件这里面没有找到,可通过通网址安装的方式安装。 在git仓库网址输入框输入的你插件…

招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本 tbms

​功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为外…

【算法第十六天7.31】654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

链接力扣654-最大二叉树 思路 class Solution {public TreeNode constructMaximumBinaryTree(int[] nums) {return getRoot(nums,0,nums.length);}public TreeNode getRoot(int[] nums,int leftIndex,int rightIndex){// 已经没有节点if(rightIndex - leftIndex < 1) ret…

强化学习分享(一) DQN算法原理及实现

摘要&#xff1a;主要讲解DQN算法的原理&#xff0c;伪代码解读&#xff0c;基于pytorch版本的DQN小游戏编程&#xff0c;同时对该代码进行详细标注&#xff0c;以及奉上原码。 &#xff08;一&#xff09;强化学习算法介绍 DQN&#xff0c;顾名思义&#xff0c;Deep Q Learni…

layui中渲染table表格

页面布局 可直接根据文档要求去写 table 组件&#xff08;这个不重要&#xff09; <table lay-filter"SyDictTable" id"SyDictTable" lay-data"{id: SyDictTable}"></table>Js 重要的是去修改JS里面的东西&#xff0c;比如&#…