Vue 和 Vue 资源答案

【问题标题】：Vue and Vue ResourceVue 和 Vue 资源
【发布时间】：2016-03-23 05:03:48
【问题描述】：

我正在尝试通过 vue-resource 发送一个帖子请求，但我似乎无法弄清楚我做错了什么。

我正在使用 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 发布请求不起作用。我确定这很简单，但我似乎无法弄清楚。 Vue 资源已正确包含在项目中，因为我将它用于获取请求而没有问题。

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.');
});

【问题讨论】：

通话结束时您的浏览器控制台会显示什么？使用 Chrome 的网络检查器的网络面板检查请求和响应。

标签： jquery vue.js

【解决方案1】：

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

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

Github Demo

【讨论】：

【解决方案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.');
        });

或尝试使用 tymon/jwt-auth 包

【讨论】：

【解决方案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.');
    });

【讨论】：

感谢您的回答，但该代码的格式不正确。
你说得对，我用正确的代码编辑了我的帖子。

【解决方案4】：

您可能缺少 csrf 令牌：

html

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

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

【讨论】：

谢谢 - 那是错误。我忘记了这一点，因为我用 $(document).ready(function(){ $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf- token"]').attr('content') } }); });所以jquery起作用了。但是，这不会将自身附加到 vue-resource 请求。
csrf_token Lavarel 有关系吗？
是的，它是在 laravel/framework/src/Illuminate/Foundation/helpers.php 中定义的