express+ejs 的使用:修改后缀名 .ejs 、静态托管、模板路径。

// app.js  文件
/*

ejs 的使用:
    express默认就可以集成ejs ,用了express 不需要主动引入ejs;

1、安装 ejs :  npm install ejs --save
2、app.set("view engine","ejs")
3、使用: 默认加载的模板引擎的目录是 views
    res.render("index",{})
    
 */

const express = require("express");

// .ejs修改后缀为 .html ①
const ejs = require("ejs");
const app = express();
// .ejs修改后缀为 .html ② 配置引擎模板
app.engine("html", ejs.__express);

// app.set("view engine", "ejs");
// .ejs修改后缀为 .html ,之后修改view 里边模板的后缀为 .html ③
app.set("view engine", "html");

// 指定模板位置,默认模板位置在 views
// app.set("views", "bb/dd" + "/views");

// 配置静态web目录 , app.use() 是一个中间件
app.use(express.static("static"));
// app.use("/fade", express.static("static"));

app.get("/", (req, res) => {
  let slogan = "node+express+ejs";
  let h4 = "<h4>h4带标签</h4>";
  res.render("index", {
    biaoyu: slogan,
    dbq: h4,
  });
});

app.get("/news", (req, res) => {
  let userinfo = {
    name: "张三",
    age: 20,
  };
  let books = [
    { name: "《神雕侠侣》", count: 22 },
    { name: "《雪山飞狐》", count: 85 },
    { name: "《天涯明月刀》", count: 92 },
  ];
  res.render("news", {
    usrn: userinfo,
    books,
    flag: false,
    score: 96,
  });
});

// 监听端口建议写成3000端口以上
app.listen(3001);
console.log("run http://127.0.0.1:3001");

/*
一、 ejs 后缀名修改为 html :
这是一个小技巧,看着 .ejs 的后缀觉得不爽,可以使用以下方式,
将模板文件的后缀名改为我们习惯的 .html  。

1、在 app.js 的上头定义 ejs :
    var ejs = require('ejs');

2、注册 html 模板引擎代码 :
    app.engine("html", ejs._express);

3、将模板引擎换成 html :
    app.set("view engine", "html");

4、修改模板文件的后缀名为 .html 。



------------------------------------------------------------------------------------------------

二、 利用 express.static 托管静态文件

如果你的静态资源存放在多个目录下面,你可以多次调用 express.static  中间件 ;
    app.use(express.static("static"));
这样,static 目录下的文件就可以访问了,
http://127.0.0.1:3001/images/pic.jpg
http://127.0.0.1:3001/css/style.css


或者


如果你希望所有通过 express.static 访问的文件都放在一个 虚拟目录(在项目里边不存在的目录)下面,
可以通过给静态资源指定一个挂载路径的方式来实现。
    app.use("/fade",express.static("static"));
这样,就可以通过带有  /fade 前缀的地址来访问 static 目录下的文件了。
http://127.0.0.1:3001/fade/images/pic.jpg
http://127.0.0.1:3001/fade/css/style.css


三、指定模板位置,默认模板位置在 views
    app.set("views",_dirname+"/views")
_dirname : 表示当前目录,
_dirname+"/views"  : 表示模板文件放在当前目录的 views 目录里边


四、 ejs 引入模板
    <%-include("header.ejs")%>
    

 */

 

posted @ 2020-12-11 14:14  半遮  阅读(445)  评论(0编辑  收藏  举报