搭建本身的博客（三）：簡單搭建首頁和詳情頁

時間 2019-12-05

標籤搭建本身博客簡單首頁詳情简体版

原文原文鏈接

上一篇咱們建立了博客表和標籤表以及超級用戶，那如何將建立的博客經過網頁顯示出來呢？‘咱們簡單的建立首頁和詳情頁。html

一、新建html界面前端

首先建立在blog app下建立一個templates文件夾，這個文件夾用來放置前端頁面，注意文件夾名字必須是templates。django

建立blog_list.html 文件用來放博客列表。建立blog_detail.html文件用來放博客詳情。瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>felix Blog</title>
</head>
<body>
<div>
    <h3>felix Blog</h3>
</div>
<br/>

</body>
</html>

blog_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客詳情</title>
</head>
<body>

</body>
</html>

blog_detail.html

二、建立是視圖函數app

打開blog下的views.pyide

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog


# Create your views here.

# 博客列表
def blog_list(requests):
    context = {
        'blogs': Blog.objects.all()
    }
    return render_to_response('blog_list.html', context)

# 博客詳情
def blog_detail(requests, blog_pk):
    context = {
        'blog': get_object_or_404(Blog, pk=blog_pk)
    }

    return render_to_response('blog_detail.html', context)

views.py

這裏視圖函數中傳遞了參數給前端，因此得修改一下以前寫的前端代碼，渲染視圖函數傳遞過來的數據。函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>felix Blog</title>
</head>
<body>
<div>
    <h3>felix Blog</h3>
</div>
<br/>
{% for blog in blogs %}
    <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
    <p>{{ blog.content }}</p>
{% endfor %}
</body>
</html>

blog_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.title }}</title>
</head>
<body>

<a href="{% url 'home' %}">
    <div>
        <h3>felix Blog</h3>
    </div>
</a>
<h3>{{ blog.title }}</h3>
<p>{{ blog.content }}</p>
</body>
</html>

blog_detail

三、建立url訪問路徑測試

修改全局的myblog下的urls.pyurl

"""myblog URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
from blog.views import blog_list

urlpatterns = [
    path('', blog_list, name='home'),  # 主頁路徑
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),  # 博客app路徑
]

myblog_urls.py

在blog app下建立url路徑，新建urls.pyspa

from django.urls import path
from . import views
urlpatterns = [
    path('<int:blog_pk>',views.blog_detail,name='blog_detail')
]

blog_urls.py

四、啓動服務，運行測試

此時咱們在瀏覽器輸入：http://127.0.0.1:8000/

點擊myBlog，跳轉到詳情：

若是沒有數據的話，咱們能夠進入admin後臺管理系統建立。

而後刷新首頁：

就出現了剛纔建立的博客！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。