ejs 相关问题

“E”代表“有效”。 EJS是一种简单的模板语言,可让您使用纯JavaScript生成HTML标记。没有关于如何组织事物的宗教信仰。没有重新发明迭代和控制流。它只是简单的JavaScript。

身份验证和 URL 缩短器 Node js 应用程序问题

提供的代码包含2个独立的应用程序。我想做的是构建一个应用程序,在应用程序运行时首先加载登录页面,然后在成功验证后,它会重定向...

回答 1 投票 0

我在 ejs 模板中解析 JSON 数据时遇到错误

语法错误:编译 ejs 时,pages\data ejs 中出现意外标记“)”。 我正在从 JSON 文件中获取具有两个字段问题和答案的 jsonData,并应用 if 条件来删除任何

回答 1 投票 0

为什么 res.render 在发布请求后不起作用?

我已经尝试解决这个问题有一段时间了。问题实际上是当我通过 fetch api 发送一个 post 请求,然后用节点 js 文件中的 post 请求捕获它时,它通常应该 ren...

回答 1 投票 0

如何在EJS模板中使用块继承我的日记

base.ejs: 我的日记 base.ejs: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Diary</title> <link rel="stylesheet" href="stylesheets/bootstrap.min.css"> <script src="javascripts/jquery.js" ></script> <script src="javascripts/bootstrap.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ }); </script> </body> index.ejs: <div class="container"> <!-- Button trigger modal --> <h1>Welcome to Your Diary</h1> <div> <span class="label label-default">What would you like to do? </span>&nbsp; <span class="label label-primary">Here are your Categories:</span>&nbsp; </div> </div> 我想要块继承 EJS 并不专门支持块,但是可以通过包含页眉和页脚来实现布局,如下所示: <%- include('header') -%> <h1> Title </h1> <p> My page </p> <%- include('footer') -%> https://github.com/mde/ejs#layouts 您可以将 base.ejs 分成两个文件,页眉和页脚,如下所示: header.ejs <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>My Diary</title> <link rel="stylesheet" href="stylesheets/bootstrap.min.css"> <script src="javascripts/jquery.js" ></script> <script src="javascripts/bootstrap.min.js"></script> </head> <body> 页脚.ejs <script type="text/javascript"> $(document).ready(function(){ }); </script> </body> </html> 有人制作了具有块继承能力的EJS(https://github.com/mafintosh/pejs) 直接来自文档(2018 年 1 月 1 日检索): 使用块很容易实现模板继承。只需声明 带有一些锚定块的 base.html: <body> Hello i am base <%{{ content }}%> </body> 然后是一个 child.html 渲染 base.html <%{ './base.html' }%> <%{ content %> i am inserted in base <%} %> 要渲染示例,只需渲染 child.html pejs.render('./child.html', function(err, result) { console.log(result); }); 看起来不错。我将在我自己的项目中尝试这个。 您可以使用 ejs-locals 或 ejs-mate 引擎进行 ejs 抱歉迟到了。我也有同样的情况。你能做的就是在对象的属性中传递你想要渲染的内容。像这样: <%- include('/partials/',{ title: 'my title', tags: [ '<h1>Hi, my name is this</h1>' ] }); %> EJS不支持块,但这是我实施的解决方案。希望有帮助。 我找到了另一个库:https://www.npmjs.com/package/express-ejs-layouts(本周下载量> 11k) 支持块继承,提取视图中的css + css并将其放置到特定位置。 您可以在上面的 NPMJS 链接中查看示例代码。 一个可能的解决方法是在你中间添加一个 div 和 include(aBlock) base.ejs: <!-- your-header --> ... <div class="main-container"> <%- include(aBlock) %> </div> ... <!-- your-footer --> 并从服务器传递变量。例如在 Express 中: app.get('/',(req,res)=>{ res.render('base', {aBlock: './home'}) }) // or app.get('/about',(req,res)=>{ res.render('base', {aBlock: './about'}) }) 鉴于home.ejs和about.ejs与base.ejs位于同一文件夹中,否则相应地修复路径

回答 6 投票 0

无法在 ejs 模板中运行 Mapbox

我正在按照课程中解释的方式执行所有操作,并键入完全相同的代码。我坚持的课程是使用 Mapbox 包来显示特定露营地的位置。所以有一个...

回答 2 投票 0

res.render() 无法正确渲染

