用户投稿全部文章:
django入门(一) — 介绍与设定开发环境
django入门(二) — 建立资料库与专案
django入门(三) — 简单範例(1)-建立app
django入门(四) — 简单範例(2)-範本与範本继承
django入门(五) — 简单範例(3)-静态档
django入门(六) — 资料模型与填充程式
django入门(七) — Django ORM操作
範本(Template)
範本是放HTML档案的资料夹，Template engine(範本引擎)会把views传来的变数插入到我们在範本内所写的範本变数。
我们延续上一篇教学，将回传字样改成使用範本呈现。
修改main/views.py
from django.shortcuts import renderfrom django.http import HttpResponse <-这行删除def main(request): ''' Render the main page ''' context = {'hello':'Hello world! 这是首页~'} return render(request, 'main/main.html', context)main app目录下建立 templates 与 templates/main 目录
main/templates/main下建立範本main.html
main/templates/main/main.html 贴上下面html
<!doctype html><html><head><title>简单範例</title><meta charset="utf-8"></head><body><h2>{{ hello }}</h2></body></html>完成后可以重新启动伺服器，到浏览器查看成果。
範本继承
範本继承可以让我们更好得管理範本，当有多个範本有相同重複的部分，我们可以将它们放到同一个範本，并定义一些区块标籤，让继承这个範本的範本可以自己设定区块标籤内的内容，如此的话，我们未来如果需要更动只要修改一个範本就好了。
首先我们建立一个基础範本:
main/templates/main/base.html，并将下方code贴上。
<!doctype html>{% load static %}<html><head><title>简单範例</title><meta charset="utf-8"><link rel="stylesheet" href="{% static 'main/css/main.css' %}">{% block css %}{% endblock %}</head><body>{% include 'main/menu.html' %}<!-- --><div class="p_header" align="center"><div class="title"><h2>简单範例 -- {% block heading %}{% endblock %}</h2></div></div><div class="wrapper" align="center"><div class="content" >{% block content %}{% endblock %}</div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>{% block script %}{% endblock %}</body></html>main/templates/main/main.html的内容用下面的code盖掉
{% extends 'main/base.html' %}{% block heading %}首页{% endblock %}{% block content %}<h2>{{ hello }}</h2>{% endblock %}範本汇入其它範本
我们在首页加入一个目录的功能。
首先，建立menu.html
main/templates/main/menu.html，将下方code贴上。
<ul id="menu"> <li><a href="{% url 'main:main' %}">首页</a></li></ul>main/templates/main/base.html
...<body>{% include 'main/menu.html' %} <-加入这行<h2>简单範例 -- {% block heading %}{% endblock %}</h2>{% block content %}{% endblock %}</body>...到这里我们可以知道範本继承达成了「高内聚，低耦合」的目的，便于开发人员日后维护。
建立第二个APP-stock
接着继续往下，在专案下再建立一个app，名称为stock。(记得要去demo/settings新增APP)
如果忘记怎么建立可以参考前面的教学文章。
首先我们建立一个範本:
main/templates/stock/stock.html，并将下方code贴上。
{% extends 'main/base.html' %}{% block heading %}股票{% endblock %}{% block content %}<h2>{{ stock }}</h2>{% endblock %}撰写views
stock/views.py
from django.shortcuts import renderdef stock(request): context = {'stock':'stock page'} return render(request, 'stock/stock.html', context)新增一个urls.py在stock app下面，并设定路径。
stock/urls.py
from django.urls import pathfrom stock import viewsapp_name = 'stock'urlpatterns = [ path('', views.stock, name='stock'),]还有demo/urls.py也要设定路径哦
...urlpatterns = [ path('admin/', admin.site.urls), path('main/', include('main.urls', namespace='main')), path('stock/', include('stock.urls', namespace='stock')), <-加入这行 re_path('.*', views.main),]测试
到这里可以启动伺服器了，可以看到页面上有首页与股票的分页连结，且可以点击进入页面。
微信扫一扫打赏
支付宝扫一扫打赏
