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

Question

我尽量把这个问题说得快一点，但它相当复杂。我有一个api，我试图POST嵌套的数据，但我不知道如何正确地结构化数据这样做。

所以我已经为调查制作应用程序构建了一个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和水线不能处理它默认情况下。您应该通过在创建和/或更新操作时修改默认的Blueprint API来处理它。

1. 你可以用Angular把你的嵌套数据放到你的请求中。
2. 你必须覆盖默认的蓝图，创建和/或更新(如果用户可以更新它)由你自己来满足你的需要。