欢迎访问的小伙伴! 希望在这里能帮到你。有问题请多多指教~ 点击联系站长

Django中使用模板语言达到代码复用

Django 焦康阳 0评论

看到这篇文章的朋友相信都在使用django这个框架,它是python中非常流行的一个大型web框架。既然它可以开发大型项目,那么其中牵扯到很多的前端代码复用。

特别是一个html网页中的头部公共部分和底部,基本上大多数的网站设计都是复用它的,那么django中我们也可以进行代码复用

最近也准备重温之前学过的django框架,第一步肯定就是做前端页面了,问题来了,就是大量的代码是重复的,所以我们第一件事就是解决这个问题。重新复习了一下知识,发现django中自带模板语言

block、extends的使用

当我们设计一个网页模板时候,如果所有的网页都公用一个头部和尾部的时候我们就可以使用。先用block设计好母版,然后在子版中继承母版。好了下面以代码为例。

首先随便创建一个html空白页,然后定义好block的名称,我们将母版命名为comm_bootstrap.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="{% static 'jquery/jquery-3.1.1.min.js' %}"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="{% static 'js/myajax.js' %}"></script>
			<title>
				{% block titleblock %}{% endblock titleblock %}
			</title>
		{% block headblock %}{% endblock headblock %}
    </head>
    <body>
    	{% block bodyblock %}{% endblock bodyblock %}
    </body>
</html>

在上述代码中,我们定义了title、head、和body三个,在后面的子版中我就可以继承母版。对了,django中为了确保正常运行,最上面要加载静态文件哦,加上{% load static %}

{% extends "comm_bootstrap.html" %}
{% load static %}

{% block headblock %}
	<link rel="stylesheet" href='{% static "css/front_resetpwd.css" %}'>
{% endblock headblock %}


{% block bodyblock %}
	<h1>重置密码</h1>
	<div class="container">
		<form action="" method="POST">
			<div class="form-group">
				<input type="password" class="form-control" placeholder="新密码" name="password">
			</div>
			<div class="form-group">
				<input type="password" class="form-control" placeholder='确认密码' name="password_repeat">
			</div>
			<div class="form-group">
				<button class="btn btn-primary btn-block">提交</button>
			</div>
		</form>
	</div>
{% endblock bodyblock %}

在上面子版的代码中,我们使用extends来继承母版,然后只需在母版的对应block中我们填充对应的内容,就能达到代码复用的效果。

include导入

看见include我就很熟悉,为什么呢?因为它正是C语言中每个代码中第一个要写的,哈哈。我在几年前也是学过简单的C语言的,不过因为各种原因放弃学它了。

回归正题,include是导入公共模块的。其实它和extends也是比较像的,区别就在于include是导入,而不是继承。我的理解就是,导入公共的代码块,因为有的代码我们不需要全部复用,有可能只需要调用几次,那么就可以单独放到一个html中,然后用的时候直接调用

调用方法: 在当前的html中的某个你需要引入公共模板的地方使用{% include ‘公共模板的相对路径’ %}引入

<div id="content">
    {% include 'api/front.html' %}
</div>

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址