1. 程式人生 > >部落格網站(7)-部落格的主頁面及文章內容頁面

部落格網站(7)-部落格的主頁面及文章內容頁面

部落格頁面概要:

  部落格主頁面
       ├───文章標題列表(超連結)
       |___發表部落格按鈕(超連結)
   部落格文章內容頁面
       ├───標題
       ├───文章內容
       |___修改文章按鈕(超連結)
   部落格撰寫頁面
        ├───標題編輯欄
        ├───文章內容編輯區域
        |___提交按鈕

部落格主頁面:

列表編寫思路:

取出資料庫中所有檔案物件

將文章物件打包成列表傳遞到前端

views.py

# coding:utf-8
from django.shortcuts import render
from . import models

def index(request):
    articles = models.Article.objects.all()   #從資料庫中取資料得到一個列表
    return render(request, 'index.html', {'articles':articles})    #傳遞給前段

前端列表把文章以標題超連結的形式逐個列出

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nic的部落格</title>
</head>
<body>
<h2>
    <a href="  ">新增新文章</a>      <!--新增新文章的超連結-->
</h2>

{% for article in articles %}      <!--列表for迴圈-->
      <a href="  ">{{article.title}}</a>   <!--文章標題超連結-->
     <br/>
{% endfor %}     <!--注意for迴圈結束標誌 -->

</body>
</html>
部落格文章內容頁面:
在app下views.py中新增響應函式article_page以響應對應文章內容頁面:
def article_page(request,article_id):    #新增引數article_id來傳遞主鍵id
    article = models.Article.objects.get(pk=article_id)    #根據主鍵獲取到相應文章物件
    return render(request, 'article_page.html', {'article': article})

新建article_page.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article page</title>
</head>
<body>
<h2>{{ article.title }}</h2>
<br/>
{{artitle.content}}
<br/>
<br/>
<a href="">修改文章</a>
</body>
</html>

URL引數傳遞 :

每個響應函式對應一個URL

在app下的urls.py中設定響應函式對應的URL

url(r'^article/(?P<article_id>[0-9]+)$', views.article_page())

 (?P<article_id>[0-9]+) 匹配到的數字以article_id作為組名去匹配,組名必須和響應函式中的引數名保持一致,使用(?P<>\d+)的形式將捕獲值傳給給<>中的引數,比如(?P<article_id>\d+),當訪問/blog/article/3時,將會將3捕獲給article_id,從而從資料庫中取出相應主鍵的article

Django中的超連結:

template中可以用 {% url  ‘app_name : url_name’   param %}來表示目標地址

其中

app_name:應用名稱空間的名稱

url_name:連結名

param:地址的引數

app_name和url_name 都在url中配置

根urls.py中新增:

url(r'^nic/', include('blog.urls',namespace='article'))  #該應用的名稱空間

app下的url中新增:

url(r'^article/(?P<article_id>[0-9]+)$', views.article_page,name='article_page')
相應的HTML檔案的超連結中新增:
<a href="{% url 'blog:article_page' article_id %}">{{article.title}}</a>   <!--文章標題超連結-->
 則第一篇文章對應的URL為localhost:8000/nic/article/1