vue-resource

vue实战——vue中发送AJAX请求

我是研究僧i 提交于 2019-12-03 03:51:24
vue实战——vue中发送AJAX请求 一、简介 1)vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 2) axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。 参考:GitHub上搜索axios,查看API文档 二、使用axios发送AJAX请求 1、安装axios并引入 1)npm的方式: $ npm install axios -S 2)bower的方式:$ bower install axios 3)cdn的方式:<script src=”https://unpkg.com/axios/dist/axios.min.js”></script> 2、基本用法 1)axios([options]) <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title > axios发送ajax请求基本用法 </ title > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ script > < script src = "https://unpkg.com

vue2.0项目使用vue-resource实现简单的post和get(实例详解)

匿名 (未验证) 提交于 2019-12-03 00:32:02
本文只展示vue-resource实现的相关代码,对于页面的实现和数据渲染就不多加解释了。 一、安装 1、下载并安装vue-resource npm install vue-resource --save 查看依赖文件存在vue-resource说明安装成功 2、vue项目中引入vue-resource 在main.js函数中引入,如下图 二、应用 我使用了“ JSONPlaceholder ”网站提供的API接口来模拟post和get。 1、post数据到服务器: 定义了一个blog对象,用于存放用户输入的值,然后把blog对象传输到服务器。 JSONPlaceholder提供的数据: 1)定义一个blog对象(初始化为空): 2)post方法:把blog对象传输到服务器 按钮被点击后触发post方法: 测试 前端页面展示: 点击添加博客按钮后,查看后台数据如下: (用户输入的数据已经传输到后台服务器,完成) 2、get服务器的数据 读取JSONPlaceholder上面的数据,并在前端页面中展示 1)声明一个空数组来存放从服务器读取的数据: 2)get方法读取服务器里的数据: 3)页面渲染数据 测试 页面展示的结果:共有十条数据 (完成) 文章来源: vue2.0项目使用vue-resource实现简单的post和get(实例详解)

SPA开发第一天(vue-cli)

匿名 (未验证) 提交于 2019-12-03 00:22:01
01、node安装和生成vue项目 安装node第三步选择其余步骤NEXT 淘宝镜像d:\nodejs>npm install -g cnpm --registry = https://registry.npm.taobao.org 添加对应的文件夹npm config set prefix "C:\Program Files\nodejs\node_global" npm config set cache "C:\Program Files\nodejs\node_cache"(可以不做不啊?) vue.js安装 npm install -g vue-cli cd到vue安装目录 vue init webpack-simple 项目名称(小写) 简单模式 vue init webpack 项目名称(小写) 标准模式 项目生成好后 cd 到项目文件夹下 进行npm install 操作下载依赖环境 使用npm run dev 启动服务 (ctrl+c停止服务) 使用npm run build 打包服务 02、路由和vue-resource/axios 路由 import Vue from 'vue' import Router from 'vue-router' /*import Hello from '@/components/Hello'*/ import GoodsList

使用Vue发送请求

