【Django】前后端数据交互
1 从前端界面提取数据
django将数据从前端传输到后端，前端界面需要设置以下几点：
- <form>标签中action属性应设置为该表单将传递到的url地址，method属性设置为post；
- 后端会根据name属性提取数据，因此每个输入标签的name属性应当经过考量后设置；
- 表单应该有提交按钮，且type属性设置为"submit"；
- 由于django有一定的安全验证机制，因此在form表单的最后应当设置{% csrf_token %}；
{# 前端页面表单部分 #}
<form action="/message_form/" method="post" class="smart-green">
<h1>留言信息
<span>请留下你的信息.</span>
</h1>
<label>
<span>姓名 :</span>
{# 后端会根据name属性提取数据 #}
<input id="name" type="text" name="name" value="{{ message.name }}" class="error" placeholder="请输入您的姓名"/>
<div class="error-msg"></div>
</label>
<label>
<span>邮箱 :</span>
<input id="email" type="email" value="{{ message.email }}" name="email" placeholder="请输入邮箱地址"/>
<div class="error-msg"></div>
</label>
<label>
<span>联系地址 :</span>
<input id="address" type="text" value="{{ message.address }}" name="address" placeholder="请输入联系地址"/>
<div class="error-msg"></div>
</label>
<label>
<span>留言 :</span>
<textarea id="message" name="message" placeholder="请输入你的建议">{{ message.message }}</textarea>
<div class="error-msg"></div>
</label>
<div class="success-msg"></div>
<label>
<span> </span>
<input type="submit" class="button" value="提交"/>
</label>
{# 安全验证机制 #}
{% csrf_token %}
</form>
后端接收数据时，为了使用同一个函数既处理get操作，又处理post操作，所以需要加上if判断访问该url的方式；获取数据时使用request.POST.get()函数。
# 后端逻辑部分
def message_form(request):
if request.method == "POST":
# 若访问该url的方式为“POST”，即提交表单时，执行以下操作
message = Message()
message.name = request.POST.get("name", "")
message.email = request.POST.get("email", "")
message.address = request.POST.get("address", "")
message.message = request.POST.get("message", "")
message.save()
return render(request, "message_form.html")
2 传递数据到前端并显示
django将数据从后端获取并显示在前端时，每一个input标签的value显示后端数据，下面代码的{{ message.name }}是django前端模板的使用方式，意为显示后端传递的message数据对象的name属性。
{# 前端页面表单部分 #}
<form action="/message_form/" method="post" class="smart-green">
<h1>留言信息
<span>请留下你的信息.</span>
</h1>
<label>
<span>姓名 :</span>
{# 后端会根据name属性提取数据,value属性接收后端传来的数据并显示 #}
<input id="name" type="text" name="name" value="{{ message.name }}" class="error" placeholder="请输入您的姓名"/>
<div class="error-msg"></div>
</label>
<label>
<span>邮箱 :</span>
<input id="email" type="email" value="{{ message.email }}" name="email" placeholder="请输入邮箱地址"/>
<div class="error-msg"></div>
</label>
<label>
<span>联系地址 :</span>
<input id="address" type="text" value="{{ message.address }}" name="address" placeholder="请输入联系地址"/>
<div class="error-msg"></div>
</label>
<label>
<span>留言 :</span>
<textarea id="message" name="message" placeholder="请输入你的建议">{{ message.message }}</textarea>
<div class="error-msg"></div>
</label>
<div class="success-msg"></div>
<label>
<span> </span>
<input type="submit" class="button" value="提交"/>
</label>
{# 安全验证机制 #}
{% csrf_token %}
</form>
从后端传递数据到前端，一般采用字典格式，通过render()函数直接传递即可，字典的key就是前端input标签的value属性中可以引用的数据。
# 后端逻辑部分
def message_form(request):
if request.method == "POST":
# 若访问该url的方式为“POST”，即提交表单时，执行以下操作
message = Message()
message.name = request.POST.get("name", "")
message.email = request.POST.get("email", "")
message.address = request.POST.get("address", "")
message.message = request.POST.get("message", "")
message.save()
return render(request, "message_form.html", {
"message": message
})
if request.method == "GET":
# 若访问该url的方式为“GET”，即正常访问网页时，执行以下操作
var_dict = {}
all_messages = Message.objects.all()
if all_messages:
message = all_messages[0]
var_dict = {"message": message}
# 后端数据以字典形式传递
return render(request, "message_form.html", var_dict)
