Express 创建和使用render

news2024/11/13 15:18:26

1 创建项目 

npm install -g express-generator  

express -e myapp //创建myapp项目

npm i //安装依赖

npm i nodemon -D //安装nodemon

修改package.json

 "scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon ./bin/www"
  },

运行 npm run dev

2 安装ejs

npm i ejs --save

修改脚手架app.js默认配置,原配置

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set('view engine', 'jade');
/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("home", {
    title: "首页",
  });
});

加载的是views下面的home.jade文件

修改配置render加载ejs文件

// view engine setup
app.set("views", path.join(__dirname, "views"));
// app.set('view engine', 'jade');
app.set("view engine", "ejs");

 <%- include ("footer.ejs") %></div> 引用foorer.ejs

home.ejs

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta name="robots" content="noindex,nofollow" />
    <meta name="generator" content="Halo 1.5.2" />
    <link rel="icon" href="/favicon.ico" />
    <title><%=title%></title>
    <script defer="defer" src="../javascripts/home.js"></script>
    <link href="../stylesheets/home.css" rel="stylesheet" />
  </head>
  <body>
    <%- include ("base.html") %></div>
    <div>我们是Homeejs 
    <%- include ("footer.ejs") %></div>
  </body>
</html>

footer.ejs

<footer>All content copyright <%= new Date().getFullYear() %> .</footer>

base.html

<h1>我是base.html</h1>

 浏览器显示

 

ejs里面即可引用ejs文件又可以引用html文件。

3 直接renderhtml文件

修改app.js

// view engine setup
app.set("views", path.join(__dirname, "views"));
// app.set('view engine', 'jade');
// app.set("view engine", "ejs");
app.engine(".html", require("ejs").__express);
app.set("view engine", "html");

此时是可以直接渲染home.html的。

但是使用<%- include ("base.html") %>会导致报错,无法渲染,可以使用<%- include ("footer.ejs") %>

具体解决办法目前还没有找到

//TODO。。。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/509274.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

接入sentry安装@sentry/webpack-plugin依赖报错(附遇到的其他小问题)

背景 项目需要接入sentry&#xff0c;使用的是vue2 vue-cli构建的&#xff0c;那么需要使用webpack构建的方式 见sentry官方文档 问题和尝试思路 根据文档安装sentry/webpack-plugin依赖的时候一直失败 出现两种报错 第一种&#xff1a;下载安装包https://downloads.sent…

C++跨平台开发工具CLion——使用任意编译器快速指南

CLion是一款专为开发C及C所设计的跨平台IDE&#xff0c;它是以IntelliJ为基础设计的&#xff0c;包含了许多智能功能来提高开发人员的生产力。这种强大的IDE帮助开发人员在Linux、OS X和Windows上来开发C/C&#xff0c;同时它还使用智能编辑器来提高代码质量、自动代码重构并且…

【Nginx基础篇】nginx的基本配置解析和应用场景

目录 一、最小配置 二、虚拟主机 一、最小配置 原始的配置文件 #user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024; }…

【前后端分离项目】搭建前后端分离项目框架(vue前端)

创建项目文件夹 创建文件夹&#xff08;框架&#xff09;&#xff0c;可以在里面增加页面实现自己的需求。 在官网下载nodejs 官网地址&#xff1a;https://nodejs.org/en nodejs中自带了npm包&#xff0c;npm负责管理依赖&#xff0c;将nodejs下载完成后&#xff0c;即可使…

开关电源基础04:新型开关电源拓扑(1)-拓扑的改进

说在开头&#xff1a;关于互补原理 玻尔在挪威滑雪之余好好的思考了波粒问题&#xff0c;并逐渐完善了这个新想法&#xff1b;当他看到海森堡的论文时&#xff0c;自然而然地用这种想法去印证整个结论。他问海森堡&#xff1a;这种不确定性是从粒子的本性而来&#xff0c;还是…

软件架构:构建软件架构SOA

Web服务一种作为炙手可热的技术&#xff0c;应用到企业的IT系统和商业流程之中&#xff0c;并给企业带来直接的经济效益&#xff0c;一直以来得到了国内外企业管理者的推崇。而在近两年&#xff0c;伴随着企业需求的不断变化&#xff0c;一种被誉为Web服务的技术架构&#xff0…

【Flowable】Flowable任务分配和流程变量

1.任务分配 (1).固定分配 固定分配就是我们前面介绍的&#xff0c;在绘制流程图或者直接在流程文件中通过Assignee来指定的方式 (2).表达式分配 Flowable使用UEL进行表达式解析。UEL代表Unified Expression Language&#xff0c;是EE6规范的一部分.Flowable支持两种UEL表…

基于云平台的光伏监控系统是怎样的?

