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

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

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 = trueconsole.log("打开请求锁");
}
function windowScroll() {if (sroTop+ClientHeight >= srollHeight && allowRequest){  console.log("开始向后端请求数据，重新渲染页面");toNext()allowRequest = false;}
}window.addEventListener("scroll", windowScroll)

在浏览器中测试发现这个逻辑没有问题，稍后完善对于网页翻页值的初始化处理，其中起始页start_num为0，默认获取的最大页数为10页。现在来添加一下index.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=recommendvar value = params_list[i].split("=")[1]; // recommendfinal_result[key] = value;}}}return final_result;
}function toNextPage(params) {console.log(params);// 开始拼接urlvar 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里面添加代码：

区分选择与未选择

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"},
}

修改选择器

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

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

<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>