JavaScript结合node.js和Express框架制作项目教程详细版（三）——渲染(render)HTML页面

第一集：基础语法

第二集：详细语法与概念

首先，我们先要设置一下views

也就是寻找文件的文件夹。

const express=require("express");
const path=require("path");
const app=express();
const port=3000;
app.set("port",port);
app.listen(port,()=>console.log("server started"));
app.set("views",path.join(__dirname));

或者

const express=require("express");
const app=express();
const port=3000;
app.set("port",port);
app.listen(port,()=>console.log("server started"));
app.set("views",__dirname);

不过我也试过

const path=require("path");
console.log(path.join(__dirname)==__dirname);
console.log(path.join(__dirname)===__dirname);

最后发现他们其实是完全相同的，两个结果都是true

我们还要配置引擎，Express默认引擎是jade，我们现在要用HTML，所以得重新设置。

我们先要安装ejs模块在终端写入代码：

npm install ejs --save

复习一下，这段代码可以简写成什么样子呢？可以打在评论区里。

等到安装完成后，在index.js里输入代码：

const express=require("express");
const app=express();
const port=3000;
app.set("port",port);
app.listen(port,()=>console.log("server started"));
app.set("views",__dirname);
app.engine("html",require("ejs").__express);
app.set("view engine","html");

这样，引擎就配置完了。

我们可以用res.render来渲染页面。

const express=require("express");
const app=express();
const port=3000;
app.set("port",port);
app.listen(port,()=>console.log("server started"));
app.set("views",__dirname);
app.engine("html",require("ejs").__express);
app.set("view engine","html");
app.get("/",(req,res,next)=>{
    res.render("demo"/*文件名称*/);//渲染一个HTML文件
});

这里要注意的是render的文件名不需要后缀，只要是个HTML文件就可以。

文件名称是views路径下的，这里views是__dirname，指的是这个index.js的文件所在的路径的字符串。还有__filename是这个index.js的路径加文件名，例如:"D:\demo\index.js"，而render的文件名就是"D:\demo\demo.html"

这篇文章就到这里啦~再见！