Question

这将是超长的啰嗦！

不可否认，我不是一个优秀的前端设计师，我的Javascript技能还有很多需要改进的地方。

TL：DR - 对于Axios POST请求，工作代码与非工作代码中的JSON编码数据对象（商家）有何不同？它们不应该产生相同的结果吗？

首先背景：我正在构建一个功能完备的Laravel REST后端，表单验证器，策略和工作。我已经使用适用于Chrome的ARC REST客户端测试了后端，并验证了我的后端是否完全正常运行。

问题：在使用Vuejs，Vue-Router和Axios设计我的前端时，我遇到了将数据发布到后端的问题。具体来说，它是使用HTTP错误422进行表单验证失败。我已将此问题缩小为与Vue或Axios中的对象封装有关。

以下是非工作 Vue组件：

    <div class="panel panel-default">
        <div class="panel-heading">Create Merchant</div>
        <div class="panel-body">
            <form action="#" @submit.prevent="createMerchant()">
                Primary
                <input v-model="merchant.primary" type="text" name="primary" class="form-control" autofocus>
                Alternate
                <input v-model="merchant.alternate" type="text" name="alternate" class="form-control">
                Contact
                <input v-model="merchant.contact" type="text" name="contact" class="form-control">
                Street
                <input v-model="merchant.street" type="text" name="street" class="form-control">
                City
                <input v-model="merchant.city" type="text" name="city" class="form-control">
                State
                <input v-model="merchant.state" type="text" name="state" class="form-control">
                Country
                <input v-model="merchant.country" type="text" name="country" class="form-control">
                Postal Code
                <input v-model="merchant.postalCode" type="text" name="postalCode" class="form-control">
                <button type="submit" class="btn btn-primary">Create Merchant</button>
            </form>
        </div>
    </div>

    <div v-if='errors && errors.length' class="panel panel-default">
        <div class="panel-heading">Error</div>
        <div class="panel-body">
            <ul>
                <li v-for='error of errors'>
                    {{error.message}}
                </li>
            </ul>
        </div>
    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            merchant: {
                primary: '',
                alternate: '',
                contact: '',
                street: '',
                city: '',
                state: '',
                country: '',
                postalCode: ''
            },
            errors: []
        };
    },

    methods: {
        createMerchant() { console.log(JSON.stringify(this.merchant));
            axios.post('/payment-gateway/public/api/v1/merchant', JSON.stringify(this.merchant))
            .then((response) => {
                console.log(response.data.id);
                this.$router.push({ name: 'merchantList' });
            })
            .catch(e => {
                this.errors.push(e);
            });
        }
    }
}
</script>

从我的角度来看，发布的数据似乎是正确的：

{“primary”：“Widget Company”，“alternate”：“Widget Co”，“contact”：“555-555-0055”，“street”：“123 Main St”，“city”：“Olympia ”， “状态”： “WA”， “国”： “USA”， “POSTALCODE”： “98501”}

但是上面的代码总是会导致HTTP 422错误。

现在对于令我困惑的部分，这是正常工作代码：

    <div class="panel panel-default">
        <div class="panel-heading">Create Merchant</div>
        <div class="panel-body">
            <form action="#" @submit.prevent="createMerchant()">
                Primary
                <input v-model="merchant.primary" type="text" name="primary" class="form-control" autofocus>
                Alternate
                <input v-model="merchant.alternate" type="text" name="alternate" class="form-control">
                Contact
                <input v-model="merchant.contact" type="text" name="contact" class="form-control">
                Street
                <input v-model="merchant.street" type="text" name="street" class="form-control">
                City
                <input v-model="merchant.city" type="text" name="city" class="form-control">
                State
                <input v-model="merchant.state" type="text" name="state" class="form-control">
                Country
                <input v-model="merchant.country" type="text" name="country" class="form-control">
                Postal Code
                <input v-model="merchant.postalCode" type="text" name="postalCode" class="form-control">
                <button type="submit" class="btn btn-primary">Create Merchant</button>
            </form>
        </div>
    </div>

    <div v-if='errors && errors.length' class="panel panel-default">
        <div class="panel-heading">Error</div>
        <div class="panel-body">
            <ul>
                <li v-for='error of errors'>
                    {{error.message}}
                </li>
            </ul>
        </div>
    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            merchant: {
                primary: '',
                alternate: '',
                contact: '',
                street: '',
                city: '',
                state: '',
                country: '',
                postalCode: ''
            },
            errors: []
        };
    },

    methods: {
        createMerchant() { console.log(JSON.stringify(this.merchant));
            axios.post('/payment-gateway/public/api/v1/merchant', {
                primary: this.merchant.primary,
                alternate: this.merchant.alternate,
                contact: this.merchant.contact,
                street: this.merchant.street,
                city: this.merchant.city,
                state: this.merchant.state,
                country: this.merchant.country,
                postalCode: this.merchant.postalCode
            })
            .then((response) => {
                console.log(response.data.id);
                this.$router.push({ name: 'merchantList' });
            })
            .catch(e => {
                this.errors.push(e);
            });
        }
    }
}
</script>

所以我的问题是，工作代码与非工作代码中的JSON编码数据对象（商家）有何不同？

Answer 1

在一个实例中，您正在发送一个对象，另一个实例是一个字符串。虽然最终它们都将作为字符串传输，但是当您传递对象时，ContentType将设置在application/json下。

话虽如此，如果您将ContentType设置为application/json作为字符串传递的那个，它会对问题进行排序。

在POST请求中为Vuejs和Axios命名v-model的约定（将Vue对象编码为JSON的问题）

1 个答案: