vue-resource

CORS issue with Vue.js

余生颓废 提交于 2019-11-29 09:41:48
问题 I'm using: Vue 2.0.3 vue-router 2.0.1 vuex 0.8.2 vue-resource 0.7.0 And after trying to login to my page when using remote API, not the locally run one, I get cors error like following vue-resource.common.js?2f13:1074 OPTIONS https://mywebsite/api/auth/login (anonymous function) @ vue-resource.common.js?2f13:1074 Promise$1 @ vue-resource.common.js?2f13:681 xhrClient @ vue-resource.common.js?2f13:1033 Client @ vue-resource.common.js?2f13:1080 (anonymous function) @ vue-resource.common.js?2f13

Vue.js v-show in a list

僤鯓⒐⒋嵵緔 提交于 2019-11-29 07:29:47
I'm sure this one's gonna be extremely easy for you guys. I am trying to make a simple list of posts with the post titles always visible, and when you click a specific post in the list, you get the post's body. I used v-show for that. However, when I click a specific post, the bodies of all of the posts appear, instead of just the one that I clicked. Here's the template: <template> <div class="container"> <h1>My Posts</h1> <ul class="list-group"> <li class="list-group-item" v-for="post in list"> <div @click="changeShow"> <h4>{{ post.title }}</h4> <p v-show="show">{{ post.body }}</p> <span v

抛弃vue-resource拥抱axios

僤鯓⒐⒋嵵緔 提交于 2019-11-29 06:43:47
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是以为这样就可以了?下面直接get/post/jsonp各种顺心?然并卵! 写了一个简单的get请求,然后用webpack编译的时候有木有发现下面的错误: Modules not found, can't resolve './package' 什么鬼 意思就是这个模块找不到,为什么找不到呢?我也没主动去装过这个模块呀,难道装其他包的时候有什么错误?或者要我再主动装package模块? 最笨的办法,删除node_modules,重新npm install 试试还会不会出错,ok, npm install 后突然发现下面这个鬼 看当中那团屎黄色的提示。package require os(darwin) not compatible with your platform(win32) darwin是什么玩意? 百度百科的解释: Darwin是由苹果电脑于2000年所释出的一个开放原始码操作系统。Darwin 是MacOSX 操作环境的操作系统成份。 这是赤裸裸的歧视windows呀!没有钱换mac咋办了,还有没有其他办法解决package 我是没找到,没办法,vue

vue解决跨域问题

Deadly 提交于 2019-11-29 06:05:19
这两天有朋友用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': { target: 'https://api.douban.com',

How to use vue-resource ($http) and vue-router ($route) in a vuex store?

江枫思渺然 提交于 2019-11-29 04:13:23
Before I was getting movie detail from the component's script. The function first check whether the movie ID of the store is same as of the route's param movie ID. If its same then don't get the movie from the server API, or else get the movie from the server API. It was working fine. But now I am trying to get the movie details from the store's mutation. However I am getting error Uncaught TypeError: Cannot read property '$route' of undefined How to use vue-router ($route) to access the params and vue-resource ($http) to get from the server API in vuex store? store.js: export default new Vuex

Include global functions in Vue.js

烂漫一生 提交于 2019-11-29 00:56:58
问题 In my Vue.js application I want to have some global functions. For example a callApi() function which I can call every time I need access to my data. What is the best way to include these functions so I can access it in all my components? Should I create a file functions.js and include it in my main.js? Should I create a Mixin and include it in my main.js? Is there a better option? 回答1: Your best bet would be a Plugin, which lets you add features to the global vue system. [from the vuejs Docs

vue-resource请求网络接口

时光总嘲笑我的痴心妄想 提交于 2019-11-28 19:36:03
vue-resource,http请求使用示例 【首先,安装vue-resource的包】 npm install vue-resource --save 【main.js】页面 import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import VueResource from 'vue-resource' /* 1、引用vue-resource,http请求 */ import Mans from './components/Mans.vue' import Users from './components/Users.vue' Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueResource) /*/2、声明http请求vue-resource的使用 */ const router=new VueRouter({ routes:[ {path:"/",component:Users}, {path:"/mans",component:Mans}, ], mode:"history" }) new Vue({ el: '#app', router, components: { App },

交互与实例的生命周期

那年仲夏 提交于 2019-11-28 06:22:27
交互与实例的生命周期 交互基本概念 1. 交互的应用场景(什么时候用到前后端交互) 从后端获取一些数据,将其进行展示或计算 将用户在页面中提交的数据发送给后端 2. Vue请求数据交互 vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件,axios与fetch是第三方插件 Vue.js resource交互 Vue自身不带处理HTTP请求 如果想使用HTTP请求必须要引入 vue-resource.js 库它可以通过XMLHttpRequest发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。 Vue.js 交互借助于 $http 完成,下载:npm install --save vue-resource get 类型 语法: this.$http.get("http://localhost:3000/get",{params:{uname:"王大锤"}}).then( (ok)=>{ console.log(ok); }, (err)=>{ console.log(err); } ) post类型 语法: this.$http.get("http://localhost:3000/post",{uname:"王大锤"},

vue-resource和axios区别

蹲街弑〆低调 提交于 2019-11-28 05:36:22
vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。 vue-resource特点 vue-resource插件具有以下特点: 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。 URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。

CORS Post Request Fails

廉价感情. 提交于 2019-11-28 01:19:09
I built an API with the SLIM Micro-Framework. I setup some middleware that adds the CORS headers using the following code. class Cors{ public function __invoke(Request $request, Response $response, $next){ $response = $next($request, $response); return $response ->withHeader('Access-Control-Allow-Origin', 'http://mysite') ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization') ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); } } For my front-end, I used VueJS. I setup VueResource and created a function with