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

2024-09-29 14:15:28

注意：

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>

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

总结

以上所述是小编给大家介绍的Vue resource三种请求格式和万能测试地址，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue resource中的GET与POST请求的实例代码

前言:vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能,还提供了比如 interceptors 这样处理请求过程中行为的功能.下面介绍下vue-resource中常用的GET与POST请求使用与封装方法. 访问 Github获取最新的开发文件与文档特征: 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器(interceptoers) 支持 Firefox,Chrome,Safari,Opera 和 IE9+ 非常的小(压缩后
详解vue 配合vue-resource调用接口获取数据

1.先用node+express+mysql简单配置一下后台 const express = require('express'); const mysql = require('mysql'); const static = require('express-static'); const db = mysql.createPool({ host: 'localhost', user: 'nodejs', password: 'nodejs', database:'resume', port:
vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观
详解vue前后台数据交互vue-resource文档

这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是
vue插件vue-resource的使用笔记（小结）

最近手头有个小项目,打算用vue练个手,期间用到了vue的插件:vue-resource.下面是我使用这个插件的一些经验,算是给自己写的一个笔记,分享出来也希望和我遇到同样坑的朋友可以借此踩坑而过~ 在使用这个插件之前,当然是先安装啦: npm i vue-resource --save 安装读条完毕,接下来便是在项目中引入: import VueResource from 'vue-resource' Vue.use(VueResource); 如上所述,在入口文件中引入vue-resourc
vue-resource 拦截器（interceptor）的使用详解

拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用? 拦截器能帮助我们解决的 1.添加统一的request的参数比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成 http://www.xxxx.
Vue添加请求拦截器及vue-resource 拦截器使用

一.现象统一处理错误及配置请求信息二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ,内容如下: import axios from 'axios' // 配置默认的host,假如你的API host是:http://api.htmlx.club axios.defaults.baseURL = 'http://api.htmlx.club' // 添加请求拦截器 axios.
Vue resource三种请求格式和万能测试地址

注意: 1.前端服务器测试地址的万能地址,太好用了http://jsonplaceholder.typicode.com/users,基本能响应各种请求.点击进入官网 2.这里测试只写了成功的回调函数,同时还要失败时的回调函数. HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
vue中(el-button的五种类型,三种css格式)

目录 vue(el-button五种类型,三种css格式) vue中的样式实例一实例二实例三 vue(el-button五种类型,三种css格式) 在写一个系统的css文件的时候,发现了不同类型的button的初始颜色不同,为了完美的使button的颜色和背景的颜色相映照,就去搜了一下,小做总结,为以后的使用做准备. <div> <el-button><span>默认按钮</span></el-button> <el-button t
使用JDBC连接ORACLE的三种URL格式

使用jdbc连接oracle时url有三种格式格式一: Oracle JDBC Thin using an SID: jdbc:oracle:thin:@host:port:SID Example: jdbc:oracle:thin:@localhost:1521:orcl 这种格式是最简单也是用得最多的你的oracle的sid可以通过一下指令获得: sqlplus / as sysdba select value from v$parameter where name='instance
vue的三种图片引入方式代码实例

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先给图片地址绑定变量: <template> <img :src="imgUrl"> </template> 在script中设置变量: //方法1:直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2:把imgUrl放
Vue使用三种方法刷新页面

我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好. 所以,我们选择第三种方式: 首先在App里面写下如下代码: <template> <div id="app"> <rout
Python中三种时间格式转换的方法

目录一时间元组二字符串与时间戳三时间的加减用法一时间元组 1. 时间元组和时间戳的互化 import time,datetime # 获取当前时间的时间元组 t = time.localtime() print(t) # 时间元组转时间戳 timestamp = time.mktime(t) print(timestamp) # time.struct_time(tm_year=2019, tm_mon=10, tm_mday=23, tm_hour=23, tm_min=15,
java如何利用FastJSON、Gson、Jackson三种Json格式工具自定义时间序列化

Java处理JSON数据有三个比较流行的类库FastJSON.Gson和Jackson. Jackson Jackson是由其社区进行维护,简单易用并且性能也相对高些.但是对于复杂的bean转换Json,转换的格式鄙视标准的Json格式.PS:Jackson为Spring MVC内置Json解析工具 Gson Gson是由谷歌公司研发的产品,目前是最全的Json解析工具.完全可以将复杂的类型的Json解析成Bean或者Bean到Json的转换 FastJson Fastjson是一个Java语言
Vue的三种路由模式总结

目录路由模式解析 1.hash模式 2.history模式 3.abstract模式路由三个基本概念 vue中实现路由还是相对简单的 vue-cli创建一个项目体验一下, 安装vue-router 路由模式解析这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置.如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求. 而实际使用vue和
vue中三种调用接口的方法

目录 1. this.$api.LeadershipScreen.getImportantRiskList(params) 2.需要引用 3.axios(需要先安装axios) 4.配置request 1. this.$api.LeadershipScreen.getImportantRiskList(params) 在api文件下层级关系如下图: 在index.js下 // 导入所有接口 import api from './api' const install = Vue => { if (
解决父子组件通信的三种Vue插槽

目录前言环境准备 Category组件 App组件一.默认插槽二.具名插槽三.作用域插槽总结前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用域插槽. 环境准备先搭个初始环境给大家看看哈.一步一步讲完这个插槽. 就是写了一个类别组件,分别渲染这三种数据. Category组件 <template> <div class=&q

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

相关推荐

随机推荐