一个动态新闻站，如何实现页面静态化，生成变成html页面？回复～
有两种静态化，一种是真正的静态化，不过其实用缓存就可以了，就是执行这些新闻，生成 html
一种是通过 url 的重写，实现伪静态化，也就是说，客户端看上去访问的是 html 文件，实际上服务器映射到对应的 web 程序的参数，动态解析
代码示例：
动态新闻站示例代码：
后端服务器搭建 (Node.js + Express.js)：
// 1. 安装必要的依赖
// npm install express
// 2. 引入依赖
const express = require('express');
const app = express();
// 3. 创建API接口
app.get('/api/news', (req, res) => {
// 假设newsData是一个包含新闻数据的数组
const newsData = [
{ title: '新闻标题1', content: '新闻内容1' },
{ title: '新闻标题2', content: '新闻内容2' }
];
res.json(newsData);
});
// 4. 启动服务器
app.listen(3000, () => {
console.log('服务器已启动，监听端口3000');
});
前端页面 (HTML + JavaScript)：
<!DOCTYPE html>
<html>
<head>
<title>动态新闻站</title>
</head>
<body>
<h1>新闻列表</h1>
<ul id="news-list"></ul>
<script>
// 使用Fetch API获取新闻数据
fetch('/api/news')
.then(response => response.json())
.then(newsData => {
// 使用JavaScript将新闻数据渲染到页面中
const newsList = document.getElementById('news-list');
newsData.forEach(news => {
const li = document.createElement('li');
li.innerHTML = `<h3>${news.title}</h3><p>${news.content}</p>`;
newsList.appendChild(li);
});
})
.catch(error => console.error(error));
</script>
</body>
</html>
将页面静态化为HTML页面：
后端服务器静态化路由：
// 1. 安装必要的依赖
// npm install handlebars
// 2. 引入依赖
const express = require('express');
const handlebars = require('handlebars');
const fs = require('fs');
const app = express();
// 3. 创建API接口
app.get('/static', (req, res) => {
// 假设newsData是一个包含新闻数据的数组
const newsData = [
{ title: '新闻标题1', content: '新闻内容1' },
{ title: '新闻标题2', content: '新闻内容2' }
];
// 使用Handlebars模板引擎将数据插入到HTML模板中
const template = handlebars.compile(fs.readFileSync('template.html', 'utf8'));
const html = template({ newsData });
// 将HTML字符串保存为一个文件
fs.writeFileSync('static.html', html);
res.send('静态化已完成');
});
// 4. 启动服务器
app.listen(3000, () => {
console.log('服务器已启动，监听端口3000');
});
模板文件 template.html：
<!DOCTYPE html>
<html>
<head>
<title>动态新闻站</title>
</head>
<body>
<h1>新闻列表</h1>
<ul>
{{#each newsData}}
<li>
<h3>{{this.title}}</h3>
<p>{{this.content}}</p>
</li>
{{/each}}
</ul>
</body>
</html>
使用浏览器访问 http://localhost:3000/static 即可完成页面的静态化，生成的静态页面文件为 static.html。