潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)
新建static/js/news/index.js文件 ,主要用于向后台发送请求,
// 新建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>'))
}
}
}
}); // 定义向后端获取新闻列表数据的请求
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("")
} // 显示新闻
// for (let i = 0; i < res.data.news.length; i++) {
// let one_news = res.data.news[i];
// let content = '<li class="news-item">';
// content += '<a href="' + one_news.image_url + '" class="news-thumbnail" target="_blank">' +
// '<img src="' + one_news.image_url + '" alt="' + one_news.title + '" title="' + one_news.title + '"></a>';
// content += '<div class="news-content">' +
// '<h4 class="news-title"><a href="#">' + one_news.title + '</a></h4>' +
// '<p class="news-details">' + one_news.digest + '</p>';
// content += '<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)
// } 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('服务器超时,请重试!');
});
} });
在 index.html 文件中引入该 js 文件
注释掉测试代码
导入图片到 media 文件夹中
轮播图实现
对数据库进行改善,限制循环范围
导入测试数据
url
在 constants 中 定义个常量 SHOW_BANNER_COUNT=6
潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)的更多相关文章
- 潭州课堂25班:Ph201805201 django 项目 第二十四课 文章主页 多级评论数据库设计 ,后台代码完成 (课堂笔记)
加载新闻评论功能 1.分析 业务处理流程: 判断前端传的新闻id是否为空,是否为整数.是否不存在 请求方法:GET url定义:'/news/<int:news_id>' 请求参数:url ...
- 潭州课堂25班:Ph201805201 django 项目 第二十五课 文章多级评论前后台实现 (课堂笔记)
添加新闻评论功能 1.分析 业务处理流程: 判断前端传的新闻id是否为空,是否为整数.是否不存在 判断评论的内容是否为空 判断是否有父评论,父评论的id是否与新闻id匹配 判断用户是否登录 保存新闻评 ...
- 潭州课堂25班:Ph201805201 django 项目 第十九课 文章主页数据库模型,前后台功能实现 (课堂笔记)
-数据库模型设计 : 文章:新闻表: 字段:图片,标题,摘要,类型,作者,创建时间 标签表 评论表, 轮播图:外键,指向文章的外键表 在 utls 目录下创建 models.py 把其它模型常用的字 ...
- 潭州课堂25班:Ph201805201 django 项目 第二十一课 文章主页 新闻列表页面功能 (课堂笔记)
新闻列表页功能 1.分析 业务处理流程: 判断前端传的标签分类id是否为空,是否为整数.是否超过范围 判断前端传的当前文章页数是否为空,是否为整数.是否超过范围 请求方法:GET url定义:/new ...
- 潭州课堂25班:Ph201805201 django 项目 第二十九课 docker实例,文件下载前后台实现 (课堂笔记)
docker 实例 :wq!保存退出 放入一个 html 文件 权限不够,加 sudo 查看本地仓库的 image 运行 docker -- name,后跟个运行名, -p 物理机端口映射到容器端口, ...
- 潭州课堂25班:Ph201805201 django 项目 第二十八课 新闻elasticsearch搜索前后功台能实现 (课堂笔记)
后端功能实现 文件,类,字段,命名不要改动, 在apps/news/search_indexes.py中创建如下类:(名称固定为search_indexes.py) # -*-# -*- coding ...
- 潭州课堂25班:Ph201805201 django 项目 第二十六课 docker简介 (课堂笔记)
官方文档: https://docs.docker.com/install/linux/docker-ce/ubuntu/#set-up-the-repository 1,更新下sudo apt-ge ...
- 潭州课堂25班:Ph201805201 django框架 第十二课 自定义中间件,上下文处理,admin后台 (课堂笔记)
中间件 在项目主目录下的配置文件 在项目主目录下创建文件 写个自定义异常处理 方法1 要让其生效,要在主目录下,的中间件中进行注册 主目录下.该文件名.类名 在进入视图函数之前进行判断, 给 req ...
- 潭州课堂25班:Ph201805201 django 项目 第十五课 用户注册功能后台实现 (课堂笔记)
前台:判断用户输入 ,确认密码,手机号, 一切通过后向后台发送请求, 请求方式:post 在 suers 应用下的视图中: 1,创建个类, 2,创建 GET 方法,宣言页面 3,创建 POST 方法 ...
随机推荐
- python 读取指定div的内容
# -*- coding:utf-8 -*- from bs4 import BeautifulSoup import urllib.request import re # 如果是网址,可以用这个办法 ...
- oracle 备份脚本
本文是一个shell脚本.主要用于Oracle 数据库备份.默认情况下,在周一晚上进行全备.其他时间进行累积增量备份. 使用方法: 假如脚本保存名为: oracle_backup.sh 使用方法为 o ...
- ffmpeg切割视频
using System.Diagnostics; public static void carveVideo() { var inputpath = @"d:\1.mp4"; v ...
- Python知乎热门话题数据的爬取实战
import requestsfrom pyquery import PyQuery as pq url = 'https://www.zhihu.com/explore'headers = { 'u ...
- mysql集群7.4.1
一:mysql集群原理: 1 mysql集群分为三个节点: 1.1 控制节点:本身不提供服务只是控制整个集群的开启与关闭 1.2 数据节点:真正提供数据库的存储,并和其他数据节点关联用 1.3 sql ...
- 激活函数的比较,sigmoid,tanh,relu
1. 什么是激活函数 如下图,在神经元中,输入inputs通过加权.求和后,还被作用了一个函数.这个函数就是激活函数Activation Function 2. 为什么要用激活函数 如果不用激活函数, ...
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- dom操作节点之常用方法
DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...
- Java中堆内存和栈内存的区别
Java把内存分成两种,一种叫做栈内存,一种叫做堆内存. 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空 ...
- OpenJDK-study-002 从GitHub下载openjdk,以及Cygwin的安装
承前启后 由于上一篇openjdk-study-001中,从Mercurial直接拉取openjdk森林失败,于是网上搜了一下,发现GitHub上有人分享openjdk的源码 https://gith ...