簡單的博客系統(四)Django請求HTML頁面視圖信息--基於函數的視圖

1. 編寫用於查詢數據的功能函數

應用目錄 下的 views.py 文件一般用於保存響應各類請求的函數或類css

from django.shortcuts import render
from .models import BlogArticles

# Create your views here.
def blog_title(request): # request 負責響應所接收到的請求
    # 查詢獲得全部 BlogArticles 表中的全部實例數據
    blogs = BlogArticles.objects.all()
    """
    render() 做用是將數據渲染到指定模板上
    "blog/titles.html" 指定渲染到哪一個頁面,頁面路徑爲應用目錄下的templates目錄
    {"blogs": blogs} 爲傳給頁面的數據
    """
    return render(request, "blog/titles.html", {"blogs": blogs})

2. 在應用目錄下建立相關html頁面文件

  • 文件目錄結構以下:

  • 編寫相關頁面代碼
<!-- base.html公共模板頁面 -->
<!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">
    <title>{% block title %}{% endblock %}</title> <!-- 表示裏面的內容被 title block 代替 -->

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        {% block content %} <!-- 表示頁面的內容被 content block 代替 -->
        {% endblock %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

<!-- titles.html -->
{% extends "base.html" %} <!-- 繼承 base.html 模板頁 -->

{% block  title %}
博客標題
{% endblock %}

{% block content %}
    <div class="row text-center vertical-middles-sm">
        <h1>個人博客</h1>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <ul>
                <!-- 循環遍歷 blogs 裏的對象 -->
                {% for blog in blogs %}
                    <li>{{ blog.title }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

3. 配置URL

  1. 編寫 項目目錄 下的 urls.py 文件
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path("blog/", include('blog.urls')), # 經過這裏將blog/請求轉向blog應用的urls.py,即./blog/urls.py文件
]
  1. 編寫 應用目錄 下的 urls.py 文件
from django.urls import path
from . import views

"""
第一個參數爲空,表示訪問根,由於該文件在blog應用中,則要爲blog/
views.blog_title 表示響應該請求的函數
"""
urlpatterns = [
    path('', views.blog_title),
]
  1. 啓動項目訪問:http://127.0.0.1:8000/blog/ 便可看到結果

4. 給url傳參數

  1. 修改 titles.html 文件給文章標題添加連接
<!-- 循環遍歷 blogs 裏的對象 -->
{% for blog in blogs %}
<li><a href="{{ blog.id }}">{{ blog.title }}</a></li>
{% endfor %}
  1. 爲該請求編寫對應的函數(./blog/views.py)
def blog_article(request, article_id): # 該請求傳入 article_id 參數
    article = BlogArticles.objects.get(id=article_id)
    pub = article.publish
    return render(request, "blog/content.html",{"article":article, "publish":pub})
  1. 編寫顯示文件內容的html頁面(templates/blog/content.html)
{% extends "base.html" %} <!-- 繼承 base.html 模板頁 -->

{% block  title %}
博客標題
{% endblock %}

{% block content %}
    <div class="row text-center vertical-middles-sm">
        <h1>{{ article.title }}</h1>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-8 col-md-offset-2">
            <p class="text-center">
                <span>{{ article.author.username }}</span>
                <span style="margin-left: 20px;">{{ publish }}</span>
            </p>
            <div>{{ article.body }}</div>
        </div>
    </div>
{% endblock %}
  1. 增長請求所對應的url(./blog/urls.py)
urlpatterns = [
    path('', views.blog_title),
    path('<int:article_id>/', views.blog_article),
]

URL配置和查詢

當用戶經過瀏覽器請求某個URL時,Django會根據請求路徑依次在URLConf中查詢,並將第一個符合條件的映射關係做爲查詢結果。html

例如,訪問 http://localhost:8000/blog/1,其請求過程以下:html5

  1. localhost:8000:主域名部分,不進行查詢
  2. /blog/:首先在 項目目錄/urls.py 中查詢,遇到符合條件的URL映射(path('blog/', include('blog.urls')),),根據此映射中的描述,到 blog.urls(./blog/urls.py) 中查詢
  3. /1:在 ./blog/urls.py 中有URL(path('<int:article_id>/', views.blog_article))配置,請求路徑正好符合,從而肯定最終訪問的視圖函數 views.blog_article
相關文章
相關標籤/搜索