「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
一、使用express请求本地数据时会遇到的问题
1.想获取本地文件夹中json文件的数量
使fs.readdir的方法来获取文件夹中文件， 先创建js文件写入代码
const express = require('express')
var fs = require('fs');
const app = express()
var num = 0
fs.readdir("public/data", function(err, files) {
if (err) {
return console.error(err);
}
files.forEach(function(file) {
if (file.substring(0, 6) === 'letter') {
num++
}
});
return num
});
app.get('/json-num', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*')
res.send(JSON.stringify(num))
})
第一个参数为你想获取的文件夹路径，files就是获取到的内容forEach遍历数据，将文件夹中带letter的json文件选出来，并计算个数，最后设置一个路由规则用于获取将获取到的数据返回
2.从html页面获取express中获取到的json数据 XMLHttpRequest 是 AJAX 的基础。
var xmlhttp;
//这个if设置兼容性
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://127.0.0.1:8000/json-num", true)
xmlhttp.send()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300) {
let datas = JSON.parse(xmlhttp.response)
}
}
}
这个不懂创建可以先去看ajax教程，链接：
https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp
3.有时动态生成的页面，你直接获取元素的时候获取不到的问题
就是因为页面加载需要时间，没办法第一时间就存在生成的元素，所以可以将获取元素，设置点击事件等等放入函数内，然后用setTimeout（函数名，100）的方法设置一点延迟就解决了，
4.实现页面跳转功能
很简单使用
window.location.href = “链接” //可以跟随参数传递
window.location.assign（“链接”）
5.结合3和4的一个函数
function toInfo() {
const content = document.querySelectorAll('.item-content')
for (var i = 0; i < content.length; i++) {
content[i].addEventListener('click', function() {
//获取点击的数据的id
window.location.href = "info.html?id=" + toOther
})
}
}
setTimeout(toInfo, 100)
动态生成的页面有延迟所以包装成函数，设置延迟，可以正常获取到元素并设置点击事件使用window.location.href = "info.html?id=" + toOther，实现页面跳转
二、点击一个链接打开一个新的页面时，传递一个id给新的页面，在新的页面接受id，并且获取和此id相关联的json文件渲染页面
1.先写一个方法打开新的页面并传递id
//跳转页面函数
function toInfo(num, id) {
const content = document.querySelectorAll('.item-content')
for (var i = 0; i < content.length; i++) {
content[num].addEventListener('click', function() {
//获取点击的数据的id
// window.location.href = "info.html?id=" + id
window.open("info.html?id=" + id[num]) //打开新窗口
})
}
}
其中的id 和 num 是在获取本页面数据时的id数据获取页面代码如下：
// 切换页面内容函数
function getdata(num) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (num === 1) {
xhr.open("GET", "http://127.0.0.1:8000?page=" + num, true)
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let datas = JSON.parse(xhr.response)
let data = datas.letters
toOther = []
for (var i = 0; i < data.length; i++) {
$(".item-content")[i].innerHTML = data[i].content
$(".item-sender")[i].innerHTML = data[i].sender
$(".item-lastTime")[i].innerHTML = data[i].lastTime
let dataId = data[i].letterId
toOther.push(dataId)
toInfo(i, toOther)
}
}
}
}
} else {
xhr.open("GET", "http://127.0.0.1:8000/page" + num, true)
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let datas = JSON.parse(xhr.response)
let data = datas.letters
toOther = []
for (var i = 0; i < data.length; i++) {
$(".item-content")[i].innerHTML = data[i].content
$(".item-sender")[i].innerHTML = data[i].sender
$(".item-lastTime")[i].innerHTML = data[i].lastTime
let dataId = data[i].letterId
toOther.push(dataId)
toInfo(i, toOther)
}
}
}
}
}
}
在写好的路由规则获取数据，将整个页面获取的数据中的每个链接的id收集并存入toOther数组中，在获取完数据后，调用toinfo(i, toOther)方法，并把参数传入函数中，实现打开新的页面后将id传到新的页面
这样就成功将id传到新的页面了
2.在新的页面js代码，获取传来的id
//获取上个页面传来的数据
function getdata() {
var url = location.search; //获取url中"?"符后的字串,如"?p=1"
var theRequest = new Object(); //创建一个对象存储传来的数据
if (url.indexOf("?") != -1) { //判断是否传来数据
var str = url.substr(1); //去除？
strs = str.split("&"); //以&分隔字符串 获取有几个数据传来
for (var i = 0; i < strs.length; i++) {
//以键值对形式将数据存入theRequest对象
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest; //返回对象
}
方法就是使用location.search获取之后进行删减，代码不一一解释 这样就成功获取到id，
3.然后写一个请求将id传入路由规则，在路由规则里判断本地与id相关的json文件，请求并响应回页面，并渲染
//获取上个页面传来的id存入变量
var pageId = getdata().id
function firstpage(pageId) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://127.0.0.1:8000/info?id=" + pageId, true)
xmlhttp.send()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300) {
let datas = JSON.parse(xmlhttp.response)
let data = datas.letter
let repdata = data.replys[0]
console.log(data);
$('.title')[0].innerHTML = data.title
$('.sender')[0].innerHTML = data.sender
$('.postTime')[0].innerHTML = data.postTime
$('.content')[0].innerHTML = data.content
$('.repcontent')[0].innerHTML = repdata.repContent
$('.reptime')[0].innerHTML = repdata.repTime
// $('.repplace')[0].innerHTML = repdata.repTime
}
}
}
}
和前面一样使用url传参的方式url？id = xxx，把id传入路由规则
xmlhttp.open("GET", "http://127.0.0.1:8000/info?id=" + pageId, true)
之后写好路由规则
//info页面的获取
app.get('/info', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*')
var id = req.query.id
res.sendFile(__dirname + '/public/data/detail' + id + '.json')
})
使用req.query.id的方式获取传来的id，在将相关的json文件返回 req.query.id（id是你传参是设置的名字）
这样就成功准确获取到上个页面传来的id并获取到新页面的数据，然后渲染页面
如果正在写类似代码的，某个地方方法不知道的，会很有帮助 详细项目请见：
