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

慕慕手记项目日记 首页数据的渲染，使用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 = 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的代码。

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里面添加代码：

区分选择与未选择

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>