Vue-resource三种请求格式和万能测试地址

最新推荐文章于 2022-10-09 16:47:49 发布
最新推荐文章于 2022-10-09 16:47:49 发布
阅读量5.1k 收藏 13
点赞数 12
分类专栏： Vue 前端开发也蛮有意思的
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42036616/article/details/82829787
版权

注意：

1.前端服务器测试地址的万能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能响应各种请求。点击进入官网

2.这里测试只写了成功的回调函数，同时还要失败时的回调函数。

 

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
    <!--vue-resource是基于vue.js的，要后导入-->
</head>
<body>
      <div id="app">
          <input type="button" value="get方式" v-on:click="getInfo">
          <input type="button" value="post方式" v-on:click="postInfo">
          <input type="button" value="jsonp方式" v-on:click="jsonpInfo">
      </div>
      
      <script>
          var vm = new Vue({
             el:'#app',
             data:{},   
             methods:{
                 getInfo(){
                    this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=> {
                        console.log(result.body);
                    })  
                 },
                 //get请求，通过function执行的成功的回调函数，得到body和data等数据    

                 postInfo(){
                     this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
                         console.log(result.body);
                     })
                 },
                 //post请求，中间花括号空的部分为提交给服务器的数据这里默认，emulateJSON:true,将手动提交表单格式设置为application/x-www-form-urlencoded格式

                 jsonpInfo(){
                     this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
                         console.log(result.body)
                     })
                 }
             } 
          });
      </script>
</body>

效果：依次点击按钮得到的结果

