出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做-有解無憂

橡皮擦，一個逗趣的互聯網高級網蟲，新的系列，讓我們一起進入 Django 世界，

已經完成的文章

滾雪球學 Python 第三輪，Python Web 之 Django 的世界
小手哆嗦一下，就能用 Python Django 實作一個微型博客系統
Django 做個小后臺，細節在完善一點點，滾雪球學 Python 第三階段
Django QuerySet 就學那么一點點，一點點就夠了
看完這篇博客，Python Django 你就學會一半了
讓我們一起開發【菜譜系統】吧，滾雪球學 Python 第三輪專案計劃

滾雪球學 Python 第三輪

- 已經完成的文章
- 七、出現吧，Python Web 菜譜系統的首頁
- 7.1 菜譜系統首頁初始化
- 7.2 菜譜系統靜態檔案遷移
- 7.3 Django 模板語言
- - 7.3.1 拆分模板
- 7.4 本篇博客小節

七、出現吧，Python Web 菜譜系統的首頁

7.1 菜譜系統首頁初始化

滾雪球第三輪核心學習的是 Python Web 相關知識點，那不可避免的會涉及到前端技術堆疊，如果你對 HTML，CSS 完全零基礎，學習來可能比較吃力，建議可以先補充一些前端知識，便于后續學習，你也可以先直接進入 Django 學習階段，問題不大，

本篇博客開始構建菜譜系統的前端頁面，基本涉及的知識就是網頁模板框架與前端，優先會從用戶可鑒權系統開始撰寫，上篇博客的模型相關內容，先放一下，不久就要繼續使用，

下面開始撰寫首頁部分前端代碼，我們選擇的是 BootStrap3 框架，這個框架接受起來比較容易一些，

在 Django 中實作一個頁面，需要兩個步驟，第一步，創建模板 HTML 檔案，第二步，修改 views.py 檔案，完成視圖處理函式，

創建目錄和檔案

在 menuapp 應用目錄下創建 templates 檔案夾，然后該目錄下繼續創建一個 menuapp 的子目錄，有點繞，看圖，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做

接下來在 templates/menuapp 目錄中新建一個 index.html 的檔案，該頁面就是首頁的模板檔案，以下為代碼部分，涉及了前端相關知識點，
肯定有人問，難道代碼都是自己敲出來的嗎？這肯定不是，如果這樣，沒有前端知識，咱就學不下去了，這些內容是修改出來的，
打開 Bootstrap3 模板頁，在里面選擇一個模板，例如下面的內容，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做

在打開的頁面中，點擊滑鼠右鍵選擇查看原始碼，在原始碼頁面復制你要的內容，去掉里面相對路徑相關部分代碼，例如下述內容，

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

這種 ../../ 的都要去除，就得到了最終的原始碼部分，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做

<!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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a
            >
          </p>
        </div>
      </div>

      <hr />

      <footer>
        <p>&copy; 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 檔案，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做
修改代碼如下：

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"))，代碼位置如下圖所示，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做
檔案中的代碼如下：

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 運行我們的應用了，但是又出現問題了，即下述錯誤，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做
該錯誤表示模板檔案沒有加載到，有兩個原因，第一個是模板檔案的位置，注意是在 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'
]

此時在運行代碼，如果成功出現如下界面，表示模板檔案正式加載完畢，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做

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 目錄，最終的結果如下圖所示，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做
接下來就是如何在 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 目錄下創建一個新檔案，

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做
其中 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")

此時運行效果如下：

出現吧，Python Web 菜譜系統的首頁，不會前端技術，也能做

7.4 本篇博客小節

本篇博客主要介紹的是 Django 中的最簡單首頁制作，盡量在無前端知識鋪墊的情況下，幫助你學習 Python Web 相關知識，喜歡就點個贊吧，

相關閱讀

Python 爬蟲 100 例教程，超棒的爬蟲教程，立即訂閱吧
Python 游戲世界（更新中，目標文章數 50+，現在訂閱，都是老粉）
Python 爬蟲小課，精彩 9 講

今天是持續寫作的第 124 / 200 天，
如果你想跟博主建立親密關系，可以關注同名公眾號夢想橡皮擦，近距離接觸一個逗趣的互聯網高級網蟲，
博主 ID：夢想橡皮擦，希望大家點贊、評論、收藏，

django微信小程式商城 Django 教程 2020年php涼透了 django和spring比較 django開源專案為什么大公司很少用vue python的django框架 django怎么安裝 django企業開發實戰pdf

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272002.html

標籤：其他

上一篇：vue怎么封裝和呼叫公共方法

下一篇：jQuery實作留言板功能