摘要&#xff1a;针对国内光伏发电监控系统的研究现状&#xff0c;文中提出了基于云平台的光伏发电监控体系。构建基于B/S架构的数据实时采集与推送&#xff0c;以SSH(strutsspringhibernate)作为Web开发框架&#xff0c;开发基于云平台的光伏发电远程监控系统。在平台部署过程…

开关电源基础04:新型开关电源拓扑(2)-新型电源拓扑

说在开头&#xff1a;关于量子理论 我们再来回顾下量子理论对双缝干涉的解释&#xff1a;当电子通过狭缝&#xff0c;假如我们采用任其自然的观测方式&#xff0c;让它不受干扰地在空间中传播&#xff0c;这时候电子的波动性就占据了上风&#xff0c;它于是以某种方式同时穿过…

农业机器人技术栈

结构光 https://www.youtube.com/watch?vmSsnf5tqXnA 局部路径规划算法 光流法 统计像素 分辨前景背景 绿色是我们比较关注的 unet做图像分割 运动比较剧烈的是前景 特征点匹配 大豆农田点云建图 农田路况复杂 光流计算量比较大&#xff0c;可以捕捉运动比较大的物体 分割检…

ChatGPT直接访问,Edge浏览器-免费ChatGPT保姆级教程

人工智能大浪潮已经来临&#xff0c;对于ChatGPT&#xff0c;我觉得任何一个玩互联网的人&#xff0c;都应该重视起来&#xff0c;用起来。但是国内使用需要解决科学上网、注册、收费等繁琐问题。 所以&#xff0c;今天这篇文章就来推荐一个插件&#xff0c;无需任何繁琐操作&…

日撸 Java 三百行day48

文章目录 说明day48 堆排序1.基本思路2.代码 说明 闵老师的文章链接&#xff1a; 日撸 Java 三百行&#xff08;总述&#xff09;_minfanphd的博客-CSDN博客 自己也把手敲的代码放在了github上维护&#xff1a;https://github.com/fulisha-ok/sampledata day48 堆排序 1.基本…

【虚幻引擎】UE5 C++编译和打包失败的原因

一、出现The required library hostfxr.dll could not be found 错误 原因是缺少.NET Core3.1 解决办法一&#xff1a;可以去官网下载https://dotnet.microsoft.com/en-us/download/dotnet/3.1 解决方案二&#xff1a;打开Visual Studio Installer&#xff0c;选择单个组件&…

计算机Intel CPU体系结构分析

前段meldown漏洞事件的影响&#xff0c;那段时间也正好在读Paul的论文关于内存屏障的知识&#xff0c;其中有诸多细节想不通&#xff0c;便陷入无尽的煎熬和冥想中&#xff0c;看了**《计算机系统结构》、《深入理解计算机系统》、《大话处理器》**等经典书籍&#xff0c;也在g…

ISO9001是什么?ISO9000和ISO9001有何关系?

ISO 9000和ISO 9001是质量管理领域的两个重要标准。它们被用来确保组织能够提供符合客户要求的产品和服务&#xff0c;同时不断提高其业务效率和质量水平。本文将探讨ISO 9000和ISO 9001之间的关系&#xff0c;解释它们的区别以及为什么对企业非常重要。 什么是ISO9000和ISO90…

Windows安装Maven并配置环境

Windows下安装和配置Maven的步骤 介绍&#xff1a;步骤&#xff1a;步骤 1&#xff1a;下载Maven步骤 2&#xff1a;解压缩Maven分发包步骤 3&#xff1a;设置环境变量步骤 4&#xff1a;验证安装 结论&#xff1a; 介绍&#xff1a; Maven是一个非常流行的构建和项目管理工具…

Tunel技术是什么?

IPv4 用 32 位整数描述地址&#xff0c;最多只能支持 43 亿设备&#xff0c;显然是不够用的&#xff0c;这也被称作 IP 地址耗尽问题。为了解决这个问题&#xff0c;有一种可行的方法是拆分子网。拆分子网&#xff0c;会带来很多问题&#xff0c;比如说内外网数据交互&#xff…

银行业数字化运营体系(上):渠道触点矩阵建设

数字化运营体系是构建从获客、激活、留存、营收转化到转介的客户全生命周期的运营体系&#xff0c;推动线上产品和业务运营的数字化与智能化。 随着互联网技术的不断发展&#xff0c;移动设备已经成为人们日常生活中不可或缺的一部分&#xff0c;越来越多的用户在数字化渠道进行…

vmware 详细安装教程

一.VM是什么&#xff1f; VMware Workstation是一个“虚拟 PC”软件。它使你可以在一台机器上同时运行二个或更多 Windows、DOS、LINUX 系统。与“多启动”系统相比&#xff0c;VMWare 采用了完全不同的概念。多启动系统在一个时刻只能运行一个系统&#xff0c;在系统切换时需…

软考A计划-重点考点-专题六(数据库知识)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…