橡皮擦，一个逗趣的互联网高级网虫。新的系列，让我们一起进入 Django 世界。
七、出现吧，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 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"> <h1>Hello, world!</h1> <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 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 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 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 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 adminfrom 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 pathfrom . 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 官方网站，提前下载源码素材，下载地址：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
创建静态文件目录与文件将下载好的文件拷贝到 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 adminfrom django.urls import path, includefrom 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 相关知识，喜欢就点个赞吧。
博主 ID：梦想橡皮擦，希望大家<font color="red">点赞</font>、<font color="red">评论</font>、<font color="red">收藏</font>。
评论