Blog项目——新闻详情
一、分析
业务处理流程:
- 判断前端传的新闻id是否为空,是否为整数、是否不存在
请求方法:GET
url定义:'/news/<int:news_id>/'
请求参数:url路径参数
参数 | 类型 | 是否必传 | 描述 |
---|---|---|---|
news_id | 整数 | 是 | 新闻id |
二、简单流程
- 用户点击相关新闻
- 通过路由往后台传id值
- 后台获取该id值,从数据库获取该id的新闻内容
- 如果内容为空,则返回404页面,如果不为空则返回该内容
- 前台展示数据
三、代码
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>`;