Express框架中使用ejs模板引擎

最新推荐文章于 2024-05-05 21:10:49 发布
最新推荐文章于 2024-05-05 21:10:49 发布
阅读量358 收藏 1
点赞数
分类专栏： Node.js 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu19721018/article/details/115426107
版权

Express中使用Ejs模板引擎

引入

 安装：npm install ejs --save
 在app.js中引入express，设置ejs模板，并配置路由参数，代码如下：

	//引入express
	var express = require("express");
	var app = express();
	//配置模板引擎
	app.set("view engine","ejs");
	//配置路由参数
	app.get("/",function(req,res){
		//将数据渲染到news.ejs页面中，默认是从当前views目录去寻找news.ejs文件
		res.render("news",{
			"news" : ["我是数据1","我是数据2","我是数据3"]
		});
	});
	app.listen(3000);

 在ejs页面中引入即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <%for(let i=0;i<news.length;i++){%>
            <li><%=news[i]%></li>
        <%}%>        
    </ul>
</body>
</html>

 默认模板位置是在views目录下，我们可以通过设置来更改模板位置，加入语句app.set('views',__dirname+'/目录路径')即可

Ejs的基本语法

  • 引入模板<%- include (‘footer.ejs’) %>，可以声明公共ejs模板组件，在需要的页面将其引入
  • 绑定数据：<%=h%>
  • 绑定html数据：<%-h%>
  • Ejs模板中判断语句:
			<% if(true){ %>
			<div>true</div>
			<%} else{ %>
			<div>false</div>
			<%} %>
  • Ejs模板中循环数据
	<%for(var i=0;i<list.length;i++) { %>
		<li><%=list[i] %></li>
	<%}%>

 分享结束，有帮助的话就点个赞呗~

