商务合作加Q:411239339

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

浏览:202次阅读
没有评论

共计 832 个字符,预计需要花费 3 分钟才能阅读完成。


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

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

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


1.  向前端页面传递内容


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


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


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


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


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


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


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


3. 用户提交内容

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


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


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


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


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


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


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


重启 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


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


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


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


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


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


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


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


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

正文完
扫码赞助
post-qrcode
 0
果子
版权声明:本站原创文章,由 果子 于2017-02-22发表,共计832字。
转载说明:除特殊说明外本站文章皆由果较瘦原创发布,转载请注明出处。
评论(没有评论)