[django项目] 新闻页功能模块复盘+总结

本文详细解析了新闻页面的功能模块,包括热门文章、轮播图、文章列表与搜索功能的实现逻辑,以及新闻详情页的文章内容与评论系统。强调了前端与后端交互的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

新闻页功能模块复盘+总结

前言

完成了新闻首页新闻详情页功能后,对主要功能做一些整理,主要目的是梳理首页架构,包括模型表/主要功能模块等,其次是分析实现的思路。

学而不思则罔,思而不学则殆 --《论语》

I. 功能设计分析

废话不多说直接上思维导图

[外链图片转存失败(img-SaRHRlnP-1566532400373)(]

[外链图片转存失败(img-9cgiSuF4-1566532400381)()]
在这里插入图片描述

II. 代码逻辑整理

1>新闻首页

除了更多文章模块需要额外的动态加载之外,其他首页上的模块都是在访问新闻首页时就开始加载的

1.1>热门文章
  1. 打开新闻首页时,首先会通过路由进入视图文件中的首页函数
  2. 首页视图函数中,会读取热门文章的id,标题图片链接,并按照点击量进行排序,然后从中抽取三张
  3. 将数据传递到前端页面,循环遍历出三篇热门文章,展示到首页面上
1.2>轮播图

打开新闻首页,首先映入眼帘的就是轮播图,轮播图的实现原理如下

  1. 用户访问新闻首页,轮播图的后端视图函数开始加载
  2. 视图函数访问数据库,读取到轮播图表中文章的图片链接/id/标题等信息
  3. 通过json的方式传递读取到的数据到前端
  4. 生成前端页面:
    1. html生成上一页下一页图标
    2. JS中加载后端传递的轮播图数据
    3. 通过属性拼接的方式,循环遍历并生成html代码
  5. 定义以下方法:
    1. 点击导航小圆点切换轮播图
    2. 点击上一页下一页图标切换
    3. 图片定时自动轮播
    4. 鼠标滑入轮播停止
1.3>文章标签导航&文章列表

文章标签导航应该与文章列表一起分析,因为二者有着必然的因果关系(切换标签则文章列表必定改变)

  1. 用户访问新闻首页,文章列表的后端视图函数开始加载
  2. 获取页面上的标签id页数
  3. 查询数据库中的文章的各项数据,并进行过滤和分页
  4. 返回json数据到前端
  5. 首次访问时展示最新资讯标签页的文章
  6. 点击标签切换标签页:
    1. 前端向后端发生ajax请求
    2. 后端处理后读取数据库中的文章数据,返回给前端
    3. 前端页面渲染并展示
1.4>更多文章

访问新闻首页时展示在页面最底部滚动加载更多

  1. 向下滚动到底部时,根据与页面底部的距离判断
  2. 向后端发生ajax(包含分页信息)获取数据
  3. 获取到第二页的数据并展示
  4. 当下一页没有数据获取时,展示信息已全部加载,没有更多内容!

2>新闻详情页

通过首页或是其他途径访问文章详情页的时候,会加载文章和评论

2.1>文章内容
  1. 访问到文章详情页时,通过文章id到后端获取文章的各项信息
  2. 通过拼接的方式渲染到前端页面
2.2>查看评论
  1. 访问到文章详情页时,也会通过文字id到后端获取文章的评论数据
  2. 通过拼接的方式渲染到前端页面
2.3>添加评论
  1. 用户登录后才可以添加评论,否则抛出提示错误并指到登录界面
  2. 发表评论后会检查文章是否还存在,评论是否为空,以及是否是二级评论(即判断是否有parent_id)
  3. 如果上述条件都满足,则写入评论到数据库
  4. 完成写入后展示在评论列表的第一行

3>新闻搜索

用户输入关键字, 对项目进行全文搜索, 即搜索被应用于文章的标题,简介,内容

当你运行那个docker run命令时, elasticsearch就在mysql数据库中创建了索引

3.1>搜索页面
  1. 用户访问搜索页面
  2. 展示封面图片, 搜索框, 推荐内容
3.2>获取参数
  1. 用户输入查询关键字, 点击搜索, 执行
  2. django将搜索命令传递给haystack
  3. haystack到elasticsearch中检索需要的内容, 然后返回结果
3.3>返回结果
  1. 展示结果之前判断结果数量, 并进行分页
  2. 返回结果到前端代码
  3. 展示搜索结果列表, 显示搜索结果X页, 高亮显示搜索关键字
3.4>加载更多
  1. 向下滚动到底部, 这时js发挥作用
  2. 从后端获取, 然后动态加载更多内容

尾言

用户注册登录功能是围绕着用户这个对象来实现的, 而新闻页面的功能主要围绕的对象就是文章

用户可以在登录或非登录状态下查看我们展示在页面上的文章内容, 登录的用户还可以进行评论

完成这个功能后, 其实整个项目主要展示界面就已经完成了一大半了, 其余的包括文档下载,在线课堂,后台管理的博文, 都将会在之后的日子里更新出来

喜欢本文可以点个赞或是关注我, 期待与你的沟通进步

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值