服務端編程（九）- Django - 創建網站的基本骨架創建你的主頁

文章目錄

前言 ´･ᴗ･`

本節帶你真正做出自己的主頁而不是停留在後臺管理
本篇內容將會幫助你學習…
- 1 定義設置url跳轉資源
- 2 構建整個網站的基本骨架
- 3 瞭解view.py url.py的使用
- 4 製作主頁

url參數

百度關鍵詞的時候我們看到我們的搜索詞跑到了地址欄

前面文章說過

這是動態網站可以以一個模板適應無數的請求（搜索詞變了模板不變只是搜索結果變了）
這是get方法
這是url屬性（url的參數部分）

有沒有感到好奇爲啥網站能夠做到這些？我們該怎麼做？

制定url規則

首先你得在url.py 制定你的url規則
百度制定的規則是：\wd = <string>
string部分就是任何搜索詞

意思服務器將響應這類www.baidu.com\wd=形式的url 當然是get方式
當然怎麼響應在django 就是view.py 乾的事了
baidu相應這類請求的結果就是你看到的一個個網站導航

於是我制定我的圖書館demo就是下面這些規則：

catalog/ — 主頁
catalog/books/ — 書單頁
catalog/authors/ — 作者頁
catalog/book/ — 主鍵字段 ID的具體書（默認） —詳細視圖。
如／catalog／book／3，第三本書。
catalog/author/ — 主鍵字段 ID的具體作者（默認） —詳細視圖。
如 /catalog/author/11，第11個作者。

真正訪問你就可以這麼寫：http://<你的域名>/catalog/
比如我的就是：http://47.112.174.246:3389/catalog/
這個是可用的你可以試試我弄了個服務器開着來調試玩着ヾ(≧▽≦*)o

接下來你還需要制定規則：服務器該怎麼響應
響應的函數在view.py 裏面
然後響應的內容在template 意思 html的模板

模板是什麼？百度你怎麼搜索模板都是一堆網址導航的樣式
我們也是這樣

總結起來

制定url規則 url.py
制定服務器響應規則 view.py
具體來說服務器幫你鏈接模板填上數據庫的數據（render函數）
然後返回給瀏覽器
製作html 模板

制定url規則

也可以說是創建 url 到訪問資源的一一映射
在catalog/url.py 中內容改成這樣：

#-*- utf-8 -*-
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    ]

對你猜的沒錯 urlpatterns 這個列表放着所有url映射
包含幾個參數：

’ ’ 利用正則表達式匹配的模式這裏爲空就說明 沒有任何參數 這就是主頁index的響應方式
view.index 我說過響應規則放view裏面了這是個view的函數專門用來負責響應 針對主頁的請求的
你沒猜錯待會兒我們還要編輯這個規則這個函數
name=‘index’ 這條url規則的名字 —— 爲啥要有名字？
我們後面 要通過名字引用的！
比如我們這裏是url ——> 資源如果有一次我們客戶想要獲取url怎麼辦？這時需要逆向（reverse）
就需要這個url映射名字

什麼時候需要獲取url？

我們html模板會這麼寫

<a href="{% url 'index' %}">Home</a>.

這句意思這個Home超鏈接到當前頁你看他直接用index這個url映射的名字
當然你可以牛掰的寫上：

<a href="/catalog/">Home</a>

這就是 硬編碼（hard code） 這樣寫死的後果就是假設你管理一個上個不同網頁的站點
你老闆說所有url映射不寫“catalog” 我要寫‘cxk’
這個時候你可能會通宵的修改上百個html模板
而且所有超鏈接你都這樣硬編碼或許你得通幾個宵然後哭暈在廁所(～￣▽￣)～

爲什麼我們操作catalog的url 而不是根目錄的url？

你可能會有疑問爲啥不在根目錄的url.py 寫這句？如果用戶並不訪問catalog這個應用直接訪問：
http://47.112.174.246:3389/
該怎麼辦？
事實上前面也說了會將所有請求重定向到catalog去的
你可以點開觀察地址欄的變化

意味着 catalog就是網站的主體了所有url都基於
http://47.112.174.246:3389/catalog/
原因很簡單我們這個網站很小是個單應用的網站因此一個應用承辦所有網站的請求

服務器如何響應——view.py

這裏難點關鍵是調用ORM 你要連接html模板你要鏈接數據庫（通過ORM數據模型）
在catalog\view.py 注意是catalog下面這個應用的view

from .models import Book, Author, BookInstance, Genre

def index(request):
    """
    View function for home page of site.
    """
    # Generate counts of some of the main objects
    num_books=Book.objects.all().count()
    num_instances=BookInstance.objects.all().count()
    # Available books (status = 'a')
    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
    num_authors=Author.objects.count()  # The 'all()' is implied by default.
    
    # Render the HTML template index.html with the data in the context variable
    return render(
        request,
        'index.html',
        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
    )

複製粘貼過去

其實就幹了兩件事

一個是設計了個可以統計數量的程序段比如書的數量作者數量等
二個是render 連接了名爲“index.html”的模板並且傳參 book author等數據庫的數據過去
效果就類似：

模板的製作

我們的render會自動尋找當前目錄下 template文件夾去找html模板
因此在catalog/template/新建 index.html:
我們這麼寫：

{% extends "base_generic.html" %}

{% block content %}
<h1>Local Library Home</h1>

  <p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>

<h2>Dynamic content</h2>

  <p>The library has the following record counts:</p>
  <ul>
    <li><strong>Books:</strong> {{ num_books }}</li>
    <li><strong>Copies:</strong> {{ num_instances }}</li>
    <li><strong>Copies available:</strong> {{ num_instances_available }}</li>
    <li><strong>Authors:</strong> {{ num_authors }}</li>
  </ul>

{% endblock %}

注意到 extends 沒有?
這個是基於什麼拓展的意思然後你發現 base_generic.html 我們都沒做

我們的思路就是所有網頁模板是基於base_generic 模板的因爲很多東西還是重複了比如<html><body>等標籤
於是我們再在創建 html模板的模板：）
/locallibrary/catalog/templates/base_generic.html

<!DOCTYPE html>
<html lang="en">
<head>
  
  {% block title %}<title>Local Library</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<body>

  <div class="container-fluid">

    <div class="row">
      <div class="col-sm-2">
      {% block sidebar %}
      <ul class="sidebar-nav">
          <li><a href="{% url 'index' %}">Home</a></li>
          <li><a href="">All books</a></li>
          <li><a href="">All authors</a></li>
      </ul>
     {% endblock %}
      </div>
      <div class="col-sm-10 ">
      {% block content %}{% endblock %}
      </div>
    </div>

  </div>
</body>
</html>

發現沒有？block content 也就是內容模塊我們是空的 why？
你再看看我們主頁的內容：

沒錯！所有catalog的html模板都是基於對content模塊的拓展
也就是 base_generic.html 就是網站的基本骨架——所有網頁都是大致這個樣式
其他html模板不過是對內容進行修改而已

可謂是html模板的模板

一般我們設計就是從 網頁骨架backbone 開始設計的

當然我們也可以修改其他模塊只要兩句

extends “base_generic.html”
｛{% block <你想修改的block名稱>%}｝

最後還需要添加一下css 顯得稍微好看點
/locallibrary/catalog/static/css/styles.css

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

render函數的運用

觀察下面兩幅圖
index.html:

view.py:

發現render函數的context字典那一個個鍵值對其實都真的映射到html模板中去了
就像之前說的服務器幫我們往html上填值了

彩蛋

觀察一下：base_generic

這個index是不是有點眼熟？
這不就是url映射的那個名字嘛？！？

對了映射名字的確是有暖用的：）

總結 ´◡`

