慕慕手记项目日记 首页数据的渲染,使用js 2025-3-16

慕慕手记项目日记 首页数据的渲染,使用js 2025-3-16

到这部分我们先测试能不能使用js的方式来动态数据,先写出一个简短的demo出来

js 复制代码
console.log("index.js文件引入了")


var ClientHeight = document.documentElement.clientHeight; // 可视区域的高度,就是我们能看见的内容的高度
var sroTop = document.documentElement.scrollTop; // 滚动条在文档中的高度的位置(滚出可见区域的高度)
var srollHeight = document.body.scrollHeight; // 所有内容的高度

var allowRequest = true; // 锁定后端数据请求中的状态。 是否允许请求后端

function toNext()
{
    allowRequest = true
    console.log("打开请求锁");
}
function windowScroll() {
    if (sroTop+ClientHeight >= srollHeight && allowRequest)
    {  console.log("开始向后端请求数据,重新渲染页面");
        toNext()
        allowRequest = false;
    }
}

window.addEventListener("scroll", windowScroll)

在浏览器中测试发现这个逻辑没有问题,稍后完善对于网页翻页值的初始化处理,其中起始页start_num为0,默认获取的最大页数为10页。现在来添加一下index.js的代码。

js 复制代码
console.log("index.js文件引入了")

var ClientHeight = document.documentElement.clientHeight; // 可视区域的高度,就是我们能看见的内容的高度
var allowRequest = true; // 锁定后端数据请求中的状态。 是否允许请求后端
var page = 1;
var endNum = 10; // 假设初始值为10,根据实际情况调整

function getUrlParams() {
    var uri = location.search;
    var final_result = {};
    // 第一次请求没有参数的时候
    if (uri === "") {
        final_result['page'] = page;
        final_result['article_type'] = 'recommend';
        final_result['start_num'] = 0;
        final_result['end_num'] = 10;
    } else {
        if (uri.indexOf("?") != -1) {
            params = uri.substr(1);
            params_list = params.split("&");
            for (var i = 0; i < params_list.length; i++) {
                var key = params_list[i].split("=")[0]; // article_type=recommend
                var value = params_list[i].split("=")[1]; // recommend
                final_result[key] = value;
            }
        }
    }
    return final_result;
}

function toNextPage(params) {
    console.log(params);
    // 开始拼接url
    var url = "?";
    for (var key in params) {
        if (key === "page") {
            params[key] = parseInt(params[key]) + 1;
        }
        if (key === "start_num") {
            params[key] = endNum;
        }
        url += key;
        url += "=";
        url += params[key];
        url += "&";
    }

    // 去掉末尾的&符号
    if (url.endsWith("&")) {
        url = url.substr(0, url.length - 1);
    }
    
     // 滚动标识
    if (!url.includes("scroll")) {
        url += "scroll=1";
    }
    console.log(url);
    allowRequest = true;
    location.href = url;
}

function windowScroll() {
    var scrollTop = document.documentElement.scrollTop; // 滚动条在文档中的高度的位置(滚出可见区域的高度)
    var scrollHeight = document.body.scrollHeight; // 所有内容的高度

    if (scrollTop + ClientHeight >= scrollHeight && allowRequest) {
        console.log("开始向后端请求数据,重新渲染页面");
        allowRequest = false;
        var params = getUrlParams();
        toNextPage(params);
    }
}

window.addEventListener("scroll", windowScroll);

文章分类功能实现

现在文章需要按照类别进行分类,状态分为选择和未选择。同时需要修改前端模板

首先在index.py里面添加代码:

区分选择与未选择

py 复制代码
label_types = {
    "recommend": {"name":"推荐","selected":"selected"},
    "auto_test": {"name": "自动化测试", "selected": "no-selected"},
    "python": {"name": "Python", "selected": "no-selected"},
    "java": {"name": "Java", "selected": "no-selected"},
    "function_test": {"name": "功能测试", "selected": "no-selected"},
    "pref_test": {"name": "性能测试", "selected": "no-selected"},
    "funny": {"name": "幽默段子", "selected": "no-selected"},
}

修改选择器

python 复制代码
 左侧菜单栏的处理
    for k,v in label_types.items():
        if article_type == k:
            v["selected"] = "selected"
        else:
            v["selected"] = "no-selected"

然后修改index.html内的代码,里面的内容需要靠后端传过来才能进行使用。

jinja2 复制代码
<div class="article-container clearfix">
				<div class="left-menu fl">
					{% for label_name,label_value in label_types.items() %}
					<div class="{{label_value.selected}}">
						<a href="?article_type={{label_name}}&page=1">{{label_value.name}}</a>
						</div>
					{% endfor %}
				</div>
相关推荐
liu****14 分钟前
4.基础开发工具(一)
linux·开发语言·1024程序员节
文火冰糖的硅基工坊14 分钟前
[人工智能-大模型-72]:模型层技术 - 模型训练六大步:①数据预处理 - 基本功能与对应的基本组成函数
开发语言·人工智能·python
小龙报18 分钟前
《C语言疑难点 --- 字符函数和字符串函数专题(上)》
c语言·开发语言·c++·算法·学习方法·业界资讯·visual studio
凭君语未可23 分钟前
深度解析Java的多态特性
java·开发语言
Cory.眼27 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
csbysj202034 分钟前
DTD 元素:XML 与 SGML 文档结构解析指南
开发语言
傻童:CPU1 小时前
C语言练习题
c语言·开发语言
前端架构师-老李1 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
极地星光1 小时前
协程:实战与系统集成(高级篇)
开发语言
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript