如何处理与多个相关模型的批量创建?

我建议解决前端的question -> options关系问题。下面是一个使用jQuery的代码片段，在您填写表单并单击"提交"之后，JSON将在pre块中打印出来。

const $questionTemplate = $('#template-question').removeAttr('id');
const $optionTemplate = $('#template-option').removeAttr('id');
const $output = $('#output');
function newOption() {
// clone the option template
return $optionTemplate.clone();
}
function newQuestion() {
// clone the question template, replace the place holder [data-container=options] with 1 Option
const $questionClone = $questionTemplate.clone();
$questionClone
.find('[data-container=options]')
.replaceWith(newOption());
return $questionClone;
}
function addQuestion(btnEl) {
//add a question to before the btnEl
//You might need to change this to find the right location to add the template suit your design
$(btnEl).before(newQuestion());
}
function addOption(btnEl) {
//add a option to before the btnEl
//You might need to change this to find the right location to add the template suit your design
$(btnEl).before(newOption());
}
function getValue($el) {
switch ($el.attr('type')) {
case 'checkbox':
// for checkbox type, jquery will give 'on' if checked, we convert it to a boolean here
return $el.val() === 'on';
default:
// otherwise we just take the raw value.
return $el.val();
}
}
function elementToObject($el) {
//this function maps dom to a javascript object (or python dictionary),
//this implementation only look at one level below the $el
//You most likely need to change how this function finds the `data-attr` and their values
/*
<div>
<input type="text" data-attr="name1" value="value1">
<input type="text" data-attr="name2" value="value2">
<div>
<!-- NOTE: this won't be included, since we used `.children()`, you might want to use `.find()`
<input type="text" data-attr="name3" value="value3">
</div>
</div>
becomes
{
"name1": "value1",
"nam2": "value2"
}
*/
return Object.fromEntries(
$el
.children('[data-attr]')
.toArray()
.map((attr) => {
const $attr = $(attr);
return [$attr.attr('data-attr'), getValue($attr)];
})
);
}
function init() {
const $form = $('#form');
$form.click((e) => {
//binding to the form's click function allows newly added buttons to trigger this even
//without binding events to the new buttons themselves.
//all clicks within the form will be captured by this listener
//but we are only interested in buttons with 'data-action' attributes
switch ($(e.target).attr('data-action')) {
case 'add-question':
return addQuestion(e.target);
case 'add-option':
return addOption(e.target);
}
});
$form.submit((e) => {
e.preventDefault();
const result = $form
.find('[data-container=question]')
.toArray() //find all question elements, turn them into an array
.map((question) => {
const $question = $(question);
const questionObj = elementToObject($question); // serialize it to a object (dictionary)
questionObj.options = $question // add options to the object (dictionary)
.find('[data-container=options]')
.toArray() // find all option elements inside of the question element, turn them into an array
.map((option) => elementToObject($(option))); // serialize it to a object (dictionary)
return questionObj;
});
$output.text(JSON.stringify(result, null, 4));
});
$form.prepend(newQuestion());
}
init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BEGIN templates -->
<!-- these are just here for cloneing -->
<div style="display: none">
<div
id="template-question"
data-container="question"
style="padding-bottom: 10px"
>
<hr />
Question:
<input type="text" data-attr="question" placeholder="Enter question" />
<div data-container="options"></div>
<button type="button" data-action="add-option">Add more</button>
</div>
<div
id="template-option"
data-container="options"
style="padding: 10px 0px 10px 30px"
>
Title:
<input type="text" placeholder="Enter title" data-attr="title" /><br />
Option:
<select data-attr="option">
<option disabled>Select</option>
<option value="1">Option1</option>
<option value="2">Option2</option></select
><br />
Is File: <input data-attr="is_file" type="checkbox" />
</div>
</div>
<!-- END templates -->
<form id="form">
<button type="button" data-action="add-question">New group</button>
<button type="submit">Submit</button>
</form>
<pre id="output"></pre>

在我们得到我们想要的数据结构之后，你有几个选项将它发送到后端:

Option1(推荐):您可以通过AJAX ($.ajax)使用application/json作为内容类型的请求提交，并在您的视图中，使用json.loads请求体将JSON对象转换为dict，从那里您应该能够轻松地完成bulk_create。

Option2:创建另一个表单，只有一个隐藏的textarea，将结果写入textarea，然后提交表单，在您的视图中，您可以执行json.loads(request.GET.get('textareaname'))来获得结果。

Option3:使用django-restframework来处理负载。如果使用模型序列化器，它可以处理错误、反序列化数据，甚至为您创建模型。我个人会选择这个选项，但是你可能需要花一些时间来学习这个框架。