express模板引擎ejs介绍

本文介绍了Express框架中EJS模板引擎的使用,包括EJS的特点、如何配置及使用,以及如何让EJS识别HTML文件。通过EJS,开发者可以方便地将服务器端的数据与HTML结合,实现前后端分离的开发模式。
摘要由CSDN通过智能技术生成

1 :网站的工作原理
客户端传参数→ 服务器收参数 → 做业务处理→把处理结果显示在页面上。
如何显示结果到界面?
1,混合开发:
由 服务器端 拿到数据 和 html代码进行混编,在输出。
web前段的我们依旧根据后端的需求去改写代码,从而合作。但是存在的问题也比较多,因此,现在也比较新兴前后端分离的这种模式来进行开发。
2 采用分离:
前段的我们把数据丢给模板引擎,模板自己完成渲染。在输出到界面上。我们的html代码也不会被破坏,但是需要添加模板引擎的标签,最后在完成渲染就可以输出到页面上,更加简单,方便。

2 express 支持的模板引擎:(可以简单的理解为正则替换)
面前默认支持的模板引擎:
1,jade (这个模板比较简洁 html代码区别非常大)
2.ejs (ejs这个模板和html代码区别较小,个人比较喜欢使用)
简单介绍下:
1.模板问价后缀.ejs
2.开始<% 结束 %>
用这个标签 包裹进来的代码 都会被js模板内部处理
而变成真实数据
<%= %>这种标签等于号表示原样输出,html代码标签代码会原样输出面上。如果是<%- %>这种表示只输出内容,html标签不输出。
3. pug (喜欢的朋友可以去下载哈)
4. handerbar (喜欢的朋友可以去下载哈)
3.安装ejs模板引擎的步骤
1:npm install ejs --save 安装下载
(在cmd中输入npm install ejs --save下载 可以直接下载到你的express框架中 去,这样就不用在手动移动了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,使用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”即可查看生成的购物车页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值