express实战教程：（四）分析页面需求、ejs嵌入HTML、路由返回数据

最新推荐文章于 2024-04-17 22:54:01 发布
最新推荐文章于 2024-04-17 22:54:01 发布
阅读量551 收藏 1
点赞数
分类专栏： express nodeJS 文章标签： express nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42450794/article/details/93998644
版权
本文是Express实战教程的第四部分，主要讲解如何使用EJS模板引擎在HTML中嵌入数据。通过修改routes>index.js，处理GET请求并返回携带数据的模板。在EJS中，利用条件语句实现导航栏的动态展示，根据是否有子级展示不同的HTML片段。通过<%= %>语法读取并显示变量，实现在页面上显示传递的数据。
摘要由CSDN通过智能技术生成

先来试一下ejs

页面title改为<%=  title %>

进入routes>index.js，这个文件是路由下的主入口文件，主要作用是对路径作为响应，比如接收一个get请求或者处理post，这里res.render是处理根路径的get请求并且返回出模板index，携带一个对象数据传递给前端

查看结果：前面如期的呈现了我们传递的数据

接着来

因为是教程的关系，我们着重挑了导航栏讲，因为有子级，稍微有意思一点

最低0.47元/天 解锁文章
跳跳虎Rain
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模板引擎ejs与html,后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
weixin_31138555的博客
06-03 992
动态网页是指前端页面当中的数据内容来源于后台数据库，前端的html代码会随着后台数据的变化而变化，是动态生成的。制作动态网页有两种方式，一种方式是在后台拿到前端的html模板，利用后台模板引擎(如ejs等)在后台完成数据与html模板的拼接，最后把拼接完成的完整html代码返回给前端。但是这种工作模式会逐步走向过时，因为它不符合前后端分离的趋势。而第二种方式则更加符合我们所提倡的前后端分离的概念，...
express-ejs:Express和ejs的服务器端应用程序
03-31
在Express中集成EJS，可以方便地实现前后端分离，提高开发效率。 **Express框架** Express是基于Node.js的中间件系统，它遵循了MVC（模型-视图-控制器）架构模式。Express提供了许多实用的功能，如路由处理、...
【Node.js】ejs
小秀的博客
10-14 2197
EJS（Embedded JavaScript）是一款流行的模板引擎，可以用于在Express中创建动态的HTML页面。它允许在HTML模板中嵌入JavaScript代码，并且能够生成基于数据的动态内容。标记包裹一段JavaScript代码，可以进行循环、条件判断和其他逻辑操作。的文件夹（如果没有的话），然后在该文件夹中创建一个EJS视图文件，比如。方法来渲染EJS视图文件，并传递数据给模板。在上面的示例中，当用户访问根URL时，将渲染名为。使用EJS模板：在路由处理程序中，使用。的视图文件，并提供名为。
ejs 支持html,html引入ejs模板报错
weixin_39636987的博客
06-17 514
按照 node.js权威指南 敲得代码，引入ejs模板代码ejs代码部分function window_onload() {document.getElementById('msg').innerHTML = '';document.getElementById('msg').innerHTML = '';document.getElementById('msg').innerHTML = '';...
EJS在html中的基本使用方法
热门推荐
qq_34171965的博客
08-27 1万+
EJS的基本概念 1、输出： 在页面中输出变量值，你可以这么用： &amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;%= var01 %&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; 如果不希望变量值的内容被转义，那就这么用：&amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;%- var02 %&amp;amp;gt;&amp;
html引入另一个html
weixin_30510153的博客
02-24 564
在写页面的时候，有些东西是一样的，比如头部的导航或者尾部的标注。所以复用的东西可以写到一个文件中，之后再引入，angularjs或是jsp中都有很好的标签引入，而html没有，但是可以借助一些方式进行引入。 angularjs文件引入 angularjs 头部引入 <head> <% include configHead.ejs %> &lt...
ExpressJs-- 框架中 ejs 的安装使用（引入ejs模板、Ejs 后缀修改为 Html）
muzidigbig的博客
02-15 2740
Express 中 ejs 的安装： npm install ejs --save 或者： npm install ejs --save-dev 配置 Express 使用 ejs 模板 app.set('views', config.viewPath); 配置模板文件存放的路径 app.set('view engine', 'ejs'); 配置调...
EJS-todolist:使用EJS，Node.js，Express.js服务器端的CRUD Todo列表
05-24
在这个待办事项应用中，Express.js用于设置路由，处理HTTP请求，并将EJS模板渲染为HTML返回给客户端。 ### CRUD操作 **CRUD** 是数据库操作的基本概念，代表创建（Create）、读取（Read）、更新（Update）和删除...
express-pokedex:使用Express，Node和EJS的Pokemon pokedex应用程序
03-12
开发者可以在EJS模板中插入变量、逻辑控制和循环，当服务器端的数据变化时，页面可以自动更新。 从`express-pokedex-main`这个文件夹名来看，这很可能是项目的主目录。在这个目录下，我们可以预期找到以下关键文件...
DailyWeather:Node JS Express EJS中的天气应用程序
04-24
3. **EJS模板引擎**：EJS是一种易于学习的模板语言，它允许在HTML中嵌入JavaScript代码，动态生成页面内容。EJS通过分离视图和逻辑，提高了代码的可读性和可维护性。 4. **API调用**：为了获取天气信息，这个应用...
mushroomRESTfulRoutes：Node.js（+ Express，ejs，Mongoose）中的RESTful路由练习
02-25
4. **EJS (Embedded JavaScript) 模板引擎**: EJS是一种轻量级的服务器端模板引擎，允许开发者在HTML中嵌入JavaScript代码，动态生成页面。EJS可以帮助我们分离业务逻辑和视图层，使得页面渲染更加灵活。在项目中，...
ejs文件与html,将HTMLWebpackPlugin与EJS文件一起使用
weixin_35999626的博客
06-17 627
我想使用HTMLWebpackPlugin获取我的index.ejs模板文件,插入我的捆绑资产,并输出最终的index.ejs文件.此示例具有EJS变量,但是webpack正在解释它.如何阻止webpack替换变量？启动“模板”：Monitorwindow.config = {API_URL: ""}当您尝试运行webpack时：模板执行中的错误失败：ReferenceError：未定义API_U...
服务器怎么修改ejs的值,ejs的模版嵌套（服务器端vs浏览器端）
weixin_39869197的博客
08-09 358
转自：http://www.zhixing123.cn/jsp/33163.htmlEJS(EmbededJavascript)，是类似JSP，eRuby之类的，将代码嵌入到HTML页面中，并动态执行的一种机制。在说EJS之前，我们要区分两个EJS，一个是基于nodeJS平台运行的EJS，另外一个是在浏览器执行的EJS。当然，基于NodeJS的EJS也提供了client方式运行，但是用了一下，很别...
EJS在html中的使用之---在用node.js搭建的服务器的基本使用方法
qq_34171965的博客
08-27 1062
在用node.js搭建的服务器的基本使用方法 首先，通过控制台下载EJS的依赖插件 ejs的下载命令:npm install ejs –save 在当前目录下进行下载 1、在主文件中进行配置（我的主文件名为app.js）中引入 const ejs=require("ejs"); //ejs 的引入 app.set("views",path.join(__dirname+"/v...
JavaScript引入html页面的方法
最新发布
2301_77878296的博客
04-17 558
script的引入 JavaScript语法
ejs模板html,Ejs 模板引擎的有限使用
weixin_30838923的博客
06-16 425
Ejs，Effective js 是也。所谓，写的更少，做的更多。流浪器端的语法大概是长这样的：首先得引入ejs嘛然后使用JavaScript脚步调用，以下两种调用方式是等价的：方式1——var template = ejs.compile(str, options);template(data);方式2——ejs.render(str, data, options);options对象可以包括以...
ejs转换html,node.js – 从ejs模板生成静态HTML文件
weixin_29146779的博客
06-03 730
只要安装了EJS npm软件包,就可以编译它.var fs = require('fs'),ejs = require("ejs");function ejs2html(path, information) {fs.readFile(path, 'utf8', function (err, data) {if (err) { console.log(err); return false; }var...
webpack插件:使用HtmlWebpackPlugin在页面中使用EJS语法引用模板文件（二）
喵大嗷的博客
03-30 8183
上一篇中仅仅说了使用HtmlWebpackPlugin来处理html模板，其实该插件还支持EJS的模板语法： 那么我们就能把html页面的公用html代码拿出来成一个组件，需要的时候使用模板引入 具体怎么做呢？ 如果weboack不能直接去支持这么写，需要一个html-loader作为中介； 那么第一步需要先初始化这个loader: npn install html-loade...
用ejs写网页模板
x先生的博客
06-16 1万+
今天试着用ejs模板引擎写一些页面，虽然ejs写页面与平时html写页面基本一样，但是为了方便，一些相似的页面我们可以直接用模板。这里有两个页面，index和login页面，这两个页面的头部与脚部是一样的内容，只有中间不一样。所以用一个模板做好头部与脚部，中间部分引入就可以了。layout.ejs//layout.ejs 模板页面 <!DOCTYPE html> <html> <head>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值