Django前端获取后端数据之前端自定义函数
在写网站的时候遇到了一个问题:
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前端获取后端数据之前端自定义函数的更多相关文章
- 前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
- 前端获取的数据是undefined
var id = $("id1").val(); var username = $("username1").val(); var password = $(& ...
- vue获取后端数据放在created还是mounted方法里面?
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- Django学习手册 - 模板语言(前端获取后台数据)
先在views视图内,定义列表数据,以及字典数据.运用render函数传递两个列表数据至前端. from django.shortcuts import render list_info = [ {& ...
- vue 获取后端数据打印结果undefined问题
今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS ...
- 个人永久性免费-Excel催化剂功能第56波-获取Excel对象属性相关自定义函数
之前零散开发过一些自定义函数获取Excel对象属性,此次再细细地把有价值的属性都一一给开发完成,某些场景下,有这些小函数还是可以比较方便地实现一些通过Excel界面没法轻松获取到的信息. 修复与更新 ...
- jquary 单选,多选,select 获取和设置值 jquary自定义函数
<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="c" ...
- 用ajax获取后端数据,显示在前端,实现了基本计算器功能
下午在看视频的时候,遇到一个问题:如何把后端 print_r或echo的数据显示在前端.百度了一下,说是用ajax,想着前一阵子学习了ajax,并且最近也想做一个计算器,于是就自己钻起来了. 计算器的 ...
随机推荐
- SQL Server数据库(时间戳timestamp)类型 (转载)
timestamp介绍 公开数据库中自动生成的唯一二进制数字的数据类型. timestamp 通常用作给表行加版本戳的机制. 存储大小为 8 个字节. 不可为空的 timestamp 列在语义上等价于 ...
- CF809D Hitchhiking in the Baltic States LIS、平衡树
传送门 看到最长上升子序列肯定是DP 设\(f_i\)表示计算到当前,长度为\(i\)的最长上升子序列的最后一项的最小值,显然\(f_i\)是一个单调递增的序列. 转移:对于当前计算的元素\(x\), ...
- Luogu4899 IOI2018 Werewolf 主席树、Kruskal重构树
传送门 IOI强行交互可还行,我Luogu的代码要改很多才能交到UOJ去-- 发现问题是对边权做限制的连通块类问题,考虑\(Kruskal\)重构树进行解决. 对于图上的边\((u,v)(u<v ...
- POJ Remmarguts' Date
题目链接-> 题解: 次短路模板. 代码: #include<cstdio> #include<iostream> using namespace std; #defin ...
- C# 根据部分属性来判断俩个对象是否相同
根据部分属性来判断俩个对象是否相同 代码是第一版本 可能不牢固 有问题请反馈一下 3QU 效果图: public static class CustomExpand { public static b ...
- Quartz.Net分布式任务管理平台(续)
感谢@Taking园友得建议,我这边确实多做了一步上传,导致后面还需处理同步上传到其他服务器来支持分布式得操作.所有才有了上篇文章得完善. 首先看一下新的项目结构图: 这个图和上篇文章中 ...
- Linux下环境变量配置方法梳理(.bash_profile和.bashrc的区别)
在linux系统下,如果下载并安装了应用程序,在启动时很有可能在键入它的名称时出现"command not found"的提示内容.如果每次都到安装目标文件夹内,找到可执行文件来进 ...
- SQL中not in 和not exists
在SQL中倒是经常会用到子查询,而说到子查询,一般用的是in而不是exists,先不谈效率问题,就先说说会遇到哪些问题. 用到in当取反的时候,肯定先想到的就是not in.但是在使用not in的时 ...
- 个人阅读作业2—《No Silver Bullet: Essence and Accidents of Software Engineering》读后感
在进行了一次结对编程.一次团队编程和一次个人编程项目后,读了<No Silver Bullet: Essence and Accidents of Software Engineering> ...
- Peer Programming Project: 4 Elevators Scheduler 附加题 157 165
1.改进电梯调度的interface 设计, 让它更好地反映现实, 更能让学生练习算法, 更好地实现信息隐藏和信息共享. 每个电梯增加目标楼层数组,这样可以更好地进行任务的分配,在我们的电梯中,这个数 ...