使用 AngularJS 和 Express 将复杂的表单数据发布到 RESTful API

Question

我会尽可能快地提出这个问题，但它相当复杂。我有一个 api，我试图向其发布嵌套数据，但我不知道如何正确地构造数据来做到这一点。

所以我为调查制作应用程序构建了一个 API。一般结构是 User --> Quiz --> Question --> QuestionChoice，每个 --> 代表一对多的关系。

API 的所有模型看起来都相似，所以我不会在此处发布它们，但这里是其中的一个示例。我使用 SailsJS 和 Waterline ORM 构建了 API。我已经用浏览器的直接请求对此进行了测试，API 和数据库目前工作正常，所以我的问题出在前端。

module.exports = {

    attributes: {

        title: {
            type: 'string',
            required: true
        },

        is_active: {
            type: 'boolean',
            defaultsTo: 'false'
        },

        quiz: {
            model: 'quiz',
            required: true
        },

        choices: {
            collection: 'questionchoice',
            via: 'question'
        }

    }
};

好的，所以在前端，我有一个复杂的嵌套表单，用户可以在其中构建测验数据。这是它的缩写版本：

form(name='newQuiz' ng-submit='createNewQuiz()')
    input.quiz-name(type='text', name='name', class='form-control' ng-model='quiz.name' placeholder='SURVEY NAME')
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.question-column
        input.question-input(placeholder='QUESTION ONE', type='text', name='question', class='form-control', ng-model="quiz.q1.question")
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.answer-column
        input.answer-input(placeholder='ANSWER CHOICE A', type='text', name='answer', class='form-control', ng-model="quiz.q1.answers.a")
        input.answer-input(placeholder='ANSWER CHOICE B', type='text', name='answer', class='form-control' ng-model="quiz.q1.answers.b")
        input.answer-input(placeholder='ANSWER CHOICE C', type='text', name='answer', class='form-control' ng-model="quiz.q1.answers.c")
        input.answer-input(placeholder='ANSWER CHOICE D', type='text', name='answer', class='form-control' ng-model="quiz.q1.answers.d")
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.question-column
        input.question-input(placeholder='QUESTION ONE', type='text', name='question', class='form-control', ng-model="quiz.q2.question")
    .col-lg-6.col-md-6.col-sm-6.col-xs-12.answer-column
        input.answer-input(placeholder='ANSWER CHOICE A', type='text', name='answer', class='form-control', ng-model="quiz.q2.answers.a")
        input.answer-input(placeholder='ANSWER CHOICE B', type='text', name='answer', class='form-control' ng-model="quiz.q2.answers.b")
        input.answer-input(placeholder='ANSWER CHOICE C', type='text', name='answer', class='form-control' ng-model="quiz.q2.answers.c")
        input.answer-input(placeholder='ANSWER CHOICE D', type='text', name='answer', class='form-control' ng-model="quiz.q2.answers.d")
    .button-row
        input.btn.btn-primary.launch-button(type='submit', value='Save Quiz', class='btn btn-primary')
        input.btn.btn-primary.launch-button(class='btn btn-primary' value='Go Live!')

现在，我有点不清楚。在表单提交时运行的 createNewQuiz 函数。所以我的问题是，我怎样才能在这里构造数据，以便我的 API 接受它。到目前为止，我尝试过的任何方法似乎都不起作用。

$scope.createNewQuiz = function() {
    console.log($scope.currentUser)
    console.log($scope.quiz)
    var newQuiz = {
        user: $scope.currentUser,
        name: $scope.quizName,
        questions: //No idea what to put here
        }

    $http.post('http://localhost:1337/quiz/create', newQuiz)
        .success(function (data, status, headers) {
            alert('new quiz created');
        }).error(function (data, status, headers) {
            alert('error creating new quiz')
            console.log(data, status, headers)
        })
    }
}

Answer 1

您的模型嵌套得很深User --> Quiz --> Question --> QuestionChoice，默认情况下 Waterline 无法处理它。您应该通过在创建和/或更新操作时修改默认蓝图 API 来处理它。

1. 您可以通过 Angular 将嵌套数据放入您的请求中
2. 您必须自行覆盖默认蓝图创建和/或更新（如果用户可以更新）以满足您的需求。