在上一章Django实践（四）房贷计算器中，我们建立了Django的基本项目，得到了一个简单的示例页面。
项目测试
接下来我们可以在这个基础上，将房贷算法逐步添加到代码中（也许有些甚至可以直接放在前端）。
首先我们先让后台和前台连动起来，让Django可以获取从前端输入的数据，我们把这称为post。
建立一个简单的交互示例：重点参考Django新手图文入门教程
我们来建立第一个简单的交互示例
首先修改view.py
from django.shortcuts import render
# Create your views here.
from django.http import HttpResponse
from django import template
user_list = [
{"user":"jack","pwd":"abc"},
{"user":"tom","pwd":"ABC"}
]
def index(request):
# 老代码注释掉 return HttpResponse("Hello, world. You're at the apartment index.")
if request.method == "POST":
username = request.POST.get('username',None)
password = request.POST.get('password',None)
temp = {"user":username,"pwd":password}
user_list.append(temp)
return render(request,"apartment/index.html",{"data":user_list})
其次，在 fdsite/下建立一个apartment文件夹，文件夹中建立index.html （之所以要多建立一个apartment文件夹是因为未来做应用拓展的时候不容易撞车）
├─apartment
│ ├─migrations
│ │ └─__pycache__
│ └─__pycache__
├─fdsite
│ └─__pycache__
├─static
└─templates <----就是这个
└─apartment
在该index.html中输入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>用户输入：</h1>
<form action="/index/" method="post">
{% csrf_token %}
<input type="text" name="username" />
<input type="text" name="password" />
<input type="submit" value="提交" />
</form>
<h1>用户展示：</h1>
<table border="1">
<thead>
<th>用户名</th>
<th>密码</th>
</thead>
<tbody>
{% for line in data %}
<tr>
<td>{{ line.user }}</td>
<td>{{ line.pwd }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
改好之后，运行
$ python manage.py runserver
可能遇到的错误
看一看，如果出现url错误可以在fdsite/fdsite/urls.py下修改路由：
from django.conf.urls import include, url
from django.contrib import admin
# 注意下面的index/ 相比上一章路由做出修改
urlpatterns = [
url(r'^index/', include('apartment.urls')),
url(r'^admin/', admin.site.urls),
]
再运行应该可以得到：
交互图片.png
这是一个简单的交互功能，作用是用户输入的账户和密码均能排列在下方。其中对我们最有价值的代码在于利用{"data":user_list}这个字典来储存数据，另外也展示了前端可以实时的相应数据的变更情况。
接下来我们正式开始项目。
字典的结构应该是这样：
/view.py
def index(request):
# return HttpResponse("Hello, world. You're at the apartment index.")
if request.method == "POST":
data_A = request.POST.get('data_A',None)
data_B = request.POST.get('data_B',None)
data_C = request.POST.get('data_C',None)
temp1 = {"name":"data_A","int":data_A}
temp2 = {"name":"data_B","int":data_B}
temp3 = {"name":"y/n","int":data_C}
data = [temp1,temp2,temp3]
return render(request,"apartment/index.html",{"data":data})
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>数据输入：</h1>
<form action="/index/" method="post">
{% csrf_token %}
<P ><input type="text" name="data_A" />请输入数据A </P>
<p><input type="text" name="data_B" />请输入数据B</p>
<!-- <input type="submit" value="提交" /> -->
<input type="radio" name="data_C" value="yes" /> yes<br />
<input type="radio" name="data_C" value="no" /> no<br />
<input type="submit" value="提交" />
</form>
</form>
<h1>数据展示：</h1>
<table border="1">
<thead>
<th>数据名</th>
<th>数据值</th>
</thead>
<tbody>
{% for line in data %}
<tr>
<td>{{ line.name }}</td>
<td>{{ line.int }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
接下来我们就得到了一个涵盖填空数据和选择题的交互雏形了：
item-ex.png
先到这里，下一章我们将吧所有需要计算的房贷数据都安排好，看看怎么样才能让产品做到简洁易用。
作者注：我在完成第六章（就是下一章）的时候，遇到了自己的一个设计缺陷：用户的数据因为不进入数据库，那么用户在前端提交数据的时候，必须一口气将所有参数提交，而这在操作上是很痛苦的。用户会遇到数不清的意外，例如刷新页面、误关闭等等，我得承认我之前想简单了。
经过和@小飞侠 的讨论，我们认为应该为每一个用户提供一个数据提交入口，因此我还要返回去学习用户登录的有关知识。
网友评论