匿名 (未验证) 提交于 2019-12-03 00:05:01
使用vue-resource发送给请求,除了vue-resource以外还可以使用axios第三方包 官网 引入链接: <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> 引入vue-resource的js文件。先引入vue,因为这个vue-resource依赖于vue的 引入了vue-resource之后,就可以在vue的方法里使用this.$http调用接口了 写在create()方法中,该方法与data,methods等同级 发送get请求: 第一个参数是地址,第二个参数是可选的,可以配置请求头,返回的是promise对象 发送post请求 第一个参数是地址,第二个是参数,第三个参数是请求头设置,可选的 created() { // get 没有请求参数 this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(response => { console.log(response); this.list = response.body.data; }), // post 有请求参数 this.$http.post('http://yapi.shangyuninfo.com/mock/36

vue解决跨域问题

匿名 (未验证) 提交于 2019-12-02 23:57:01
这两天有朋友用vue写页面遇到了跨域问题(其实是后台的问题),但是在局域网下也得把数据调过来,我在这里简单总结两种方法吧,希望对大家有帮助。 跨域问题的报错是下面这样的: 第一种办法:用vue-resource 输入指令 npm install vue - resource -- save 然后在main.js文件引入 import VueResource from 'vue-resource' Vue . use ( VueResource ) 接下来在需要的vue单文件组件里调接口就可以了,会用到jsonp格式,写以下的代码 this . $http . jsonp ( 'https://192.168.0.188:8081/api/Values' , {},{ headers : {}, emulateJSON : true }) . then (( res ) => { console . log ( res ); }) . catch ( function ( err ){ console . log ( err ) }) 这种办法,可以在控制台打开network,看看调用返回的内容,状态码是200就说明调用成功 第二种方法:用第三方接口proxyTable 1 在config目录下index.js文件中设置proxyTable proxyTable : { '/v1'

[Vue] : vue-resource 实现 get, post, jsonp请求

匿名 (未验证) 提交于 2019-12-02 23:45:01
常见的数据请求类型:get,post,jsonp 除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 vue-resource 官方文档 vue-resource 的配置步骤: 直接在页面中,通过 script 标签,引入 vue-resource 的脚本文件; <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-resource-1.3.4.js"></script> 注意:引用的先后顺序是:先引用 Vue 的脚本文件,再引用 vue-resource 的脚本文件; 发送get请求: 当发起get请求之后, 通过 .then 来设置成功的回调函数 getInfo() { // get 方式获取数据 this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => { console.log(res.body); }) } 发送post请求: postInfo() { var url = 'http://127.0.0.1:8899/api/post'; // post 方法接收三个参数: // 参数1: 要请求的URL地址 // 参数2: 要发送的数据对象 // 参数3:

Vue.js vue-resource

Deadly 提交于 2019-12-02 11:25:29
1.安装与引入 (1)在HTML文件中引入 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> (2)在脚手架中使用 安装vue-resource npm i vue-resource -S 在入口文件中引入 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 安装引入之后会在vm对象和组件对象添加一个属性$http 2.get方法 $http.get(url,option) 使用get传递参数时有2个方法: (1)url拼接 (2)传入配置对象,配置params属性 <script> export default { data(){ return{ baseUrl:"https://api.github.com/search/repositories", } }, methods:{ getMsg(){ //拼接url传递参数 var url = this.baseUrl + '?q=vue&sort

Cannot read property 'post' of undefined vue

别来无恙 提交于 2019-12-02 06:12:58
问题 Thanks for reading my question. I have read about my problem VUE JS 2 + WEBPACK Cannot read property 'get' of undefined VUE RESOURCE But my system no read Vue var :( I have a vue component calls app.vue and i need to use vue-resource to get data from my post. But the error a lot times is: TypeError: Cannot read property 'post' of undefined at VueComponent.loadingProcess Do u have ideas to solve it? My app.vue <script> var Vue = require('vue'); //Vue.use(require('vue-resource')); //Vue.use();

Cannot read property 'post' of undefined vue

落爺英雄遲暮 提交于 2019-12-01 23:43:19
Thanks for reading my question. I have read about my problem VUE JS 2 + WEBPACK Cannot read property 'get' of undefined VUE RESOURCE But my system no read Vue var :( I have a vue component calls app.vue and i need to use vue-resource to get data from my post. But the error a lot times is: TypeError: Cannot read property 'post' of undefined at VueComponent.loadingProcess Do u have ideas to solve it? My app.vue <script> var Vue = require('vue'); //Vue.use(require('vue-resource')); //Vue.use(); export default { data () { return { msg: 'Hello from vue-loader! nice!', user: {} } }, mounted:

How to use plugins like vue-resource when using Vue.js with Typescript?

…衆ロ難τιáo~ 提交于 2019-12-01 18:13:00
问题 I started using Typescript and trying to apply it to my project. However, I can't get Vue.js plugins like vue-resource to work with it. When I use this.$http.post() I get the error: error TS2339: Property '$http' does not exist on type 'typeof Vue'. which makes sense because I am in a class context. But how can I do that? This is my full component: <template> <div> <h1>Sign up</h1> <form> <div class="form-group"> <label for="name">Name</label> <input v-model="name" type="text" class="form