共计 7909 个字符，预计需要花费 20 分钟才能阅读完成。
七、呈现吧，Python Web 菜谱零碎的首页
7.1 菜谱零碎首页初始化
滚雪球第三轮外围学习的是 Python Web 相干知识点，那不可避免的会波及到前端技术栈，如果你对 HTML，CSS 齐全零根底，学习来可能比拟吃力，倡议能够先补充一些前端常识，便于后续学习，你也能够先间接进入 Django 学习阶段，问题不大。
本篇博客开始构建菜谱零碎的前端页面，根本波及的常识就是网页模板框架与前端，优先会从用户可鉴权零碎开始编写，上篇博客的模型相干内容，先放一下，不久就要持续应用。
上面开始编写首页局部前端代码，咱们抉择的是 [BootStrap3 框架]，这个框架承受起来比拟容易一些。
在 Django 中实现一个页面，须要两个步骤，第一步，创立模板 HTML 文件，第二步，批改 views.py 文件，实现视图处理函数。
创立目录和文件
在 menuapp 利用目录下创立 templates 文件夹，而后该目录下持续创立一个 menuapp 的子目录，有点绕，看图。
接下来在 templates/menuapp 目录中新建一个 index.html 的文件，该页面就是首页的模板文件，以下为代码局部，波及了前端相干知识点。
必定有人问，难道代码都是本人敲进去的吗？这必定不是，如果这样，没有前端常识，咱就学不上来了，这些内容是批改进去的。
关上 [Bootstrap3 模板页]，在外面抉择一个模板，例如上面的内容。
在关上的页面中，点击鼠标右键抉择查看源码，在源码页面复制你要的内容，去掉外面相对路径相干局部代码，例如下述内容。
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
这种 ../../ 的都要去除，就失去了最终的源码局部。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 上述 3 个 meta 标签 * 必须 * 放在最后面，任何其余内容都 * 必须 * 追随其后！-->
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="../../favicon.ico" />
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false"
aria-controls="navbar"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="nofollow" class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" />
</div>
<div class="form-group">
<input
type="password"
placeholder="Password"
class="form-control"
/>
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
Hello, world!
<p>
This is a template for a simple marketing or informational website. It
includes a large callout called a jumbotron and three supporting
pieces of content. Use it as a starting point to create something more
unique.
</p>
<p>
<a rel="nofollow" class="btn btn-primary btn-lg" href="#" role="button"
>Learn more »</a
>
</p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a rel="nofollow" class="btn btn-default" href="#" role="button"
>View details »</a
>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a rel="nofollow" class="btn btn-default" href="#" role="button"
>View details »</a
>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Vestibulum id ligula porta felis euismod semper.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus.
</p>
<p>
<a rel="nofollow" class="btn btn-default" href="#" role="button"
>View details »</a
>
</p>
</div>
</div>
<hr />
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
模板文件编写结束之后，就能够尝试运行 Django 网站，实现咱们最终的指标了。
运行前，还须要做一些筹备工作，第一个就是批改默认首页。
编辑下图 urls.py 文件。
批改代码如下：
from django.contrib import admin
from django.urls import path, include
urlpatterns = [path('admin/', admin.site.urls),
# 将 menuapp 利用的 URL 设置蕴含到我的项目的 URL 设置中
path("", include("menuapp.urls"))
]
Django 个别倡议为每个不同的 APP 利用独自设计 URL 文件，所以还须要在 menuapp 文件中，新增一个 urls.py 文件，也就是上述代码援用的局部 path("", include("menuapp.urls"))，代码地位如下图所示。
文件中的代码如下：
from django.urls import path
from . import views
urlpatterns = [path("", views.index, name="defalut"),
]
当拜访默认门路的时候，即 http://127.0.0.1:8000/，会调用 views 模块中的 index 办法，所以还须要批改 views.py 文件，代码如下：
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, "menuapp/index.html")
到这里，才发现模板文件被正式加载了。
接下来就能够应用 python manage.py runserver 运行咱们的利用了，然而又呈现问题了，即下述谬误。
该谬误示意模板文件没有加载到，有两个起因，第一个是模板文件的地位，留神是在 menuapp 利用目录下，如果还不确定，请返回上文查找图示，第二种起因是，咱们还没有在 settings.py 中把 menuapp 退出到 settings.INSTALLED_APPS 外面去，导入无奈加载利用，批改 settings.py 文件，代码如下：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'menuapp'
]
此时在运行代码，如果胜利呈现如下界面，示意模板文件正式加载结束。
7.2 菜谱零碎动态文件迁徙
在上文代码的 index.html 文件中，应用了如下内容，这些内容都是调用的 CDN 减速网址的链接（全面学过前端之后，能够在补充这部分常识），这些地址的齐全决定权，不在咱们手中，所以接下来须要将下述内容批改为菜谱我的项目动态文件中。
<link
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关上 Bootstrap 3 官方网站，提前下载源码素材，
创立动态文件目录与文件
将下载好的文件拷贝到 static 目录，最终的后果如下图所示。
接下来就是如何在 Django 模板文件中去利用动态文件相干知识点了。
第一步：在须要应用动态文件的模板页首行插入 {% load static %} 语句。
第二步：在后续应用动态文件的中央应用 static 标签加上门路即可，例如应用 bootstrap.min.js 文件，语句为 {% static 'js/bootstrap.min.js' %}
第三步：上述门路会因为 settings.py 中设置的 STATIC_URL 值加上门路值，成为最终的地址，例如 static/js/bootstrap.min.js
第四步：在 urls.py 中减少动态文件解决代码
上述步骤波及的代码文件批改内容如下：
index.html 批改欠缺
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title> 菜谱零碎 ---- 首页 </title>
<link href="{% static'css/bootstrap.min.css'%}" rel="stylesheet">
</head>
<body>
<!-- 其余部分与上文统一 -->
</div> <!-- /container -->
<script src="{% static'js/bootstrap.min.js'%}"></script>
</body>
</html>
urls.py 文件批改如下，留神该文件是我的项目目录的，不是 menuapp 利用目录
from django.contrib import admin
from django.urls import path, include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [path('admin/', admin.site.urls),
# 将 menuapp 利用的 URL 设置蕴含到我的项目的 URL 设置中
path("", include("menuapp.urls"))
]
urlpatterns += staticfiles_urlpatterns()
从新应用 python manage.py runserver 运行程序，浏览页面看到数据失常即可。
7.3 Django 模板语言
在上文应用的 {% 语句局部 %} 就是 Django 中的模板语言，模板与一般的文本文件有两个不一样的中央，模板蕴含变量，该变量在页面渲染网页的时候，会被替换为相应的值，模板中还包含逻辑解决代码，这部分常识叫做标签。
变量在模板中应用双花括号示意 {{变量名}}，这里变量相干常识还波及筛选器内容，后文都会有所波及。
模板中的标签应用 {% %} 进行示意，标签中能够蕴含业务逻辑代码，有时也会存在开始标签和完结标签。
例如实现 if 语句的标签，写法如下：
<ul>
{% if menu %}
<li>{{menu.name}}</li>
</ul>
{% endif %}
模板语言中应用 block 和 extends 两个标签实现继承，简略了解就是一堆公共模板。
父模板中应用 block 进行占位，子模板中应用 extends 进行继承。
7.3.1 拆分模板
接下来对模板进行拆分，将 index.html 文件中的头部提取进去。在 templates/menuapp 目录下创立一个新文件。
其中 frame.html 代码如下，只展现最外围局部，否则文章就太长了，留神 frame.html 为父模板，其中 {% block title %}{% endblock%} 为占位符，{% block content %}{% endblock %} 为占位符。
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock%}</title>
<link href="{% static'css/bootstrap.min.css'%}" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- 外面内容省略 -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<!-- 外面内容省略 -->
</div>
{% block content %}{% endblock %}
<script src="{% static'js/bootstrap.min.js'%}"></script>
</body>
</html>
index.html 文件代码如下：
{% extends "menuapp/frame.html" %} {% block title %} 菜谱零碎 ---- 首页 {%
endblock %} {% block content %}
<div class="container"> 代码内容 </div>
<!-- /container -->
{% endblock %}
views.py 文件源码仍旧未变，具体如下：
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, "menuapp/index.html")
此时运行成果如下：
7.4 本篇博客大节
本篇博客次要介绍的是 Django 中的最简略首页制作，尽量在无前端常识铺垫的状况下，帮忙你学习 Python Web 相干常识，喜爱就点个赞吧。
本文转自 https://www.jianshu.com/p/1c81e86252f4，如有侵权，请分割删除。
