express使用ejs模板引擎

本文介绍了如何在Node.js项目中使用Express框架集成EJS模板引擎。首先,通过初始化文件夹和安装Express插件开始。接着,讨论了在不同环境(开发、生产、测试)下的构建命令。然后,利用nodemon实现文件变动自动重启服务器。创建views文件夹作为模板文件的根目录,并注册EJS模板引擎。最后,给出一个EJS模板引擎渲染的实例。
摘要由CSDN通过智能技术生成

1、在项目的文件目录下打开命令窗口 初始化文件夹 通过 npm init -y生成依赖的文件 paclage.json

2、安装express框架插件
命令行:npm i express --save

【注意】在项目开发过程中,有不同的环境
开发环境:dev (development) 执行命令为:npm run dev
生产环境:bulid(prodcution) 执行命令为:npm run bulid
测试环境:test(test): 执行命令为:npm run test

文件夹内自动生成文件
在这里插入图片描述
3、通过 npm i nodemon --save命令安装一个nodemon插件,服务器会随时根据文件的保存后自动更新,在文件内配置上这个内容,就可以使用
在这里插入图片描述
4、在命令行下载ejs插件,输入命令:npm i ejs --save,

5、 在项目的根目录下 创建一个 views 的文件夹; 该文件夹自动默认为express 的模板文件的根目录, 创建的文件扩展名为 .ejs ;
【注意】创建的文件夹名为views,但是在注册模板引擎时(app.set('view engine','ejs'))这个为view,不带s
在这里插入图片描述
6、注册模板引擎

app.set('view engine','ejs')

7、渲染模板

app.get('/',(req,res) =>{
   
// templateUrl 模板地址 不需要添加views(views 文件夹是express默认的路径)
    //  data 就是模板渲染的数据
    //  通过 res.render(templateUrl, data) 方法渲染末班
eg:
  let list = [
        {
   
            title:'电影1',
            time:120,
            show:true,
        
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值