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

这个后续可以改造的~~待续