Vue 和 Vue 资源

Question

我正在尝试通过 vue-resource 发送一个 post 请求，但我似乎不太明白我做错了什么。

我正在使用 Laravel 5.1 来处理请求。

以下 jquery 代码在我的 Vue 方法中运行良好。

 $.ajax({
        type: 'POST',
        url: '/purchase/save-cart-items',
        data: { 'purchaseItems' : purchaseItems},
        success: function (response) {
            if(response == "ok") {
                alert("Cart saved successfully.");   
            } else {
                alert('There was a problem saving this cart. Please try again.');
            }
        }
    });

但是，由于某些原因，将上面的 jquery 替换为以下 vue-resource post 请求不起作用。我确定这很简单，但我似乎无法弄清楚。 Vue-resource 已正确包含在项目中，因为我正在使用它毫无问题地获取请求。

this.$http.post('/purchase/save-cart-items', {purchaseItems:purchaseItems}, function (data, status, request) {
    alert("Cart saved successfully.");
}).error(function (data, status, request) {
    alert('There was a problem saving this cart. Please try again.');
});

Answer 1

您可能缺少 csrf 令牌：

html

<meta id="token" name="token" content="{{ csrf_token() }}">

js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

Answer 2

代码应该是：

this.$http.post('/purchase/save-cart-items', {purchaseItems:purchaseItems})
    .success(function (data, status, request) {
        alert("Cart saved successfully.");
    })
    .error(function (data, status, request) {
        alert('There was a problem saving this cart. Please try again.');
    });

Answer 3

代码应该是：

 this.$http.post('purchase/save-cart-items', {purchaseItems:purchaseItems})
        .success(function (data, status, request) {
            alert("Cart saved successfully.");
        })
        .error(function (data, status, request) {
            alert('There was a problem saving this cart. Please try again.');
        });

或尝试使用 tymon/jwt-auth 个软件包

Answer 4

Vue作者已停止更新和维护vue-resource。他自己也建议使用axios，axios更易用易维护。 axios introduction

如果您刚开始学习 Vue，这里有一个入门级的演示。虽然只是一个小应用，但是涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端、后台、数据库等网站必备的一些要素，对我来说，学习意义重大，谨此共勉！

Github Demo

Vue 和 Vue 资源

Vue and Vue Resource

jquery

vue.js