在写网站的时候遇到了一个问题:

Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用

如果作为一个list传递到前端,结构相同情况下,遍历确实够用。但是使用dict时多数会使用单个key取value放到不同的地方使用,Django提供的方法就不够用了。

所以这篇文章介绍一下如何创建一个自定义函数供使用,此文中写了一个用key取到value值的函数

1、在某个app中创建一个新的templatetags 文件,templatetags 文件与url.py、views.py同级

  下图为名为west的app目录结构

要保证这个app已经写到了整个Django项目的INSTALLED_APPS中,在Django项目根路径下的settings.py文件中文件中查看此app是否已经加入整个项目,如果没有则添加上,代码如下
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'west', #此处就是这个app的名字
]

  

2、然后在此目录下新建两个py文件,__init__.py和一个自定义的py文件。如下图

  

  __init__.py文件是让Django框架知道这是一个Python package,里面不需要写代码,但是不能没有这个文件。因为第一步中已经确定了app已经添加到INSTALLED_APPS中,所以这个package也被项目纳入其中。

  dict_fun.py则是自己写的方法文件

  dict_fun.py文件如下,其中需要注意的地方已经注释

from django import template

register = template.Library() #以上两行代码是获取到Django模板所有tags和filter的library,以便我们写入一个新的方法

def dict_get(adict, key):   #自定义方法,adict是我们使用这个方法的调用者,key是dict_get方法的参数,如果不太懂,接着往下看
"""get the value using key from a dict"""
return dict(adict).get(key)
register.filter('dict_get', dict_get) #将此方法添加到模板中 

  

3、前端使用自定义方法

  首先在模板(一般是html)中添加一个标签,使刚才写的方法引入,注意此处的dict_fun对应的是在第一步中创建的dict_fun.py

{% load dict_fun %}

  {{ a }}在django框架中便是使用后端传递过来数据的写法。

  使用自己写的函数如下,可能一开始看起来并没有那么易懂。

{{ adict|dict_get:"pic" }}

  dict是后端传过来的数据,dict_get是在dict_fun.py中定义的函数,“pic”是dict_get方法的参数。一句话概括就是:adict使用函数dict_get(),参数为“pic”

  还记得dict_get()方法在定义的时候有两个参数吗?其实第一个参数是调用者,被写在了参数列表中

参考链接:https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#registering-custom-filters

Django前端获取后端数据之前端自定义函数的更多相关文章

  1. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  2. 前端获取的数据是undefined

    var id = $("id1").val(); var username = $("username1").val(); var password = $(& ...

  3. vue获取后端数据放在created还是mounted方法里面?

    问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...

  4. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  5. Django学习手册 - 模板语言(前端获取后台数据)

    先在views视图内,定义列表数据,以及字典数据.运用render函数传递两个列表数据至前端. from django.shortcuts import render list_info = [ {& ...

  6. vue 获取后端数据打印结果undefined问题

    今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS ...

  7. 个人永久性免费-Excel催化剂功能第56波-获取Excel对象属性相关自定义函数

    之前零散开发过一些自定义函数获取Excel对象属性,此次再细细地把有价值的属性都一一给开发完成,某些场景下,有这些小函数还是可以比较方便地实现一些通过Excel界面没法轻松获取到的信息. 修复与更新 ...

  8. jquary 单选,多选,select 获取和设置值 jquary自定义函数

    <%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="c" ...

  9. 用ajax获取后端数据,显示在前端,实现了基本计算器功能

    下午在看视频的时候,遇到一个问题:如何把后端 print_r或echo的数据显示在前端.百度了一下,说是用ajax,想着前一阵子学习了ajax,并且最近也想做一个计算器,于是就自己钻起来了. 计算器的 ...

随机推荐

  1. 8-51单片机ESP8266学习-AT指令(单片机采集温湿度数据通过8266发送给C#TCP客户端显示)

    http://www.cnblogs.com/yangfengwu/p/8785516.html 先写单片机端的程序 先把源码和资料链接放到这里 链接: https://pan.baidu.com/s ...

  2. BZOJ3676 APIO2014 回文串 Manacher、SA

    传送门 首先一个结论:串\(S\)中本质不同的回文串个数最多有\(|S|\)个 证明考虑以点\(i\)结尾的所有回文串,假设为\(S[l_1,i],S[l_2,i],...,S[l_k,i]\),其中 ...

  3. Ionic App 启动时报Application Error - The connection to the server was unsuccessful

    最近在更新App的时候,发现在华为手机上报这个错误,有点困惑,查找资料分析,大概原因是程序在加载index.html网页时,加载的资源过多,造成时间超时, 这个时原因分析https://stackov ...

  4. Linux-C-Program:makefile

    注:本文参照博客:https://blog.csdn.net/initphp/article/details/7692923 1. 概述2. 示例说明2.1 无makefile编译2.2 有makef ...

  5. centos6下ActiveMQ+Zookeeper消息中间件集群部署记录

    由于最近一个项目并发请求压力比较大,所以考虑改进架构,引入消息中间件集群作为一个缓冲消息队列,具体需求:1)将大量的WebService请求报文发送到mq集群之中,并保持消息先后顺序2)保证每个消息的 ...

  6. Docker inspect - format格式化输出 - 运维笔记

    Docker --format 参数提供了基于 Go模板 的日志格式化输出辅助功能,并提供了一些内置的增强函数. 什么是模板?上图是大家熟悉的 MVC 框架(Model View Controller ...

  7. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  8. PHP中报500错误时如何查看错误信息

    在执行代码中加入下面两行代码即可 ini_set("display_errors","On"); error_reporting(E_ALL);

  9. websocket(三)——基于node sockit.io的即时通讯

    通过前面的学习发现,常见的websocket虽然可以很好地实现服务端和客户端的信息传递,但二者之间传递的数据只是简单的字符串,这对事物的描述,信息的传递是非常不友好的,下面将引入socket.io,来 ...

  10. 研究C语言的新型编译环境TCC

    C语言综合研究1 搭建一个tcc环境 研究过程: 问题引出:为什么要使用tcc环境,甚至连图形界面都没有,为什么要使用这样的化境? 按照我们学习的本质来讲,可能是为了体验C语言底层的相关特性,但是在研 ...