Express 创建和使用render

最新推荐文章于 2023-12-19 08:38:38 发布

头像为自己开发微信小程序

最新推荐文章于 2023-12-19 08:38:38 发布

阅读量691

点赞数

分类专栏： Express 文章标签： express

本文链接：https://blog.csdn.net/qq_33715850/article/details/130598538

版权

Express 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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。。。。。。