使用EJS模板引擎生成购物车页面
时间: 2024-06-08 08:08:46 浏览: 10
好的,使用EJS模板引擎生成购物车页面,步骤如下:
1. 首先安装EJS模板引擎,可以使用npm命令进行安装:
```
npm install ejs --save
```
2. 在项目中创建一个名为“views”的文件夹,用于存放EJS模板。
3. 在views文件夹中创建一个名为“cart.ejs”的文件,用于生成购物车页面。
4. 在cart.ejs文件中编写HTML代码和EJS模板语句,例如:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<body>
<h1>购物车</h1>
<ul>
<% for(var i=0; i<cart.length; i++) { %>
<li><%= cart[i].name %> - <%= cart[i].price %>元</li>
<% } %>
</ul>
<p>总价: <%= total %>元</p>
</body>
</html>
```
在模板中,使用了EJS的语法,包括“<% %>”表示代码块,以及“<%= %>”表示输出变量值。
5. 在Node.js中编写代码,将购物车数据传递给模板,并生成HTML页面,例如:
```javascript
const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');
app.get('/cart', function(req, res) {
const cart = [
{ name: '商品1', price: 10 },
{ name: '商品2', price: 20 },
{ name: '商品3', price: 30 }
];
const total = cart.reduce((sum, item) => sum + item.price, 0);
res.render('cart', { cart, total });
});
app.listen(3000, function() {
console.log('Server started on port 3000');
});
```
在代码中,首先设置EJS为模板引擎,然后在“/cart”路由中将购物车数据传递给模板“cart”,并渲染生成HTML页面。
6. 运行Node.js应用程序,访问“http://localhost:3000/cart”即可查看生成的购物车页面。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)