node中使用ejs

最新推荐文章于 2024-05-23 10:36:12 发布
最新推荐文章于 2024-05-23 10:36:12 发布
阅读量2.2k 收藏 7
点赞数 4
文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40526866/article/details/122744284
版权

介绍

EJS 是一套简单的模板语言，帮你利用普通的JavaScript 代码生成HTML 页面。 EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的JavaScript 代码而已。

安装ejs

npm install ejs

配置

在 app.js里配置

app.set('view engine', 'ejs')
app.set('views', __dirname + '/views')

app.set(‘view engine’, ‘ejs’)
固定写法，这是模板引擎的意思（view engine）

app.set(‘views’, __dirname + ‘/views’)
设置模板文件的存放位置，如果不设置的话，默认会从views文件夹里找

第一步 配置app.js

配置应用程序以使用 EJS 并设置索引页面和关于页面的路由。

创建一个新app.js文件并使用代码编辑器打开它并添加以下代码行：

const express = require('express')
const app = express()
const port = 3000

app.set('view engine', 'ejs')
app.set('views', __dirname + '/views')

app.get('/', (req, res) => {
  res.render('pages/index')
})

app.get('/about', (req, res) => {
  res.render('pages/about')
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

请注意代码如何使用 将视图发送给用户res.render()。需要注意的是，res.render()将在views文件夹中查找视图。所以你只需要定义，pages/index因为完整路径是views/pages/index

第二步 创建 EJS 部分

在app.js同层级目录下新建一个views文件夹，在views文件夹里面新建一个partials文件夹，partials文件夹里是重用的代码文件

在views\partials目录下新建head.ejs

<meta charset="UTF-8">
<title>EJS Is Fun</title>
<style>
  body { background: #ccc; }
</style>

在views\partials目录下继续创建一个header.ejs

<nav>
  <a href="/">EJS Is Fun</a>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

在views\partials目录下继续创建一个footer.ejs

<p>我是footer.ejs中的p标签</p>

接下来就要在index.ejs文件中引入views\partials文件夹里的.ejs文件了
在views文件夹中新建一个pages文件夹

在views\pages文件夹内新建一个index.ejs文件

使用 <%- include(‘路径’) %> 引入要使用的.ejs文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('../partials/head') %>
  </head>

  <body>
    <header>
      <%- include('../partials/header') %>
    </header>

    <main>
      我是index.ejs中的main标签
    </main>

    <footer>
      <%- include('../partials/footer') %>
    </footer>
  </body>
</html>

运行app.js node app.js或nodemon app.js

在这里插入图片描述

接下来在views\pages文件夹中创建一个 about.ejs文件

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body>

<header>
  <%- include('../partials/header' %>
</header>

<main>
  我是about页面
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

点击http://localhost:3000中的About或者直接在地址栏输入http://localhost:3000/about
在这里插入图片描述

第三步 传递数据

在app.js中给app.get('/')路由中添加以下代码行：

const express = require('express')
const app = express()
const port = 3000

app.set('view engine', 'ejs')
app.set('views', __dirname + '/views')

app.get('/', (req, res) => {
  const info = [
    { name: '张三', age: 18, gender: '男' },
    { name: '小红', age: 28, gender: '女' },
    { name: '翠翠', age: 20, gender: '女' },
  ]
  const tagline = '我是标语 tagline'
  res.render('pages/index', {info, tagline})
})

app.get('/about', (req, res) => {
  res.render('pages/about')
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

在EJS中渲染变量
显示单个变量使用<%= tagline %>.
遍历多个可以使用.forEach或 for(var i = 0; i < info.length; i++) {}

<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('../partials/head') %>
  </head>

  <body>
    <header>
      <%- include('../partials/header') %>
    </header>

    <main>
      我是index.ejs中的main标签
      <p> <%= tagline %> </p>
      <ul>
        <% info.forEach(data => { %>
          <li>
            <strong> <%= data.name %> </strong>
            <em> <%= data.age %> </em>
            <a href="#"> <%= data.gender %> </a>
          </li>
        <% }) %>
      </ul>
    </main>

    <footer>
      <%- include('../partials/footer') %>
    </footer>
  </body>
</html>

在这里插入图片描述

pages文件夹中的about.ejs将数据传递给partials文件夹中的header.ejs

这是pages/about.ejs
在这里定义了variant变量，就必须在 partials/header.ejs中使用他，否则会报错

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header', { variant: '我是 variant' }) %>
</header>

<main>
  我是about页面
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

这是partials\header.ejs

<nav>
  <a href="/">EJS Is Fun</a>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <h2>
    我是从 pages目录中的 about文件中传递过来的数据：
    <%= typeof variant !== 'undefined' ? variant : '没有传递任何值，这是默认值' %>
  </h2>
</nav>

这里使用了三目运算符typeof variant !== 'undefined' ? variant : '没有传递任何值，这是默认值'

在地址栏输入 http://localhost:3000/
在这里插入图片描述

在地址栏输入 http://localhost:3000/about
在这里插入图片描述

qq_40526866
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node.js 使用ejs模板引擎时后缀换成.html
01-01
这是一个小技巧，看着.ejs的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。 1.在app.js的头上定义ejs: 代码如下: var ejs = require(‘ejs’); 2.注册html模板引擎： 代码如下: app....
Node.js项目中调用JavaScript的EJS模板库的方法
10-22
`render`函数接收两个参数：第一个是模板字符串或模板文件的路径，第二个是一个可选的对象，用于传递需要在模板中使用的数据。 例如，如果你有一个名为`template.ejs`的文件，其中包含一些动态内容，你可以使用以下...
【Node.js】ejs
小秀的博客
10-14 2024
EJS（Embedded JavaScript）是一款流行的模板引擎，可以用于在Express中创建动态的HTML页面。它允许在HTML模板中嵌入JavaScript代码，并且能够生成基于数据的动态内容。标记包裹一段JavaScript代码，可以进行循环、条件判断和其他逻辑操作。的文件夹（如果没有的话），然后在该文件夹中创建一个EJS视图文件，比如。方法来渲染EJS视图文件，并传递数据给模板。在上面的示例中，当用户访问根URL时，将渲染名为。使用EJS模板：在路由处理程序中，使用。的视图文件，并提供名为。
node.js---EJS 模板引擎
qq_43641110的博客
03-13 233
模板引擎是分离用户界面和业务数据得一种技术。
前端入门级项目——带你实现一个全栈博客项目(Ejs+Node.js+MongoDB)
最新发布
XIAO_A_fighting的博客
05-23 631
前台：① get ’ /’ 提供首页② get ‘/p’ 提供某篇文章的描述③ post ’/submitComment‘ 表单提交文章评论④get ‘/message’获取留言板⑤post‘/submitMessage’表单提交留言内容后台:①get ‘/admin/’ 后台管理首页②get’/admin/login‘ 管理员登录界面③post’/admin/login‘ 登录接口④get ‘/admin/getComment’ 获取评论。
使用EJS实现一键自动化生成代码模版
Kylin的博客
05-21 723
前言：在使用Koa2写毕设后端API的时候，每写一个接口，需要分别在router、controller、service三个文件夹下分别创建文件，在接口很多的情况下，每次在三个文件夹下分别创建对应的文件，是一件很没有效率的事情，那有没有什么比较好的解决方案么？写一个自动生成代码文件的脚本！！！ 结合这篇：使用Koa2写接口的一般步骤进行阅读更佳 1、使用到的库 ejs：是一套简单的模板语言，帮你利用普通的 JavaScript代码HTML 页面； npm install ejs -D <.
ejs
weixin_44954172的博客
12-11 240
入门 安装 利用 NPM 安装 EJS 很简单。 $ npm install ejs Use 将模板字符串和一些数据作为参数传递给 EJS，Duang，HTML 出来了。 var ejs = require('ejs'), people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", ")...
node-ejs-blog
04-13
**描述解析：** 描述中提到“在app.js中为Mongodb连接设置UserName和Password（在开发中使用mongodb Atlas）”。这表明项目使用MongoDB作为数据库，且在开发阶段使用了MongoDB Atlas，这是一个云托管的服务，提供了...
node-ejs:使用 EJS 进行模板
06-07
在 Node.js 项目中使用 EJS，首先需要通过 npm（Node.js 包管理器）进行安装。在终端或命令行中运行以下命令： ```bash npm install ejs ``` 这将把 EJS 添加为项目的依赖项。 **创建 EJS 模板** EJS 模板通常以...
在express项目里配置ejs模板引擎
weixin_42667381的博客
08-29 338
####1.ejs配置 #####方法1 -修改app.js ```js //viewenginesetup app.set('views',path.join(__dirname,'views')); app.set('viewengine','ejs'); ```` -在views中创建ejs模板文件 #####方法2 -修改app.js ````js varejs=require("ejs") app.engine(".html...
node.js渲染ejs文件_小商品管理demo
03-06
node.js渲染ejs文件_小商品管理demo，包含静态资源和package.json
node中的ejs模板
WhyBecause的博客
06-19 561
node模板引擎有很多，这里以ejs模板为例： ejs模板引擎（服务器产生的数据，通过ejs模板动态的渲染到前端页面） 以下4步简单举例，ejs模板使用 ① npm install ejs ②新建：views----index.ejs ③配置引擎 ④响应对象的方法render来渲染视图 ...
ejs模板引擎渲染
qq_41846172的博客
09-17 1503
node的ejs模板引擎，前后端数据交互： 什么是ejs： “E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。 1.引入ejs包 cnpm/npm i ejs --save 注意：如果ejs是
nodejs express template (模版)的使用 (ejs + express)
热门推荐
Mac Track
04-23 3万+
var app=require("express").createServer(); app.set("view engine","ejs");
ejs渲染html无效,express使用ejs模板引擎渲染html文件
weixin_39933724的博客
06-03 381
小场景小知识点。在使用express过程中，按照官网教程，利用express生成器很容易初始化express项目模板。那么初始化项目之后应该如何使用ejs作为模板引擎呢？如下// 注释掉默认生成配置// view engine setup// app.set('views', path.join(__dirname, 'views'));// app.set('view engine', 'jad...
NodeJs---EJS模块
muzidigbig的博客
02-15 1473
初识 EJS 模块引擎 我们学的 EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 Html 页面上面。它是一个第三方模块，需要通过 npm 安装 https://www.npmjs.com/package/ejs 安装： npm install ejs –save / cnpm install ejs --save Nodejs 中使用： ejs.renderFile(...
ejs在nodejs项目的使用
chuqiang7899的博客
07-12 406
实例代码如下： var express = require('express'); var app = express(); app.set('view engine', 'ejs'); app.get('/', function (req, res) { res.render('i...
express模板引擎 html,Express使用html模板的详细代码
weixin_30253461的博客
06-03 284
express默认使用jade模板，可以配置让其支持使用ejs或html模板。1. 安装ejs在项目根目录安装ejs.npm install ejs2、引入ejsvar ejs = require('ejs'); //我是新引入的ejs插件3、设置html引擎app.engine('html', ejs.__express);设置视图引擎app.set('view engine', 'html'...
用ejs写网页模板
x先生的博客
06-16 1万+
今天试着用ejs模板引擎写一些页面，虽然ejs写页面与平时html写页面基本一样，但是为了方便，一些相似的页面我们可以直接用模板。这里有两个页面，index和login页面，这两个页面的头部与脚部是一样的内容，只有中间不一样。所以用一个模板做好头部与脚部，中间部分引入就可以了。layout.ejs//layout.ejs 模板页面 <!DOCTYPE html> <html> <head>
nodejs express中使用ejs具体流程
06-06
使用 EJS 模板引擎的具体流程如下： 1. 在 Node.js 项目中安装 EJS 模板引擎： ``` npm install ejs --save ``` 2. 在 Express 应用程序中设置 EJS 模板引擎： ```javascript const express = require('express'); const app = express(); app.set('view engine', 'ejs'); ``` 3. 在 views 文件夹中创建 EJS 模板文件。 4. 在 Express 的路由中使用 res.render() 方法呈现 EJS 模板： ```javascript app.get('/', function(req, res) { res.render('index', { title: 'Express', message: 'Welcome to Express' }); }); ``` 其中，第一个参数是模板文件的名称，不需要指定文件扩展名，Express 会自动寻找扩展名为 .ejs 的模板文件；第二个参数是传递给模板的数据对象，可以在模板中使用。 5. 在 EJS 模板文件中使用动态数据和逻辑代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= title %></title> </head> <body> <h1><%= message %></h1> </body> </html> ``` 其中，<%= %> 表示输出动态数据，<% %> 表示嵌入逻辑代码。 这样，当用户请求 '/' 路径时，Express 就会呈现 views 文件夹中的 index.ejs 模板，并将数据对象 { title: 'Express', message: 'Welcome to Express' } 传递给模板。模板文件中使用 <%= %> 输出数据对象中的数据，最终生成 HTML 页面返回给客户端。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值