Django学习之路(7)——开始与前端页面交互

2017/02/2222:15:29 发表评论


摘要:在这一节中我们将完成两个目标:

1) 通过读取mysql数据库中的数据传递给前端页面来显示。

2) 读取用户输入数据,并将用户数据展示在表格中。


1. 向前端页面传递内容


修改blog/view.py中的内容如下:


blob.png


修改templates/blog/index.html中的内容如下:


blob.png


重启下uwsgid restart,页面效果如下:


blob.png


说明正常传递值给页面显示了,接下来我们想要用户参数这个数据交互,写一个简单的表单用于数据提交。


3. 用户提交内容

blob.png


暂时没有添加action和点击时的js检验,此时界面如下图:


blob.png


点击提交后,出现如下结果:


blob.png


这是因为django框架已经给我们做好跨站攻击安全性检测了,这里我们为了测试方便,先把CSRF检测关闭:


blob.png


重启uwsgid restart,此时再提交就不会出现403页面了。


4. 提交用户输入内容并显示


此时我们把表单的action给加上:

<form method="post" action="/blog/register/">

此时我们需要改两个urls.py文件,一个是项目目录中的urls.py,一个是app目录中的urls.py,内容分别如下:

项目目录文件:/home/chin/PythonEnv/django_project/django_project/settings.py


blob.png


app目录中的urls.py文件:/home/chin/PythonEnv/django_project/blog/urls.py


blob.png


这里为了不把事情搞大,通过表单提交后的方法还是index页面,此时在index页面,即blog/view.py文件中需要添加如下内容:


blob.png


老规矩,重启uwsgid后再刷新页面,输入用户名密码分别为hello   world,效果如下图:


blob.png


此时发现表格中多了一行,至此,一个完整的表单展示用户数据就完成了。但有个问题,我们页面刷新后,数据还是原来了,为了将这个数据保存,我们需要将数据保存到数据库中,并在刷新页面时再显示出来,详情请见下文分解。

  • 微信扫码赞助
  • weinxin
  • 支付宝赞助
  • weinxin

发表评论

您必须才能发表评论!