慕慕手記項目日記 首頁數據的渲染，使用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>