Django----使用模板系統渲染博客頁面、實現列表和詳情頁的跳轉、前后跳轉功能


1、模板寫法同Flask,可以參考之前的FLask-模板

 

2、將之前的BootStrap靜態頁面中的數據使用模板寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Djanjo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- 可選的 Bootstrap 主題文件(一般不用引入) -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

      <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>文章列表
    <small>by zhonghuihong </small></h1>

</div>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            {% for article in article_list%}------------->所以現在重點是要返回這個list,這個list是從view.py中的頁面視圖中返回
                            <div>
                <h2>{{ article.title }}</h2>
                <p>{{ article.brief_content }}</p>
            </div>
            {% endfor %}


        </div>
    </div>
    <div class="col-md-3" role="complementary">
        <div>
            <h2>最新文章</h2>
            {% for article in article_list %}
            <h4><a href="#">{{ article.title }}</a></h4>
            {% endfor %}

        </div>
    </div>
</div>

</body>
</html>

 

3、在view.py中新增一個視圖函數,返回list
def get_index_page(requestss):
    all_article=Article.objects.all();
    return render(requestss,'blog/index.html',----------------->render()函數就是渲染頁面,第一個函數寫入參數,第二個參數指定這個函數要渲染的頁面,這里要渲染的是'index.html'頁面,第三個
參數是指定要返回到前端頁面的數據,這里只需要返回一個list,前端根據for循環取出數據進行展示 {
'article_list':all_article });

 

4、然后配置應用路由(項目路由都是一樣的,所以不用配置)
urlpatterns=[
    path('hello_world',hello_world),
    path('content',article_content),
path('Article_List',get_index_page)----------------->一定要注意這里沒有get_index_page(),只寫方法名,后面不加(),否則會報錯
];

 

5、最終結果

 6、打開文章詳情頁的思路同上,只不過不是返回全部文章列表,而是返回其中一篇文章,文章id自己指定

但是存在一個問題,就是無法直接在地址上指定打開某個文章,這樣很不方便

所以需要優化為:在URL上輸入文章ID就能直接跳轉到對應ID的文章詳情----通過URL傳參-----這就需要自己來定制URL了

    articles=Article.objects.all()[0];
   #session_list=articles.content.split('\n')
    return render(requestss,'blog/detail.html',
                  {
                      'article':articles,
                      #'session_list':session_list
                      'curr_article':curr_article
                  });

改寫為:

①、修改路由:路由里傳入參數

urlpatterns=[
    path('hello_world',hello_world),
    path('content',article_content),
path('Article_List',get_index_page),
#path('Article_detail',get_article_detial)
path('Article_detail/<int:article_ID>',get_article_detial)------>后面接一個id

];

②、修改視圖函數,增加一個傳入的參數article_ID

#視圖函數,返回文章詳情頁
def get_article_detial(requestss,article_ID):
    articles=Article.objects.all();
    curr_article=0;
    for article in articles:------------------>循環判斷每個文章,若文章的ID等於我輸入的ID,那么久跳出循環
        if article.article_id==article_ID:
            curr_article=article_ID;
            #break;

   #session_list=articles.content.split('\n')
    return render(requestss,'blog/detail.html',
                  {
                      'article':articles[curr_article]-------------------->注意這個要寫,否則返回的是空白
, #'session_list':session_list 'curr_article':curr_article });

 

 

7、現在已經實現了首頁文章列表的獲取展示、指定文章詳情頁的獲取展示,現在要開始實現首頁文章列表跳轉文章詳情頁
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            {% for article in article_list%}
                            <div>
                                <h2><a href="Article_detail/{{ article.article_id }}">{{ article.title }}</a></h2>----------------->只要加一個a標簽就可以了
                <p>{{ article.brief_content }}</p>
            </div>
            {% endfor %}

但是目前存在一個問題:

因為索引是從0開始的,但是這個開始運行時從1開始,所以會出現索引錯位問題,比如點開第一篇文章,實際打開的是第二篇(id=1)

解決辦法:

 

#視圖函數,返回文章詳情頁
def get_article_detial(requestss,article_ID):
    articles=Article.objects.all();
    curr_article=None;
    for article in articles:
        if article.article_id==article_ID:
            curr_article=article_ID-1;-------------------->填入的id減去1,即可,驗證通過 #break;

   #session_list=articles.content.split('\n')
    return render(requestss,'blog/detail.html',
                  {
                      'article':articles[curr_article],
                      #'session_list':session_list
                      'curr_article':curr_article
                  });

 

8、現在已經實現了首頁跳轉到對應詳情頁的功能,現在需要實現在文章詳情頁有上一頁,下一頁的功能

①、前端代碼(直接取bootstrap官網中找--組件--分頁--翻頁)

前端可以改成以下:說明我們需要傳遞【privious_article】、【next_article】,這兩個參數來自視圖后台

<nav aria-label="...">
  <ul class="pager">
    <li><a href="Article_detail/{{privious_article.article_id}}">上一頁:{{privious_article.title}}
</a></li>
<li><a href="Article_deticle/{{next_article.article_id}}">下一頁:{{next_article.title}}</a></li> </ul> </nav>

 

②、視圖(view.py)函數改造

#視圖函數,返回文章詳情頁,新增返回上一頁、下一頁的數據
def get_article_detial(requestss,article_ID):
    articles=Article.objects.all();
    curr_article=None;
privious_index=0;
next_index=0;
#我們需要知道當前文章的信息
for index,article in enum(articles):
#如果當前文章的index==0,說明么有上一篇文章
if inde==0:
privious_index=0;
next_index=index+1;
#如果當前文章的index等於列表長度,說明沒有下一篇文章
elif index==len(articles)-1:
privious_index=index-1;
next_index=index;
else:
privious_index=index-1;
next_index=index+1;


if article.article_id==article_ID: curr_article=article_ID-1;-------------------->填入的id減去1,即可,驗證通過
privious_article=articles[privious_index]
next_article=articles[next_index]
#break; #session_list=articles.content.split('\n') return render(requestss,'blog/detail.html', { 'article':articles[curr_article], #'session_list':session_list 'curr_article':curr_article,
'privious_article':privious_article,
'next_article':next_article });

③、運行可看到結果

但是這個有一個問題,如果已經在第一篇文章,再點擊上一篇,無響應

如果已經在最后一篇文章,再點擊下一篇文章,無響應,原因是代碼中這種情況下,next_index=當前文章的index,所以怎么點擊都還是在當前這個index

這個后續可以改造的~~待續

 

關注公眾號

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2023 CODEPRJ.COM