django前端模板（django前端模板用途）

qiaoqingyi 2023-01-24 539

默认

本篇文章给大家谈谈django前端模板，以及django前端模板用途对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、django选择什么框架做前端UI比较好
2、求助django 实现前端页面检索功能的代码
3、[Django] 如何在Django中使用前端工具链
4、js中如何对django模板中的变量进行赋值
5、Django - 如何集成Metronic模板
6、django框架中html页面怎么排版？

django选择什么框架做前端UI比较好

1、flex

Apache基金会今天发布了Flex 4.8版本，这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。

需要注意的是，Flex目前还在孵化阶段，还不是Apache的正式项目，Flex 4.8也不是一个正式的Apache版本。

Apache称，该版本标志着Flex新时代的开始，Flex的未来将由社区来驱动，而不是由一个公司驱动。开发者可以通过贡献代码，来帮助改进Flex，如修复bug、增加功能等。

从Macromedia卖给Adobe，然后又捐给apache，不知道搞什么名堂。不过还好没有经过大幅重构，否则就真的是悲哀了！

2、extjs

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。

功能丰富，无人能出其右。

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

华丽的界面，灵活的功能，还有开发工具都是配套的，但有个最大的问题，用就得花钱！

3、easyui

easyui帮助你构建你的web应用更加容易。

它是一个基于jquery的插件，开发出来的一套轻量级的ui框架，非常小巧而且功能丰富。

官方网站是：

但是她有一个最大的问题就是代码只能找到以前的开源的版本，到了1.2以后的版本源代码都是经过混淆的，如果遇到问题修改起来会非常麻烦！不过一个比较大的优势是开源免费，并且界面做的还说的过去！

4、MiniUI

又一个基于jquery的框架，开发的界面功能都很丰富。

jQuery MiniUI - 快速开发WebUI。

它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。

使用MiniUI，开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。

界面做的挺不错，功能也挺丰富，但是有两个比较大的问题，一个是收费，一个是没有源码，说白了，不开源！基于这个开发如果想对功能做扩展就需要找他们的团队进行升级！

5、jQuery UI

jQuery UI 是一套 jQuery 的页面 UI 插件，包含很多种常用的页面空间，例如 Tabs（如本站首页右上角部分）、拉帘效果（本站首页左上角）、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

功能非常全面，界面也挺漂亮的，可以整体使用，也可以分开使用其中的几个模块，免费开源！

6、DWZ

DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

设计目标是简单实用,快速开发,降低ajax开发成本。

欢迎大家提出建议，我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平。

毕竟是国产的，支持一下，而且源码完全公开，可以选择一下！不过性能怎么样不敢确定！

7、GWT

Google 网页工具包——GWT 提供了一组基于Java语言的开发包，这个开发包的设计参考Java AWT包设计，类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包，将更多地时间投入到GWT应用的开发过程中。

你不用去了解这样那样的javascript框架，通过java你就可以写出功能丰富的界面，可以做单元测试，毕竟是google的产品，严重支持一下！

8、YUI

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证，基本上没怎么研究过！

YUI Compressor倒是挺出名的，这套UI库不知道应用的情况怎么样！

9、Sencha

Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。

大公司的框架，并且是几样库的强强联合，值得推荐！

10、Dojo

在国内应用好像不是很广，不过性能上应该没问题。

Dojo是一个用javascript语言实现的开源DHTML工具包。

有多个基金会的支持，包括IBM和SUN，都是软件界的泰斗，值得信赖！

11、ZK

ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架，用于丰富网页应用程式的使用接口。最大的好处是，在设计AJAX网络应用程式时，轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动（event-driven）、高互动性的引擎，同时还提供了多样丰富、可重复使用的XUL与HTML组件，以及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。

在线的demo

设计器的demo

日历组件

功能丰富，全面，文档齐全，而且升级了很多次，非常值得推荐！

12、OperaMasks-UI

OperaMasks-UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库，旨在提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端 JavaScript UI组件库。目前，该团队已将这一产品以LGPL 开源协议开放给社区。

文档丰富，功能齐全，而且很容易使用和开发！而且是国产的哟！

13、JavaFX

Sun公司(已于2009年被Oracle公司收购)在2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发富互联网应用程序(RIA)。JavaFX Script 编程语言（以下称为JavaFX）是Sun微系统公司开发的一种declarative, statically typed(声明性的、静态类型)脚本语言。JavaFX技术有着良好的前景，包括可以直接调用Java API的能力。因为 JavaFX Script是静态类型，它同样具有结构化代码、重用性和封装性，如包、类、继承和单独编译和发布单元，这些特性使得使用Java技术创建和管理大型程序变为可能。

