Django博客搭建_新闻模块3-新闻详情

Blog项目——新闻详情

一、分析

业务处理流程：

• 判断前端传的新闻id是否为空，是否为整数、是否不存在

请求方法：GET

url定义：'/news/<int:news_id>/'

请求参数：url路径参数

参数	类型	是否必传	描述
news_id	整数	是	新闻id

二、简单流程

1. 用户点击相关新闻
2. 通过路由往后台传id值
3. 后台获取该id值，从数据库获取该id的新闻内容
4. 如果内容为空，则返回404页面，如果不为空则返回该内容
5. 前台展示数据

三、代码

1. 前端html代码

news_detail.html

{% extends 'base/base.html' %}

{% block title %} 新闻详情
{% endblock %}

{% block link %}
  <link rel="stylesheet" href="../../static/css/news/news-detail.css">

{% endblock %}

{% block main-contain %}
    <div class="news-contain">

      <h1 class="news-title">{{ news.title }}</h1>
      <div class="news-info">
        <div class="news-info-left">
          <span class="news-author">{{ news.author.username }}</span>
          <span class="news-pub-time">{{ news.update_time }}</span>
          <span class="news-type">{{ news.tag.name }}</span>
        </div>
      </div>
      <article class="news-content">
        {{ news.content | safe }}
      </article>
      <div class="comment-contain">
        <div class="comment-pub clearfix">
          <div class="new-comment">
            文章评论(<span class="comment-count">0</span>)
          </div>
          <div class="comment-control please-login-comment" style="display:none;">
            <input type="text" placeholder="请登录后参加评论">
          </div>
          <div class="comment-control logged-comment">
            <input type="text" placeholder="请填写评论">
          </div>
          <button class="comment-btn">发表评论</button>
        </div>
        <ul class="comment-list">
          <li class="comment-item">
            <div class="comment-info clearfix">
              <img src="../../static/images/avatar.jpeg" alt="avatar" class="comment-avatar">
              <span class="comment-user">评论人</span>
              <span class="comment-pub-time">1小时前</span>
            </div>
            <div class="comment-content">这是一条评论</div>
          </li>
          <li class="comment-item">
            <div class="comment-info clearfix">
              <img src="../../static/images/avatar.jpeg" alt="avatar" class="comment-avatar">
              <span class="comment-user">评论人</span>
              <span class="comment-pub-time">1小时前</span>
            </div>
            <div class="comment-content">这是一条评论</div>
          </li>
        </ul>
      </div>
	
    </div>

{% endblock %}

上面的safe是模板过滤器，表示不对整个进行转义。

2. url

# -*- coding: utf-8 -*-
# @Author  : summer
from django.urls import path
from . import views

app_name = "news"

urlpatterns = [
	path("", views.index, name="index"),
	path("news/", views.NewsListView.as_view(), name="news_list"),
	path("news/<int:news_id>/", views.NewsDetailView.as_view(), name="news_detail"),
]

3. 后端代码

class NewsDetailView(View):
	def get(self, request, news_id):
		news = models.News.objects.select_related('tag', 'author').only('title', 'author__username', 'tag__name', 'content').filter(is_delete=False, id=news_id).first()
		if news:
			return render(request, 'news/news_detail.html', context={"news": news})
		else:
			return HttpResponseNotFound("<h1>PAGE NOT FOUND</h1>")

现在我们去浏览器输入/news/1/的url时，就可以看到第一条数据，而当1变成一个数据库没有的数据时，就会显示PAGE NOT FOUND。

我们上篇说到的新闻列表中并没有添加跳转事件，我们可以回去把他们加上：

index.js

let content = `
<li class="news-item">
    <a href="/news/${one_news.id}/" class="news-thumbnail" target="_blank">
    	<img src="${one_news.image_url}" alt="${one_news.title}" title="${one_news.title}">
    </a>
    <div class="news-content">
        <h4 class="news-title"><a href="/news/${one_news.id}/">${one_news.title}</a></h4>
        <p class="news-details">${one_news.digest}</p>
        <div class="news-other">
            <span class="news-type">${one_news.tag_name}</span>
            <span class="news-time">${one_news.update_time.slice(0,19).replace("T"," ")}</span>
            <span class="news-author">${one_news.author}</span>
        </div>
    </div>
</li>`;