nodejs渲染多页面
在Node.js中渲染多页面应用（MPA）可以通过多种方式实现，最简单的解决方案是使用模板引擎（如EJS、Pug等），或者通过静态文件服务结合路由来动态渲染不同的页面。几种实现方法，并提供完整的代码示例。
1. 使用模板引擎（EJS）渲染多页面
EJS（Embedded JavaScript templates）是一个轻量级的模板引擎，可以嵌入JavaScript代码到HTML中，从而动态生成页面内容。
实现步骤：
- 安装
express和ejs。 - 配置Express使用EJS作为模板引擎。
- 创建多个EJS模板文件。
- 根据路由动态渲染不同的页面。
代码示例：
bash
npm install express ejs
javascript
// app.js
const express = require('express');
const path = require('path');
const app = express();</p>
<p>// 设置模板引擎为ejs
app.set('view engine', 'ejs');</p>
<p>// 设置views目录路径
app.set('views', path.join(__dirname, 'views'));</p>
<p>// 路由：首页
app.get('/', (req, res) => {
res.render('index', { title: '首页' });
});</p>
<p>// 路由：关于我们
app.get('/about', (req, res) => {
res.render('about', { title: '关于我们' });
});</p>
<p>// 路由：联系我们
app.get('/contact', (req, res) => {
res.render('contact', { title: '联系我们' });
});</p>
<p>// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(<code>服务器已启动，访问地址 http://localhost:${PORT});
});
创建模板文件：
在views目录下创建以下文件：
- index.ejs
- about.ejs
- contact.ejs
例如，index.ejs的内容如下：
html
</p>
<title></title>
<h1>欢迎来到 </h1>
<a href="/about">关于我们</a>
<a href="/contact">联系我们</a>
<p>其他页面类似，只需更改标题和内容即可。
2. 使用静态文件服务与动态路由结合
如果不需要复杂的模板引擎，可以通过Express的静态文件服务功能，结合动态路由来实现多页面渲染。
实现步骤：
- 安装
express。 - 配置静态文件目录。
- 根据路由动态返回对应的HTML文件。
代码示例：
bash
npm install express
javascript
// app.js
const express = require('express');
const path = require('path');
const app = express();</p>
<p>// 配置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));</p>
<p>// 动态路由：首页
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});</p>
<p>// 动态路由：关于我们
app.get('/about', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'about.html'));
});</p>
<p>// 动态路由：联系我们
app.get('/contact', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'contact.html'));
});</p>
<p>// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(<code>服务器已启动，访问地址 http://localhost:${PORT});
});
创建静态HTML文件：
在public目录下创建以下文件：
- index.html
- about.html
- contact.html
例如，index.html的内容如下：
html
</p>
<title>首页</title>
<h1>欢迎来到首页</h1>
<a href="/about">关于我们</a>
<a href="/contact">联系我们</a>
<p>其他页面类似，只需更改标题和内容即可。
3. 使用Vue或React前端框架结合API接口
对于更复杂的多页面应用，可以考虑前后端分离的方式。前端使用Vue或React等框架构建页面，后端通过API接口提供数据。
实现步骤：
- 前端使用Vue或React构建多页面应用。
- 后端使用Express提供API接口。
- 前端通过AJAX请求获取数据并渲染页面。
示例：后端API接口
javascript
// app.js
const express = require('express');
const app = express();</p>
<p>// 模拟数据
const pages = {
home: { title: '首页', content: '欢迎来到首页！' },
about: { title: '关于我们', content: '我们是一家专注于技术的公司。' },
contact: { title: '联系我们', content: '请通过邮箱联系：example@example.com。' }
};</p>
<p>// API接口：获取页面数据
app.get('/api/page/:name', (req, res) => {
const pageName = req.params.name;
if (pages[pageName]) {
res.json(pages[pageName]);
} else {
res.status(404).json({ error: '页面未找到' });
}
});</p>
<p>// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(<code>服务器已启动，访问地址 http://localhost:${PORT});
});
示例：前端Vue页面
html
<!-- index.html -->
</p>
<title>多页面应用</title>
<div id="app">
<h1>{{ page.title }}</h1>
<p>{{ page.content }}</p>
<button>首页</button>
<button>关于我们</button>
<button>联系我们</button>
</div>
new Vue({
el: '#app',
data: {
page: {}
},
methods: {
fetchPage(pageName) {
fetch(`/api/page/${pageName}`)
.then(response => response.json())
.then(data => {
this.page = data;
})
.catch(error => console.error('Error:', error));
}
},
created() {
this.fetchPage('home'); // 默认加载首页
}
});
<p>以上三种实现Node.js渲染多页面的方法：
1. 使用模板引擎（EJS）：适合需要动态生成页面内容的场景。
2. 使用静态文件服务与动态路由结合：适合简单的多页面应用。
3. 使用前端框架结合API接口：适合复杂的应用场景，前后端分离。
根据具体需求选择合适的方案即可。