我的名字豌豆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
express使用ejs模板引擎
weixin_53125457的博客
03-22 329
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 文件夹内自动生成文件
vs code express jabe转换成ejs或html
时意
09-23 858
当我用vscode 安装好express框架后 发现一个问题 views里面都jabe文件 我需要改成ejs 或者html 才能继续 因为jade 没看明白是啥 步骤1 安装ejs cnpm i ejs -S 步骤2 修改app.js文件俩个地方 1）加入ejs模块 varejs=require('ejs'); 2）修改 ejs app.set('view...
express + mongodb 搭建一个简易网站 （三）
weixin_30651273的博客
07-18 93
express + mongodb 搭建一个简易网站 （三） 前面已经实现了基本的网站功能，现在我们就开始开搞一个完整的网站，现在整个网站的UI就是下面的这个样子。 我们网站的样子就照着这个来吧。 1.为了便于维护，还是在views里面再建一个文件夹吧，就叫components吧，这个文件夹中维护的就是我们要用的公共组件。那好，我们就先在components中新建两个文件heade...
2024年Web前端最新nodejs项目实战教程10——EJS模板引擎、get、post，附带学习经验
最新发布
2401_84434954的博客
05-05 426
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它关键代码：msg:msg,list:list})ejs支持往./views/login.ejs文件中传递msg、list或者其他任意自定义的数据，创建ejs文件，并写入数据（2）创建login.ejs文件：执行getapp.js关键代码：res.end(‘get请求获取成功’);浏览器地址添加news?
EJS模板在express中的使用攻略及应用实例（建议收藏）
张培跃的个人博客
04-06 1828
一、什么是ejs? ejs当中的"E" 代表 “effective”，即【高效】。EJS 是一套非常简单的模板语言，可以帮你利用普通的 JavaScript 代码快速生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。 二、快速使用EJS 1、安装ejs与express cnpm install ejs expre...
创建ejs项目_节点和EJS项目（1）
cumt30111的博客
07-29 499
创建ejs项目Hello! In the last articles, we spoke much about EJS template engine. Let's take some time and see how it can be applicable in a small project? 你好！ 在上一篇文章中，我们谈到了EJS模板引擎。 让我们花一些时间，看看如何将其应用于小型项目...
node.js ejs_如何在Node.js应用程序中使用EJS模板
cumi6497的博客
07-07 397
node.js ejsby Jennifer Bland 詹妮弗·布兰德(Jennifer Bland) 如何在Node.js应用程序中使用EJS模板 (How to use EJS Templating in a Node.js Application) EJS, embedded javascript, is a templating language. EJS combines data...
详解在express站点中使用ejs模板引擎
01-02
使用 vs创建的express站点，默认使用的是jade模板引擎，但是我不太喜欢这种方式，因为我觉得html本身的语义特性是我喜欢的，另外html本身也足够简洁，使用html自身做为模板语言更符合我的喜好，所以我选择ejs。...
Express框架中如何引用ejs模板引擎
12-14
最近在研究Express，看到了一些模板引擎，该文档就是在网络上看到的一些例子结合本人实际应用的例子整理形成的文档，对于初学者应该是有一定帮助，更多交流欢迎访问我的“伟博小城”，访问地址：...
在 Express 中使用模板引擎
09-03
在Express框架中，模板引擎是用于动态生成HTML或其他Web页面格式的关键组件。模板引擎允许开发者定义页面结构，并在运行时填充动态数据。Express自身并不包含内置的模板引擎，但它支持多种第三方模板引擎，如Jade...
node.js 使用ejs模板引擎时后缀换成.html
10-24
在Express框架中，我们可以使用`app.engine()`方法来注册自定义的模板引擎。在这个例子中，我们将`.html`文件关联到EJS的`__express`函数： ```javascript app.engine('html', ejs.__express); ``` `ejs.__express...
使用express + MongoDB + ejs模板引擎实现的简易博客系统.zip
08-03
这是一个基于Node.js、Express框架、MongoDB数据库以及EJS模板引擎构建的简易博客系统的实现示例。这个项目可能是一个毕业设计项目，旨在帮助学生或开发者理解如何将这些技术结合在一起，创建一个基本的Web应用程序...
express的layout布局使用
weixin_34366546的博客
06-21 470
安装express-ejs-layouts npm install express-ejs-layouts 新建默认layout layout.ejs <!DOCTYPE html> <html> <head> <title><%= title %></title&...
如何在express中使用ejs
qq_47761388的博客
08-04 1012
使用ejs的步骤 下载安装 在终端中` npm i ejs` 指令即可下载 引入ejs 在当前所使用的js界面中加入 let ejs = require("ejs) 此行代码表示引入ejs 准备一个模板 准备一个模板，并且必须要把模板放到views文件夹下面 一个html文件就可以充当一个模板 只是后缀必须改成ejs r如：index.ejs 告诉express我们使用的模板引擎是ejs 通过下面两行代码实现 var app = express(); app.set('view eng
服务端（七）express 框架中的 ejs 模板引擎
微光无限的博客
04-06 698
服务端（七）express 框架中的 ejs 模板引擎
【Node.js】ejs
小秀的博客
10-14 2090
EJS（Embedded JavaScript）是一款流行的模板引擎，可以用于在Express中创建动态的HTML页面。它允许在HTML模板中嵌入JavaScript代码，并且能够生成基于数据的动态内容。标记包裹一段JavaScript代码，可以进行循环、条件判断和其他逻辑操作。的文件夹（如果没有的话），然后在该文件夹中创建一个EJS视图文件，比如。方法来渲染EJS视图文件，并传递数据给模板。在上面的示例中，当用户访问根URL时，将渲染名为。使用EJS模板：在路由处理程序中，使用。的视图文件，并提供名为。
express-EJS模板引擎
weixin_43167546的博客
04-05 502
EJS是一个高效的JavaScript的模板引擎。模板引擎是分离用户界面和业务数据的一种技术。输出非转义的数据到模板上。输出转义的数据到模板上。
EJS模板引擎介绍和使用
一个普通人的博客
03-25 2064
EJS（Embedded JavaScript）是一种简单的模板引擎，可以通过JavaScript在客户端和服务器端生成HTML页面。它可以与Node.js和Express框架一起使用。以下是EJS模板引擎的详细介绍及使用。
node基础之五：ejs 模板引擎
weixin_64684095的博客
09-04 232
node.js重要知识点总览
使用express框架，实现新闻模板功能：所有新闻，新闻分类，新闻详情，新闻搜索
05-25
好的，下面我为您介绍如何使用Express框架实现新闻模板功能： 1.创建Express项目 首先，我们需要在本地创建一个Express项目，可以使用以下命令： ``` mkdir news-template cd news-template npm init npm install express --save ``` 2.创建路由 在项目根目录下创建一个`routes`文件夹，并在其中创建以下文件： - `index.js`：用于显示所有新闻列表 - `category.js`：用于显示特定类别的新闻列表 - `details.js`：用于显示特定新闻的详细信息 - `search.js`：用于搜索新闻 在`routes`文件夹中创建以上四个文件，并编写相应的路由处理程序。 例如，在`index.js`中，我们可以编写以下代码： ``` const express = require('express'); const router = express.Router(); router.get('/', (req, res) => { res.send('显示所有新闻列表'); }); module.exports = router; ``` 在`category.js`中，我们可以编写以下代码： ``` const express = require('express'); const router = express.Router(); router.get('/:category', (req, res) => { const { category } = req.params; res.send(`显示${category}类别的新闻列表`); }); module.exports = router; ``` 在`details.js`中，我们可以编写以下代码： ``` const express = require('express'); const router = express.Router(); router.get('/:id', (req, res) => { const { id } = req.params; res.send(`显示ID为${id}的新闻详细信息`); }); module.exports = router; ``` 在`search.js`中，我们可以编写以下代码： ``` const express = require('express'); const router = express.Router(); router.post('/', (req, res) => { const { keyword } = req.body; res.send(`搜索关键词为${keyword}的新闻`); }); module.exports = router; ``` 3.创建视图 在项目根目录下创建一个`views`文件夹，并在其中创建以下文件： - `index.ejs`：用于显示所有新闻列表 - `category.ejs`：用于显示特定类别的新闻列表 - `details.ejs`：用于显示特定新闻的详细信息 - `search.ejs`：用于搜索新闻 在`views`文件夹中创建以上四个文件，并编写相应的HTML代码。 例如，在`index.ejs`中，我们可以编写以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>所有新闻</title> </head> <body> <h1>所有新闻</h1> </body> </html> ``` 在`category.ejs`中，我们可以编写以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= category %>类别的新闻</title> </head> <body> <h1><%= category %>类别的新闻</h1> </body> </html> ``` 在`details.ejs`中，我们可以编写以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ID为<%= id %>的新闻</title> </head> <body> <h1>ID为<%= id %>的新闻</h1> </body> </html> ``` 在`search.ejs`中，我们可以编写以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>搜索新闻</title> </head> <body> <h1>搜索新闻</h1> <form method="post" action="/search"> <label for="keyword">关键词：</label> <input type="text" name="keyword" id="keyword"> <button type="submit">搜索</button> </form> </body> </html> ``` 4.注册路由 在项目根目录下的`app.js`文件中，我们需要注册路由，并设置模板引擎。 例如： ``` const express = require('express'); const app = express(); // 设置模板引擎 app.set('view engine', 'ejs'); app.set('views', __dirname + '/views'); // 注册路由 const indexRouter = require('./routes/index'); const categoryRouter = require('./routes/category'); const detailsRouter = require('./routes/details'); const searchRouter = require('./routes/search'); app.use('/', indexRouter); app.use('/category', categoryRouter); app.use('/details', detailsRouter); app.use('/search', searchRouter); // 启动服务器 app.listen(3000, () => { console.log('Server is running on port 3000!'); }); ``` 5.访问页面 现在，我们可以在浏览器中访问以下页面： - 所有新闻：http://localhost:3000/ - 特定类别的新闻：http://localhost:3000/category/体育 - 特定新闻的详细信息：http://localhost:3000/details/123 - 搜索新闻：http://localhost:3000/search 以上就是使用Express框架实现新闻模板功能的步骤，希望对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值