前台代码

// 在static/js/news/index.js文件中

$(function () {
// 新闻列表功能
let $newsLi = $(".news-nav ul li");
let iPage = 1; //默认第1页
let iTotalPage = 1; //默认总页数为1
let sCurrentTagId = 0; //默认分类标签为0
let bIsLoadData = true; // 是否正在向后台加载数据 // 加载新闻列表信息
fn_load_content(); $newsLi.click(function () {
// 点击分类标签,则为点击的标签加上一个class属性为active
// 并移除其它兄弟元素上的,值为active的class属性
$(this).addClass('active').siblings('li').removeClass('active');
// 获取绑定在当前选中分类上的data-id属性值
let sClickTagId = $(this).children('a').attr('data-id'); if (sClickTagId !== sCurrentTagId) {
sCurrentTagId = sClickTagId; // 记录当前分类id
// 重置分页参数
iPage = 1;
iTotalPage = 1;
fn_load_content()
}
}); //页面滚动加载相关
$(window).scroll(function () {
// 浏览器窗口高度
let showHeight = $(window).height(); // 整个网页的高度
let pageHeight = $(document).height(); // 页面可以滚动的距离
let canScrollHeight = pageHeight - showHeight; // 页面滚动了多少,这个是随着页面滚动实时变化的
let nowScroll = $(document).scrollTop(); if ((canScrollHeight - nowScroll) < 100) {
// 判断页数,去更新新闻数据
if (!bIsLoadData) {
bIsLoadData = true;
// 如果当前页数据如果小于总页数,那么才去加载数据
if (iPage < iTotalPage) {
iPage += 1;
$(".btn-more").remove(); // 删除标签
// 去加载数据
fn_load_content()
} else {
message.showInfo('已全部加载,没有更多内容!');
$(".btn-more").remove(); // 删除标签
$(".news-list").append($('<a href="javascript:void(0);" class="btn-more">已全部加载,没有更多内容!</a>')) }
}
}
}); // 新闻轮播图功能
fn_load_banner();
/*=== bannerStart ===*/
let $banner = $('.banner');
let $picLi = $(".banner .pic li");
let $prev = $('.banner .prev');
let $next = $('.banner .next');
let $tabLi = $('.banner .tab li');
let index = 0; // 小原点
$tabLi.click(function () {
index = $(this).index();
$(this).addClass('active').siblings('li').removeClass('active');
$picLi.eq(index).fadeIn(1500).siblings('li').fadeOut(1500);
});
// 点击切换上一张
$prev.click(function () {
index--;
if (index < 0) {
index = $tabLi.length - 1
}
$tabLi.eq(index).addClass('active').siblings('li').removeClass('active');
$picLi.eq(index).fadeIn(1500).siblings('li').fadeOut(1500);
}).mousedown(function () {
return false
}); $next.click(function () {
auto();
}).mousedown(function () {
return false
});
// 图片向前滑动
function auto() {
index++;
index %= $tabLi.length;
$tabLi.eq(index).addClass('active').siblings('li').removeClass('active');
$picLi.eq(index).fadeIn(3000).siblings('li').fadeOut(3000);
} // 定时器
let timer = setInterval(auto, 2000);
$banner.hover(function () {
clearInterval(timer)
}, function () {
auto();
}); /*=== bannerEnd ===*/ // 定义向后端获取新闻列表数据的请求
function fn_load_content() {
// let sCurrentTagId = $('.active a').attr('data-id'); // 创建请求参数
let sDataParams = {
"tag_id": sCurrentTagId,
"page": iPage
}; // 创建ajax请求
$.ajax({
// 请求地址
url: "/news/", // url尾部需要添加/
// 请求方式
type: "GET",
data: sDataParams,
// 响应数据的格式(后端返回给前端的格式)
dataType: "json",
})
.done(function (res) {
if (res.errno === "0") {
iTotalPage = res.data.total_pages; // 后端传过来的总页数
if (iPage === 1) {
$(".news-list").html("")
} res.data.news.forEach(function (one_news) {
let content = `
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" 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="#">${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}</span>
<span class="news-author">${one_news.author}</span>
</div>
</div>
</li>`;
$(".news-list").append(content)
}); $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">滚动加载更多</a>'));
// 数据加载完毕,设置正在加载数据的变量为false,表示当前没有在加载数据
bIsLoadData = false; } else {
// 登录失败,打印错误信息
message.showError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
} // 轮播图
function fn_load_banner() {
$.ajax({
// 请求地址
url: "/news/banners/", // url尾部需要添加/
// 请求方式
type: "GET",
async: false
})
.done(function (res) {
if (res.errno === "0") {
let content = ``;
let tab_content = ``;
res.data.banners.forEach(function (one_banner, index) {
if (index === 0){
content = `
<li style="display:block;"><a href="javascript:void(0);">
<img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
`;
tab_content = `<li class="active"></li>`;
} else {
content = `
<li><a href="javascript:void(0);"><img src="${one_banner.image_url}" alt="${one_banner.news_title}"></a></li>
`;
tab_content = `<li></li>`;
} $(".pic").append(content);
$(".tab").append(tab_content)
}); } else {
// 登录失败,打印错误信息
message.showError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
} });

  注释静态测试代码:

热门新闻推荐功能

1.分析

请求方法GET

url定义/

请求参数:前端无需传入参数

热门新闻推荐功能直接通过模版渲染的方式来实现。

对热门新闻的数据库优化下,对优先级进行限制

导入测试数据库数据

后台代码: 与 index 视图写在一起,认浏览器一打开 ,就进行渲染

代码说明 :

# 关联到 news 表,只查字段:
# 没有逻辑删除的,根据优先级,点击量排序, - 号:倒序,从大到小,
# [0:3]

在news目录下constants.py中定义如下常量:

显示热门新闻条数

SHOW_HOTNEWS_COUNT = 3

在index.html 文件中 ,接收数据库数据,

新闻详情页功能

1.分析

业务处理流程:

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

请求方法GET

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

请求参数:url路径参数

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

新闻详情页直接通过模版渲染的方式来实现。

在news目录下的views.py文件中创建如下类视图:

更改 html 文件,对取出贩数据进行渲染,

原文件:

更改填充数据:

												

潭州课堂25班:Ph201805201 django 项目 第二十三课 文章主页 轮播图前端实现 热门新闻推荐实现 详情页实现 (课堂笔记)的更多相关文章

  1. 潭州课堂25班:Ph201805201 django 项目 第二十一课 文章主页 新闻列表页面功能 (课堂笔记)

    新闻列表页功能 1.分析 业务处理流程: 判断前端传的标签分类id是否为空,是否为整数.是否超过范围 判断前端传的当前文章页数是否为空,是否为整数.是否超过范围 请求方法:GET url定义:/new ...

  2. 潭州课堂25班:Ph201805201 django 项目 第二十七课 docker简介,配置文件 (课堂笔记)

    新闻搜索功能实现 一.docker介绍 1.什么是docker? 使用容器让创建.部署.运行应用程序更简单的一个工具 让应用所需的库和依赖环境打包 有一点点像虚拟机 2.为什么使用docker? 3. ...

  3. 潭州课堂25班:Ph201805201 django 项目 第十三课 短信验证码后台的实现 (课堂笔记)

    d 发送短信验证码之前,后台要得到三个参数 : 1,用户手机吗,, 2,用户输入的图片验证文本, 3,前台的 uuid , 在60秒内是否有发送短信的记录 只有用户输入的手机号,文本信息与 uudi ...

  4. 潭州课堂25班:Ph201805201 django 项目 第二十课 数据库分析设计图 (课堂笔记)

    https://www.dbdesigner.net/

  5. 潭州课堂25班:Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)

    一.分析静态页面   1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...

  6. 潭州课堂25班:Ph201805201 django 项目 第二十八课 新闻elasticsearch搜索前后功台能实现 (课堂笔记)

    后端功能实现 文件,类,字段,命名不要改动, 在apps/news/search_indexes.py中创建如下类:(名称固定为search_indexes.py) # -*-# -*- coding ...

  7. 潭州课堂25班:Ph201805201 django 项目 第十课 自定义错误码,完成图片验证码,用户是否被注册功能 (课堂笔记)

    把 视图传到前台的  JsonResponse(data=data) 先进行处理,之后再传到前台, 处理:引用自定义错误代码,把错误代码返回给前台,前台根据错误代码中文提示 class Code: O ...

  8. 潭州课堂25班:Ph201805201 django 项目 第七课 用户模型设计 (课堂笔记

    在 user 的应用中的 models.py: 导入 dango 自带的用户模型 from django.contrib.auth.models import AbstractUser,UserMan ...

  9. 潭州课堂25班:Ph201805201 django 项目 第四课 项目搭建 课堂笔记)

    创建一用户,授予对这个 myblog 库的所有表的权限(.*),在任何 ip 地址中访问(@“%”), 刷新: 退出,用新创建的用户登录,并进入这个库, 在昨天创建的项目中,配置文件中 为了数据库的案 ...

随机推荐

  1. js 图片转换base64 base64转换为file对象

    function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...

  2. Spring Cloud与Spring Boot版本匹配关系

    Spring Cloud是什么? “Spring Cloud provides tools for developers to quickly build some of the common pat ...

  3. 微信小程序 this和that详解及简单实例

    微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...

  4. github协作开发遇到的问题

    1.十一来了,帝都不好买票,30号就调休一天回去了,项目还没搞完,紧张的不行,就自己和同事搞了一个github协作开发,由于是功能和公司项目不是很沾边,但是是自己的主要工作,就和同事协调了一下,搭建了 ...

  5. oracle安装过程中先决条件检查失败的解决办法

    1:公司数据库开始用的mysql,因为公司做的是保密性项目,所以就在项目日志过多的时候项目有爆炸的迹象啊(3000千万数据,貌似mysql有点撑不住).然后组长开始让我安装oracle,公司的内网也是 ...

  6. html5 之 local storage \sessjion storage

    转载: HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessi ...

  7. 在PHP中使用AES加密算法加密数据

    算法/模式/填充 16字节加密后数据长度 不满16字节加密后长度 AES/CBC/NoPadding 不支持 AES/CBC/PKCS5Padding AES/CBC/ISO10126Padding ...

  8. Tarjan算法【强连通分量】

    转自:byvoid:有向图强连通分量的Tarjan算法 Tarjan算法是基于对图深度优先搜索的算法,每个强连通分量为搜索树中的一棵子树.搜索时,把当前搜索树中未处理的节点加入一个堆栈,回溯时可以判断 ...

  9. python词云

    词云图 from os import path from PIL import Image import numpy as np import matplotlib.pyplot as plt fro ...

  10. Codeforces 542E Playing on Graph 其他

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF542E.html 题目传送门 - CF542E 题目传送门 - 51Nod1481 题意 有一幅无向图,它有 ...