从前端获取数据并保存到数据库
html模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<form action="/form/" method="post" class="smart-green">
<h1>留言信息
<span>请留下你的信息.</span>
</h1>
<label>
<span>姓名 :</span>
<input id="name" type="text" name="name" class="error" placeholder="请输入您的姓名"/>
<div class="error-msg"></div>
</label>
<label>
<span>邮箱 :</span>
<input id="email" type="email" value="" name="email" placeholder="请输入邮箱地址"/>
<div class="error-msg"></div>
</label>
<label>
<span>联系地址 :</span>
<input id="address" type="text" value="" name="address" placeholder="请输入联系地址"/>
<div class="error-msg"></div>
</label>
<label>
<span>留言 :</span>
<textarea id="message" name="message" placeholder="请输入你的建议"></textarea>
<div class="error-msg"></div>
</label>
<div class="success-msg"></div>
<label>
<span> </span>
<input type="submit" class="button" value="提交"/>
</label>
</form>
</body>
</html>
将<form action="/form/" method="post" class="smart-green">
修改:
1、form 改为与url一致的 message_form
2、method:两种提交方式post和get
写好input后加入以下内容,即可提交数据到后端。
<label>
<span> </span>
<input type="submit" class="button" value="提交"/>
</label>
重新运行项目,在页面中填写信息后提交,会出现以下问题
解决方法:在form结束处加入:{% csrf_token %}
再回到页面进行提交就不会出问题了。
之后,进入views.py ,在页面提交一下,得到request类型为WSGIRequst
关于input标签: 标签用于搜集用户信息。
html <input id="address" type="text" value="" name="address"
placeholder="请输入联系地址"/>
name属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
更具体内容可以查看以下网站https://www.w3school.com.cn/tags/tag_input.asp
输入以下代码,将数据存入数据库
def message_form(request):
if request.method == 'POST':
name = request.POST.get('name', '') # 参数与html中input设定的name要保持一致
email = request.POST.get('email', '')
address = request.POST.get('address', '')
mymessage = request.POST.get('message', '')
message = Message()
message.name = name
message.email = email
message.address = address
message.message = mymessage
message.save()
return render(request, "message_form/message_form.html")
原本接受和提交请求可以写成两个url,比如message_form 和 add_message_form,但是那样后期会因为创建太多url而管理困哪,所以用if的方法将两个url浓缩到一个url中来
提取数据
def message_form(request):
if request.method == 'GET':
all_messages = Message.objects.all()[0]
if all_messages:
message = all_messages[0]
return render(request, "message_form/message_form.html", {
"message": message
})
# 或 return render(request, "message_form/message_form.html", locals())
可以优化为:
if request.method == 'GET':
var_dict = {}
all_messages = Message.objects.all()[0]
if all_messages:
message = all_messages[0]
var_dict = {
'message':message
}
return render(request, "message_form/message_form.html", var_dict)
然后修改html,input的话添加value = {{ message.xxx }}
<label>
<span>姓名 :</span>
<input id="name" type="text" value = "{{ message.name }}" name="name" class="error" placeholder="请输入您的姓名"/>
<div class="error-msg"></div>
</label>
textarea添加 {{ message.xxx }}如下
<label>
<span>留言 :</span>
<textarea id="message" name="message" placeholder="请输入你的建议">{{ message.message }}</textarea>
<div class="error-msg"></div>
</label>
重新运行项目,重新输入网址进来后: