首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

Django实现将views.py中的数据传递到前端html页面,并展示

Posted in Python onMarch 16, 2020

自学Django已经有一周啦，想把自己自学过程中的每一步都记录下来，给一些零基自学Django的战友们一些参考；本次主要内容为，用一个实例展现views.py中的数据是如何传递到html页面，并在页面中展示。

我的项目已经创建好，我的app为song03apptest。因为我的项目和环境的相关配置已经配置好，如果是第一天开始学习Django的童鞋，请先看我的入门教程，第一个Django实例。

本文重点在于用实例来说明views和html前台页面的传递。

1.打开我的app，song03apptest下的views.py编写views.py文件，代码如下：

from django.shortcuts import render
 
# Create your views here.
def year(request):
  years = range(1997, 2018)
  return render(request, 'year_test.html', {"data":years})

2.配置urls.py，其中song03apptest为我的app名称代码如下：

from django.urls import path
from song03apptest import views
 
urlpatterns = [
  path('testyear/', views.year),
]

3.在templates下创建year_test.html，编写页面，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<label for="byear">出生年月</label>
<select name="byear">
  {% for year111 in data %}
  <option value="{{ year111}}">{{ year111 }}</option>
  {% endfor %}
</select>
 
</body>
</html>

4.运行服务器，并在浏览器中输入http://127.0.0.1:8000/app03/testyear/，页面展示如下：

Django实现将views.py中的数据传递到前端html页面,并展示

点击后可见在views.py中使用years = range(1997, 2018)生成的列表，页面效果如下：

Django实现将views.py中的数据传递到前端html页面,并展示

补充知识：Django views.py 和 html 之间参数传递关系

Django中的View部分，就是如何用代码来与models中定义的字段进行交互。与传统MVC分层定义略有不同的是，在Django中，View的功能是对页面请求进行响应和逻辑控制，而页面内容的表示则由Django的Template模板来完成。我们可以把Django的View理解为实现各种功能的Python函数，View负责接受URL配置文件urls.py中定义的URL转发并响应处理，当Django收到请求之后调用相应的View函数来完成功能，article模块中的views.py文件代码定义如下：

views.py代码定义

from django.shortcuts import render_to_response  
from news.article.models import List  
 
def news_report(request):  
 article_listing = []  
 for article_list in List.objects.all():  
  article_dict = {}  
  article_dict['news_object'] = article_list  
  article_dict['item_count'] = article_list.item_set.count()  
  article_dict['items_title'] = article_list.title 
  article_dict['items_complete'] = article_list.item_set.filter(completed=True).count()  
  article_dict['percent_complete'] = 
    int(float(article_dict['items_complete']) / article_dict['item_count'] * 100)  
  article_listing.append(article_dict)  
 return render_to_response('news_report.html', { 'article_listing': article_listing })

这是一段简洁的Python代码，让我们看看在这段代码里面Django的函数做了哪些工作吧：

List.objects.all方法返回news列表中所有的记录项，Django可以根据后台数据库转换成相应的SQL语句，在后台数据库中执行并返回查询结果。

每一条article文章都有item_set属性，代表news新闻条目中的每一个item项。如果需要设置查询条件，也可以使用item_set.filter方法来返回符合特定要求的item项。

render_to_response函数返回浏览器指定的HTML页面，页面为Django的Template模板，负责展示被请求的页面内容。

在view部分的代码中，已经指定了页面显示模板为news_report.html。其实，在Django工程中创建模板是一件非常方便的事情，下面要在article目录内创建这个模板页面，首先新建一个名为templates的文件夹，然后在这个模板目录里创建所需的news_report.html模板文件，模板的代码如下：

news_report模板代码

< html>  
 < head>  
  < meta http-equiv="Content-Type" content="text/html" />  
  < title>新闻统计列表< /title>  
 < /head>  
 < body>  
  < h1>新闻统计列表< /h1>  
{% for list_dict in article_listing %}  
  < ul>  
   < li>新闻的分类: {{ list_dict.items_title }}< /li>  
   < li>新闻的数目: {{ list_dict.item_count }}< /li>  
   < li>已发布的新闻数目:  
      {{ list_dict.items_complete }} ({{ list_dict.percent_complete }}%)< /li>  
  < /ul>  
{% endfor %}  
 < /body>  
< /html>

一般来说，Django的模板代码和普通的HTML代码看上去没有太大差别，只是添加了Django特定的模板标记，这些标记允许开发者为Django模板添加页面逻辑，比方说将views.py中render_to_response函数返回的数据库结果集显示在页面中，Django特有的标签在模板页里以“{%”作为开始并以“%}”作为结束。嵌入Django模板的变量则以“{{”作为开始并以“}}”结束。

在上面的模板代码里面，用到了标记{% for news_dict in article_listing %}以及{% endfor %}。这样的标记告诉Django模板处理机制循环取出news中的item项输出在页面中，在for循环内部，通过article_listing的属性得到View中对应的数据项字段的值并显示每个news项的Title标题以及news中的item项数目。

当Django的View和Template都已经准备妥当，下面仅需要几步配置来告诉Django存储工程应用的模板位置，这需要对配置文件setting.py中的TEMPLATE_DIRS项进行设置。在本例中加入模板文件"news_report.html"的存储路径就可以让Django把对View进行处理的结果集通过指定模板返回。按照本例应用的结构，TEMPLATE_DIRS参数的内容设置为：

'./article/templates',

这里不要忘记Django需要在路径的最末尾添加一个逗号。接下来仅需要设置访问article时的URL转向地址就可以。打开urls.py文件，在admin后台管理的转向地址下一行添加如下语句：

(r'^report/$', 'news.article.views.news_report'),

在这里语段的最末尾，也需要有逗号标记段落的结束。在这里可以看到，Django的URL转发设计的非常简洁，在配置文件urls.py中对应于view的转发请求都由两部分组成，第一部分遵循正则表达式指定相匹配的URL地址，第二部分是对应在View里面处理转发请求的函数。

完成了这些步骤，就可以在命令提示符下再次启动Django服务器，看一下上述努力的成果了，在浏览器中打开链接http://127.0.0.1:8000/report/，将会看到新闻列表的返回界面。页面中显示了数据库中已添加所有新闻的分类统计信息。值得一提的是，Django模板支持多层嵌套，并且每一层都可以使用DIV+CSS方式完成布局，可以方便的让站点页面遵循统一风格，看起来美观大方。

在上述整个过程中，对使用Django进行Web开发进行了初步的介绍。在应用中写的Python代码不过几十行，比较起来其他的开发语言，Django显得非常便捷实用，最后再来回顾一下Django都帮助我们做了哪些工作吧：

通过Django的对象关系映射模型建立了存储新闻分类以及新闻项的两张数据表，并用syncdb命令同步更新到数据库。

借助Django的管理功能在应用中生成了一个漂亮实用的后台管理界面。

利用Django函数和标签编写了view功能模块以及显示数据结果的Template模板。

以上这篇Django实现将views.py中的数据传递到前端html页面,并展示就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

Django实现将views.py中的数据传递到前端html页面,并展示

- Author -

songlh1234

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python网络编程学习笔记(三)：socket网络服务器
Jun 09 Python
python数据结构之图深度优先和广度优先实例详解
Jul 08 Python
Python打印“菱形”星号代码方法
Feb 05 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
Jun 13 Python
python实现NB-IoT模块远程控制
Jun 20 Python
Django如何开发简单的查询接口详解
May 17 Python
Python API自动化框架总结
Nov 12 Python
零基础小白多久能学会python
Jun 22 Python
在pycharm中文件取消用 pytest模式打开的操作
Sep 01 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
Nov 13 Python
如何向scrapy中的spider传递参数的几种方法
Nov 18 Python
Flask搭建一个API服务器的步骤
May 28 Python
Python Django view 两种return的实现方式
Mar 16 #Python
Python 统计位数为偶数的数字代码详解
Mar 15 #Python
使用pygame编写Flappy bird小游戏
Mar 14 #Python
Python3.x+pyqtgraph实现数据可视化教程
Mar 14 #Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
Mar 14 #Python
Python实现鼠标自动在屏幕上随机移动功能
Mar 14 #Python
Python 读取WAV音频文件 画频谱的实例
Mar 14 #Python
turtle(1) 计时器(1) Keras(3) 信号库(1) 绘图(1) 定时任务(2) MYSQL函数(1) blinker(1) 三子棋(2) Mysql报错(1)
You might like
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python 闭包的使用方法
2017/09/07 Python
pandas数值计算与排序方法
2018/04/12 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
个人自我鉴定总结
2014/03/25 职场文书
保密协议书范本
2014/04/22 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2014年工程部工作总结
2014/11/25 职场文书
写给领导的感谢信
2015/01/22 职场文书
优秀员工自荐书
2015/03/06 职场文书
项目合作意向书
2015/05/08 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
Python基础详解之邮件处理
2021/04/28 Python