何迟
关注
  • 12
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue项目 测试、发布root地址配置
geanwen的博客
03-13 5656
说明基本上所有的项目，在测试的时候和正式发布的时候根地址是不一样的; 测试环境连接测试后台方便测试; 正式环境连接正式后台地址，这已经不是新鲜的事了; 原来我们是手动去修改地址，在每次切换环境的时候; 下面说说VUE项目中怎样将测试环境和正式的地址提前配置好，防止忘记修改地址导致发布失败;利用的WebPack给生产环境和正式环境配置不同地址项目目录中有配置文件夹; 里面找到prod.env.js文...
vue-element-admin登录（改成本地测试地址）
蚂蚁的博客
03-29 1930
第一步：找到根目录下面的vue.config.js 找到before: require(’./mock/mock-server.js’) 并且注释掉， 加上以下代码 proxy: { [process.env.VUE_APP_BASE_API]: { target: 'http://192.168.1.200:8081', // target: 'http://192.168.1.119:8081', // target: 'http://192.168.1.253:8081',
vue项目部署测试和生产环境地址
i_am_a_div的博客
10-09 420
vue项目部署测试和生产环境地址
开发环境和测试环境(配置网络请求相关地址)
追梦人的博客
10-07 2569
我们这里项目用到的接口，就和大家访问Google一样，也有一个网址，同时在真实项目中，不同的环境，可能有不同的地址；目的是开发，和测试。我们这里只有一个，但我们会给大家演示如何配置两个。 企业开发中通常都有三个环境，分别是dev，qa，prod分别代表开发环境，测试环境，正式环境；部分企业还有一个预上线环境。对于我们App来说他们最大的不同就是端点(endpoint)不同，所以我们这里要配置多个环境，配置有多种方法，可以使用注释，但这样容易出错；也可以将所有API，图片资源地址，一些配置Key放到一个常量类
Vue resource三种请求格式和万能测试地址
10-17
主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue学习之vue-resource请求
01-07
npm install 引入vue-resource包 this.$http.get(’/someUrl’) this.$http.post(’/someUrl’,{foo:‘bar’}) (1) npm install vue-resource –save引入vue-resource包 (2)在store文件的main.js中配置vue-resource ...
Vue-resource实现ajax请求和跨域请求示例
12-11
vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。 在使用时，首先需要安装vue-resource插件 1.在项目跟目录上安装： npm install vue-resource  2.引入resource插件 ...
vue-resouce设置请求头的三种方法
08-29
本篇文章主要介绍了vue-resouce设置请求头的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-resource+jsonplaceholder模拟请求后台获取用户数据
a497507718的博客
09-28 1126
最近在学习 vue，在用 vue-resource 插件的时候发现用来练习请求后台数据的站点 vue.studyit.io 好像挂了，后来通过文章 Vu文章resource三种请求格式和万能测试地址 找到了另一个可用的，虽然这个站点好像没有提供添加和删除数据的接口，但起码稍微能用嘛。 地址：http://jsonplaceholder.typicode.com/users 效果图：   ...
android中网络请求url地址部分的写法
活在当下！输出快乐！
01-05 5972
新版界面的一些感受 背景 URL的百度百科 网络请求时GET的写法 网络请求时POST的写法 A little bit of progress every dayCome on 新版界面的一些感受 写博客的界面又变化了，感觉更加的舒服了。不像原来界面那样单一了，在一个界面上就能填写关于文章的好多信息，感觉体验有了一点提高。不错，表扬一下！ 背景 项目不可避免会用到网络这
vue-resource的使用
Mr.Yuan
11-21 3111
安装 npm i vue-resource --save-dev 引入 import Vueresource from 'vue-resource' 注册 Vue.use(Vueresource) 使用 // 便捷方法 this.$http.get({url:'api/index', headers:{Authorization:'Basic Yxsdlfjui'}}) .them((data) =
在线HTTP POST/GET接口测试 地址
热门推荐
jeffasd的专栏
03-12 1万+
在线测试地址：哈哈哈 http://www.atool.org/httptest.php
post测试地址
kuaileweixiao9898的博客
10-26 4471
postman测试接口地址    
vue-cli增加测试环境
小毛驴的博客
07-03 4201
vue-vli自带有开发和正式两个环境，但是我们有时是需要添加测试环境的 1.增加测试环境 1. 在package.json中添加test命令 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run ...
vue 测试环境 生产环境 线上环境 环境配置
Healer_JJJ的博客
01-09 5140
var env_config = { dev:{ name:'dev', api_url : location.protocol+"//10.0.0.230:80", // api_server_url : location.protocol+"//narcissus.ih2ome.cn",//换成了测试环境 }, release:{ name:'release', api_url
vue实践笔记系列七——webpack打包生产地址与测试地址切换_江南春008_新浪博客
jjh0901的博客
04-04 840
生产与测试地址配置方法，大家应该都清楚如何配置，今天列出这个主题主要是想说明下生成环境带上项目名称如何配置。 1、正常的生成与测试地址配置方法 测试地址：config/dev.env.js 生产地址：config/prod.env.js 2、地址不带项目名称，这样配置不会有问题，那带上项目名称如何配置呢？ 测试地址：config/dev.env.js 生产地...
vue项目发测试后配置项目路径问题
寬真
07-17 1380
今天一个新项目发测试了，测试把项目丢在了一个叫oum的文件下，导致压缩包所有的css文件，js文件路径都报404错误，他们路径的前面是地址直接＋／static／XXX，而测试的路径应该是地址＋oum/static/XXX,后面一个小伙伴帮忙在vue的webpack中进行了配置，生成了想要的文件路径。 vue的webpack项目配置文件index.js中配置 开发和生产环境都可以进行配置 ...
vue-resource post get 请求 form json
最新发布
08-09
### 回答1： Vue.js 是一个 JavaScript 框架，使用它可以方便地进行前端开发。vue-resource 是 Vue.js 的一个插件，可以用来发送 HTTP 请求。 关于请求类型，vue-resource 支持 POST 和 GET 两种请求方式。使用方式如下: - GET 请求： ```javascript this.$http.get('your_api').then(response => { // success callback }, response => { // error callback }); ``` - POST 请求： ```javascript this.$http.post('your_api', { // request body }).then(response => { // success callback }, response => { // error callback }); ``` 关于请求格式，vue-resource 支持 form 和 json 两种格式。默认情况下，vue-resource 会将请求体序列化为 application/x-www-form-urlencoded 格式，如果需要发送 json 格式的请求，需要手动设置请求头： ```javascript this.$http.post('your_api', { // request body }, { headers: { 'Content-Type': 'application/json' } }).then(response => { // success callback }, response => { // error callback }); ``` ### 回答2： vue-resource 是 Vue.js 的一个插件，用于发送 HTTP 请求。在 Vue.js 中发送 POST 和 GET 请求可以使用 vue-resource 的形式处理。下面是一个例子，展示如何用 vue-resource 进行 POST 和 GET 请求，发送 Form 表单数据和 JSON 数据。 发送 POST 请求： 1. 使用 vue-resource 的 $http.post() 方法发送 POST 请求。 2. 将要发送的数据作为参数传递给 $http.post() 方法。 3. 如果要发送 Form 表单数据，可以将数据作为对象传递给 $http.post() 方法。 4. 如果要发送 JSON 数据，需要在请求头中设置 Content-Type 为 application/json，并将 JSON 数据作为字符串传递给 $http.post() 方法。 下面是使用 vue-resource 发送 POST 请求的示例： ``` js // 发送 Form 表单数据 this.$http.post('api/url', {param1: value1, param2: value2}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); // 发送 JSON 数据 let jsonData = JSON.stringify({param1: value1, param2: value2}); this.$http.post('api/url', jsonData, {headers: {'Content-Type': 'application/json'}}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); ``` 发送 GET 请求： 1. 使用 vue-resource 的 $http.get() 方法发送 GET 请求。 2. 将要发送的数据作为参数传递给 $http.get() 方法。 3. 参数可以直接拼接在 URL 中，也可以作为一个对象传递给 $http.get() 方法。 下面是使用 vue-resource 发送 GET 请求的示例： ``` js // 直接拼接参数在 URL 中 this.$http.get('api/url?param1=value1&param2=value2').then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); // 作为参数对象传递 this.$http.get('api/url', {params: {param1: value1, param2: value2}}).then((response) => { // 处理成功的回调 }).catch((error) => { // 处理失败的回调 }); ``` 以上就是使用 vue-resource 发送 POST 和 GET 请求时，发送 Form 表单数据和 JSON 数据的方法。 ### 回答3： Vue-resource是Vue.js官方推荐的一个用于处理网络请求的插件。使用Vue-resource可以很方便地进行post和get请求，并且可以以form和json的形式进行数据传输。 首先，我们来讲解如何进行post请求。在Vue组件中，可以通过Vue-resource的$http对象来发送post请求。要发送一个form形式的post请求，可以使用`this.$http.post(url, formData)`方法，并将form数据作为第二个参数传递进去。 例如，假设我们要向服务器端发送一个form形式的post请求，可以通过以下代码实现： ``` this.$http.post('/api/users', this.formData).then(response => { console.log(response.body); }, error => { console.error(error); }); ``` 其中，`/api/users`是请求的url，`this.formData`是包含form数据的对象。通过`then`方法可以处理请求成功和失败的情况，并且可以从`response`对象中获取到服务器返回的数据。 下面我们来看一下如何进行get请求。同样地，在Vue组件中，可以通过Vue-resource的$http对象来发送get请求。要发送一个json形式的get请求，可以使用`this.$http.get(url, {params: jsonData})`方法，并将json数据作为`params`属性传递进去。 举一个例子，如果我们需要向服务器端发送一个json形式的get请求，可以按照以下方式实现： ``` this.$http.get('/api/users', {params: {name: 'Alice', age: 25}}).then(response => { console.log(response.body); }, error => { console.error(error); }); ``` 在这个例子中，`/api/users`是请求的url，`{name: 'Alice', age: 25}`是需要传递给服务器的json数据。同样地，在`then`方法中可以处理请求成功和失败的情况，并且从`response`对象中获取到服务器返回的数据。 总之，使用Vue-resource可以轻松地发送post和get请求，并且可以自由选择传递form或json形式的数据。以上就是关于如何使用Vue-resource进行post和get请求的简要说明。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值