求助django 实现前端页面检索功能的代码

设我们的 django 博客应用有如下的文章模型：

blog/models.pyclass Post(models.Model):

# 标题

title = models.CharField(max_length=70)

# 正文

body = models.TextField()

# 其他属性

def __str__(self):

return self.title

先看到第 1 步，用户在搜索框输入搜索关键词，因此我们要在博客上为用户提供一个搜索表单，html 表单代码大概像这样：

form method="get" action="/search/"

{% csrf_token %} input type="search" placeholder="搜索" required

button type="submit"搜索/button/form

特别注意在 form 标签下有一个 {% csrf_token %}，这是 django 用来防御跨站请求伪造（CSRF）攻击的机制。如果不知道什么是 CSRF 的话也没有关系，只要记住在使用 django 时，前端的表单代码里一定要加上 {% csrf_token %}。

用户输入了搜索关键词并点击了搜索按钮后，数据就被发送给了 django 后台服务器。表单的 action 属性的值为 /search/，表明用户提交的结果将被发送给 /search/ 这个 URL。我们为这个 URL 绑定一个 django 视图函数，在这个视图函数里完成前面第 2 步提到的过程。假设我们把视图函数的代码写在 blog/views.py 里：

blog/views.pydef search(request):

q = request.GET.get('q')

error_msg = ''

if not q:

error_msg = '请输入关键词'

return render(request, 'blog/errors.html', {'error_msg': error_msg})

post_list = Post.objects.filter(title__icontains=q)

return render(request, 'blog/results.html', {'error_msg': error_msg,

'post_list': post_list})

首先我们使用 request.GET.get('q') 获取到用户提交的搜索关键词。用户通过表单提交的数据 django 为我们保存在 request.GET 里，这是一个类似于 Python 字典的对象，所以我们使用 get 方法从字典里取出键 q 对应的值，即用户的搜索关键词。这里字典的键之所以叫 q 是因为我们的表单中搜索框 input 的 name 属性的值是 q，如果修改了 name 属性的值，那么这个键的名称也要相应修改。

接下来我们做了一个小小的校验，如果用户没有输入搜索关键词而提交了表单，我们就无需执行查询，而是渲染一个错误页面提示用户请输入关键词。

如果用户输入了搜索关键词，我们就通过 filter 方法从数据库里过滤出符合条件的所有文章。这里的过滤条件是 title__icontains=q，即 title 中包含（contains）关键字 q，前缀 i 表示不区分大小写。这里 icontains 是查询表达式（Field lookups），其用法是在模型需要筛选的属性后面跟上两个下划线。django 内置了很多查询表达式，建议过一遍 django 官方留个印象，了解每个表达式的作用，以后碰到相关的需求就可以快速定位到文档查询其用途：Field lookups

接下来就是渲染搜索结果页面，显示符合搜索条件的文章列表，下面是一个模板的简单示例：

results.html

{% if error_msg %} p{{ error_msg }}/p{% endif %}

{% for post in post_list %} div

在这里显示文章的相应信息 /div{% empty %} div class="no-post"

没有搜索到符合条件的文章 /div{% endfor %}

有了视图函数后记得把视图函数映射到相应了 URL，前面我们表单数据提交的 URL 为 /search/，因此将视图函数 search 绑定到该 URL 上。

blog/urls.pyurlpatterns = [

# 其他 url 配置

url(r'^search/$', views.search, name='search'),]

大功告成！

[Django] 如何在Django中使用前端工具链

Django最大的不足在于其落后的前端工具链。现在前端开发几乎必备的包管理器（例如npm,yarn）以及工程化必备的webpack工具链，Django却不支持。Django开发的工作流中，后端的包管理可以用pip，而前端的包只能手动管理。所以，我最近的工程项目中，已不再使用Django提供的前端模块，仅仅把它当作API服务器。这的确很遗憾，因为Django的template引擎也有一些易用的特性，如此抛弃，真的有点不舍。那么有没有可能结合二者的优点呢？

经过一番探索，网上给出最靠谱的答案就是利用 django-webpack-loader 和 webpack-bundle-tracker 这两个插件。其原理是 webpack-bundle-tracker 能够输出webpack的编译过程以及结果。 django-webpack-loader 插件则是Django和webpack之间的桥梁，利用上面的编译结果，自动加载webpack打包后的静态文件。

需要用webpack生成的静态文件时，就在template上面使用下面一段模板语言，能够自动完成静态文件的注入。

简单的试了试，应该能够达到我想要的效果，明天有时间再研究。