express教程，加载普通html页面最简易的两种方法

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文是一篇非常基础的express的使用文章，说的是加载普通的html页面的方式方法。本文适合express新人，高手请飘过。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：node@16.14.2，express@4.18.2。

准备数据

这部分内容，可以参考文字：https://newsn.net/say/express.html

这里先搭建最简单的基础代码：

let express = require("express")
let app = express();
let server = app.listen(3222, function () {
    let port = server.address().port;
    console.log(`访问地址为 http://localhost:${port}`);
});

再准备一个普通的index.html页面放在wwwroot目录下面。当然，目前代码还不能正常工作，请看接下来的内容。

方案一，直接配置静态目录

面对多个页面请求，设置这种路由匹配的方式，就显得有些麻烦了。既然，每个.html页面都是最终页面，不需要做任何修改。那么，可以直接设置一个static目录。那么，这些页面请求就直接到这个static目录下面去寻找了，省心省力。

app.use(express.static('wwwroot')); // index.html 放在这里了

这个函数的本意是设置静态资源目录，比如.css、.js以及图片类等文件。并不是用于放.html文件的。但是，这么配置，确实可以没有问题。可以把纯静态的所有的页面文件都放在这个目录下面，就相当于传统网站的wwwroot目录。这样，这个目录里面的文件，都是可以不通过路由直接访问到的。static=>wwwroot，换个名字就很好理解了。

方案二，配置路由处理页面请求

如果相对某个页面进行特殊处理，那么，也可以配置一个针对这个页面的路由。必然是get请求方式。

处理GET请求

简单直接，处理这个GET请求。

let path = require("path");
let root = path.join(process.cwd(), "wwwroot");
app.get("/index.html", function (req, res) {
    res.sendFile(path.join(root, "form.html"));
});

通配符匹配多页面

如果是匹配多个页面的话，也可以使用通配符。

let path = require("path");
let root = path.join(process.cwd(), "wwwroot");
app.get("/:name.html", function (req, res) {
    let file = path.join(root, "folder", req.params.name + ".html");
    console.log(file, req.params.name);
    res.sendFile(file);
});

模版处理

还可以对模版页面做点小的改动，再发送到客户端。

let path = require("path");
let fs = require('fs');
let root = path.join(process.cwd(), "wwwroot");
app.get("/:name.html", function (req, res) {
    let file = path.join(root, "folder", req.params.name + ".html");
    fs.readFile(file, (err, data) => {
        if (err) {
            console.log(err);
            data = "";
        }
        else {
            data = data.toString('utf-8'); //buffer->string
        }
        data = data.replace(/苏南/gm, "sunan");
        res.send(data);
    });
});

相关链接

• https://newsn.net/say/js-replace.html
• https://newsn.net/say/express.html

结束语

因为本文的需求很简单，就是简单的显示某个页面。所以，这么简单的处理就足够了。使用的场景上，可以是显示某个react页面。因为react页面大多数情况下，从实际上的效果来说，是个单页面。这种情况，直接放在静态目录下面，或者配置个简单的express路由，就可以了。

• https://newsn.net/tag/express/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。