我第一次制作 MERN 应用程序,但此 res.render() 无法正确渲染。 const express = require('express') const bodyParser = require('body-parser') const MongoClient = require('mongo...

回答 1 投票 0

如何获取对象内角色的ID

我有一系列电影,每部电影里面都有另一个角色数组。当我点击一个角色时,我想显示有关他们的各种信息(姓名、年龄等),以便......

回答 1 投票 0

如何在ejs中添加内联css

我对 EJS 没有太多经验,我确信对于以前在 EJS 工作过的人来说这将是一个非常简单的问题。 我正在开发现有项目,需要添加内联 css

回答 1 投票 0

userId:CastError:由于“BSONError”,在路径“userId”处将值“64e310ad9d821c557b4f9bc7”(类型字符串)转换为ObjectId失败

我将“id”传递给 EJS 中的隐藏输入值,但收到 bson 错误,数据仍正确存储在数据库中,但错误显示在 EJS 文件中 表格.ej...

回答 1 投票 0

Google-Charts - 使用 ejs 模板进行绘图

我想使用谷歌图表。此处给出的快速入门示例: https://developers.google.com/chart/interactive/docs/quick_start 显式定义 HTML 文件中的数据。我想做...

回答 1 投票 0

防止在引导模式打开时触发按键事件侦听器

我有一个使用 Node、Express 和 ejs 作为视图引擎构建的 Web 应用程序。在特定页面上,我有一个事件侦听器,按下按键后该事件侦听器将转到主页,如下所示: 文件。</desc> <question vote="0"> <p>我有一个使用 Node、Express 和 ejs 作为视图引擎构建的 Web 应用程序。在特定页面上,我有一个事件侦听器,按下按键后将转到主页,如下所示:</p> <pre><code>&lt;script&gt; document.addEventListener(&#34;keypress&#34;, function onPress(event) { window.location = (&#39;/home&#39;); }); &lt;/script&gt; </code></pre> <p>问题是我在该页面上还有一个按钮,按下该按钮时会显示一个包含文本输入的引导模态元素,因此当模态打开且用户尝试输入某些输入时,事件侦听器就会被触发。有没有办法在模式关闭之前忽略此事件侦听器?</p> <p>我尝试为 DOM(不包含模态)提供 tabindex 以使其可选择并将事件侦听器放在其上,但是用户必须先单击页面,然后才能触发事件侦听器,这并不理想</p> </question> <answer tick="false" vote="2"> <p>您可以使用 <pre><code>event</code></pre> 来阻止 <pre><code>input</code></pre> 中的 <pre><code>document</code></pre> 向上传播到 <pre><code>event.stopPropagation</code></pre>,这样用户输入就不会触发文档 <pre><code>keypress</code></pre> 侦听器。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener(&#34;keypress&#34;, function (event) { console.log(&#34;event&#34;, event); console.log(&#34;keyPress&#34;); }); const input = document.getElementById(&#34;user-input&#34;); input.addEventListener(&#34;keypress&#34;, function (e) { e.stopPropagation(); }); const btn = document.getElementById(&#34;hello-btn&#34;); btn.addEventListener(&#34;click&#34;, function onClick(e) { console.log(&#34;clicked btn&#34;); });</code></pre> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Sample&lt;/title&gt; &lt;meta charset=&#34;UTF-8&#34; /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;app&#34;&gt; &lt;button id=&#34;hello-btn&#34;&gt;Say hello&lt;/button&gt; &lt;input id=&#34;user-input&#34; placeholder=&#34;enter text&#34; /&gt; &lt;/div&gt; &lt;script src=&#34;src/index.js&#34;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> <p>但是,我建议不要在<pre><code>keypress</code></pre>上附加<pre><code>document</code></pre>事件。根据 MDN,它已被弃用:<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event#browser_compatibility" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event#browser_compatibility</a>。</p> </answer> <answer tick="true" vote="1"> <p>这里最好的方法是跟踪布尔变量中的 <pre><code>modalOpenState</code></pre>。当模式打开时,将其设置为 <pre><code>true</code></pre>,关闭时设置为 <pre><code>false</code></pre>。当您监听 <pre><code>keypress</code></pre> 事件时,检查 <pre><code>modalOpenState</code></pre> 是 true 还是 false,然后进行相应的重定向。</p> <p>注意:正如 Zameer 的评论还指出的那样,“keypress”事件已被弃用,并且可以随时停止工作。 MDN 建议根据要求将其替换为 <pre><code>beforeinput</code></pre> 或 <pre><code>keydown</code></pre> 事件。</p> </answer> <answer tick="false" vote="0"> <p>您可以使用下面的代码片段来检查模态是否打开或关闭。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(&#39;#myModal&#39;).hasClass(&#39;show&#39;);</code></pre> </div> </div> <p></p> <p>供参考:<a href="https://stackoverflow.com/questions/19506672/how-to-check-if-bootstrap-modal-is-open-so-i-can-use-jquery-validate">Stackoverflow</a></p> <p>如果模式已打开,只需返回即可忽略按键事件。或者,如果模式关闭,您可以调用该函数。</p> <p>例如:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(document).keypress(function (event) { if ($(&#39;#congratulationModal&#39;).hasClass(&#39;show&#39;)) return; else { if (event.key === &#34;g&#34; || event.key === &#34;G&#34;) { functionCall(&#34;green&#34;); } } });</code></pre> </div> </div> <p></p> </answer> </body></html>

回答 0 投票 0

我在显示数组内部的角色名称值时遇到问题

我正在开发 Library Express 应用程序,我正在使用虚假数据轻松在屏幕上显示值。 const 流行图书 = [ { 编号: 1, 书名:《哈利·波特》、 人物: [ ...

回答 1 投票 0

选择带有扩展、插槽并包含参数的模板引擎

我正在构建一个中等大小的 html/scss/ts 网站。由于它相当复杂,有很多重复元素(布局、重复块),我开始研究好的 SSG 选项(最终使用了 11ty...

回答 1 投票 0

Express 服务器未连接到 NodeJS 抛出错误函数

从 'react' 导入 React, { useState, useRef, useEffect } 从“../components/Client”导入用户; 从 '../components/Editor' 导入编辑器; 从 '../socket' 导入 { initSocket }; 导入操作...

回答 1 投票 0

点击 html canvas 元素后如何发送到 node.js 数据库?

我有一个 .ejs 文件,并且添加了一个画布。当我点击名为circle的html画布元素时,如何将值发送到nodejs?是否应该有一个与 fetch 一起使用的 POST 方法? 我有一个 .ejs 文件,并添加了一个画布。当我点击名为circle的html画布元素时,如何将值发送到nodejs?是否应该有一个与 fetch 一起使用的 POST 方法? <!DOCTYPE html> <html lang="en"> <head> </head> <body> <canvas id ="canvas" style="border: solid 5px blue";></canvas> <script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 1000; canvas.height = 800; var circle = new Path2D(); circle.arc(250, 75, 50, 0, 2 * Math.PI); ctx.fillStyle = "gray"; circle.closePath ctx.fill(circle); canvas.addEventListener('click', (event) => { var circle_1 = ctx.isPointInPath(circle, event.offsetX, event.offsetY) if (circle_1) { //I want to send values from here } }) </script> </body> </html> 从 html 到后端交换数据的唯一方法是使用这 02 个方法中的一个 Html 表单操作 阿贾克斯 由于您的事件不是从通用表单引发的,因此您需要ajax。所以在你的“onclick”事件中放这样的东西: 无需外部库 var xmlhttp = new XMLHttpRequest(); var theUrl = "/some/express/souter"; xmlhttp.open("POST", theUrl); xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xmlhttp.send(JSON.stringify({"foo": "bar"})); //source: https://stackoverflow.com/a/39519299/3957754 您还有另一种使用 ajax 的选择: 获取:获取:POST JSON 数据 Axios:https://javascript.plainenglish.io/how-to-use-axios-in-vanilla-javascript-2dbf176e08d4

回答 1 投票 0

node js 博客文章教程失败

我在 13:55 分钟观看 Web Dev Simplified 的教程时遇到问题。 我收到此类型错误并多次检查代码但找不到错误: 类型错误:C:\Users ame\桌面\

回答 1 投票 0

从 Express.js 应用程序中的 EJS 文件接收复选框信息(取消选中复选框)

我有一个简单的待办事项列表应用程序,它使用 Express.js、EJS 和 Body Parser。这是课程作业。它没有数据库连接,因此任务列表项在会话之间不会保留...

回答 1 投票 0

图像未使用express和ejs渲染

我对ejs不是很熟悉,我正在做一个使用它的实践项目。它以某种方式呈现除图像之外的所有内容。它使用的是快速会话中的图像,但我已经尝试过...

回答 1 投票 0

TypeError:尝试 multer 模块时出错

天才们好,我是后端技术的新手。我正在构建一个将文件和文本上传到数据库的项目,但收到一条错误消息。我使用 Nodejs 和 mongoDB 作为我的数据库。 我...

回答 1 投票 0

EJS 标签与 ChartJS?

是否可以使用EJS标签向图表添加数据?这是我当前图表的数据: var canvas = document.getElementById('myChart'); 变量数据 = { 标签:[“一”、“二月”、“三月”、“四月...

回答 3 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.