获取 Django Rest Framework 以从特定 post 变量获取 post 数据

Question

我正在构建一个带有 Vue.js 2 SPA 的 Django 应用程序。这意味着一切都必须使用 AJAX 调用来完成。在我的例子中，这些都是用 axios 处理的。

为了方便起见，我在网上找到了ES6的表格class。这使我可以拥有一个可重用的表单对象，我可以轻松提交它并仍然处理 Promise 就像我直接使用 axios 一样。 class 的形式如下所示：

import Errors from './Errors';
export default class Form {
    /**
     * Create a new Form instance.
     *
     * @param {object} data
     */
    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }


    /**
     * Fetch all relevant data for the form.
     */
    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return {data};
    }


    /**
     * Reset the form fields.
     */
    reset() {
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }


    /**
     * Send a POST request to the given URL.
     * .
     * @param {string} url
     */
    post(url) {
        return this.submit('post', url);
    }


    /**
     * Send a PUT request to the given URL.
     * .
     * @param {string} url
     */
    put(url) {
        return this.submit('put', url);
    }


    /**
     * Send a PATCH request to the given URL.
     * .
     * @param {string} url
     */
    patch(url) {
        return this.submit('patch', url);
    }


    /**
     * Send a DELETE request to the given URL.
     * .
     * @param {string} url
     */
    delete(url) {
        return this.submit('delete', url);
    }


    /**
     * Submit the form.
     *
     * @param {string} requestType
     * @param {string} url
     */
    submit(requestType, url) {
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.data())
                .then(response => {
                    this.onSuccess(response.data);

                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data);

                    reject(error.response.data);
                });
        });
    }


    /**
     * Handle a successful form submission.
     *
     * @param {object} data
     */
    onSuccess(data) {
        console.log(data);
        this.reset();
    }


    /**
     * Handle a failed form submission.
     *
     * @param {object} errors
     */
    onFail(errors) {
        this.errors.record(errors);
    }
}

目前给我一些问题的部分是，当我将数据提交到 Django REST Framework 时，我通过使用 ModelSerializer 获得了所有代码处理，但我似乎找不到一种简单的方法来告诉它 POST 数据的结构与预期的略有不同。这是一个示例请求数据：

{"data":{"name":"b-0123","windfarm":2,"longtitude":"234","latitude":"345","ip_address":"10.0.0.123"}}

我知道解决方案要么让 Django 知道它应该从 request.POST['data'] 获取模型的 POST 数据，要么让 ES6 表单 class 通过原始字段而不是将所有内容作为数据对象发送。我不知道的部分是如何让其中任何一个工作。

Answer 1

事实证明，使它正常工作非常简单。我只需要改变这个：

/**
 * Fetch all relevant data for the form.
 */
data() {
    let data = {};

    for (let property in this.originalData) {
        data[property] = this[property];
    }

    return {data};
}

进入这个：

/**
 * Fetch all relevant data for the form.
 */
data() {
    let data = {};

    for (let property in this.originalData) {
        data[property] = this[property];
    }

    return data;
}

这返回了数据数组而不是包含数据数组的对象

获取 Django Rest Framework 以从特定 post 变量获取 post 数据

Getting Django Rest Framework to get postdata from specific post variable

django

django-rest-framework

axios

vuejs2