runserver 來跑一下如何？
不出意外你會看到：‘’

當然顯示的文字你都可以更改問題不大

我們下一步操作就是針對網站的其他部分包括多用戶的管理作者頁書的介紹等等

下一站：服務端編程（十）- Django -創建網站頁面

想學習數據庫打好後端基礎嘛？不妨從MySQL入手
MySQL專欄
python這麼火想要深入學習python 玩一下簡單的應用嘛？可以看我專欄還在持續更新中哦：
python應用
小孩子才做選擇大人全都要！對後端感興趣嗎？收下它吧：）
手把手帶你學後端（服務端）
謝謝大佬支持! 萌新有禮了：）

服務端編程（九）- Django - 創建網站的基本骨架創建你的主頁

文章目錄

前言 ´･ᴗ･`

url參數

制定url規則

制定url規則

什麼時候需要獲取url？

爲什麼我們操作catalog的url 而不是根目錄的url？

服務器如何響應——view.py

模板的製作

render函數的運用

彩蛋

總結 ´◡`

服務端編程（四）- 背景知識 - request response 深入介紹

服務端編程（二）- 背景知識 - web 客戶端服務端前端後端相關概念解析

服務端編程（五）- 背景知識 - AJAX

微機原理（一）補碼反碼符號與幅值符號拓展

服務端編程（八）- Django - admin 後臺管理站點後臺操作數據庫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

服務端編程（九）- Django - 創建網站的基本骨架 創建你的主頁

文章目錄

前言 ´･ᴗ･`

url參數

制定url規則

制定url規則

什麼時候需要獲取url？

爲什麼我們操作catalog的url 而不是根目錄的url？

服務器如何響應——view.py

模板的製作

render函數的運用

彩蛋

總結 ´◡`

服務端編程（九）- Django - 創建網站的基本骨架創建你的主頁