【Node.js】静态页面和简单的路由

微信公众号：Rabbit_svip

目录

1. 返回一个静态页面

2. 根据路由返回对应的页面

---

1、返回一个静态页面

文件目录如下所示

微信公众号：Rabbit_svip

app.js代码

const fs = require('fs');
const http = require('http');

// 创建一个f服务器
let server = http.createServer((req, res) => {

    // fs.readFile(文件路径，字符编码，回调函数)
    fs.readFile(__dirname + "/index.html", "utf-8", (err, data) => {
        if(err) throw err;

        // 响应头 response.writeHead(状态吗， 内容的格式[这里返回的文件是html])
        res.writeHead(200, {"content-type": "text/html"});

        // 响应内容
        res.write(data);

        // 响应结束
        res.end();
    })

})

// 设置端口号
server.listen(8080);
console.log('服务器已启动～～');

index.html代码

    
    


    
Rabbit!

最后，在浏览器访问 localhost:8080

微信公众号：Rabbit_svip

---

2、根据路由返回对应的页面

上面的例子中，不管访问 localhost:8080 还是 localhost:8080/xxxx ，服务器都是返回 index.html 的内容。

如果需要根据url指定返回不同的页面，这就需要引入路由这个概念了。

文件目录如下

微信公众号：Rabbit_svip

这里有2个html文件和一个js文件。

在app.js中，需要根据 url 来判断返回哪个页面

const fs = require('fs');
const http = require('http');

let server = http.createServer((req, res) => {

    // 过滤 /favicon.ico 的请求
    if(req.url !== '/favicon.ico') {
        
        // '/' 和 'index' 都返回 index.html 页面，其他都请求就返回对应的页面路径
        let getUrl = req.url === '/' ? '/index.html' : req.url;

        // fs.readFile(文件路径，字符编码，回调函数)
        fs.readFile(__dirname + getUrl + '.html', "utf-8", (err, data) => {
            if(err) throw err;

            // 响应头 response.writeHead(状态吗， 内容的格式)
            res.writeHead(200, {"content-type": "text/html"});

            // 响应内容
            res.write(data);

            // 响应结束
            res.end();
        })
    }

})

server.listen(8080);
console.log('服务器已启动～～');

index.html代码

    
    


    
Rabbit!

about.html代码

    
    


    
about~~~~

当浏览器访问 localhost:8080 或者 localhost:8080/index ，就返回 index.html页面。

微信公众号：Rabbit_svip

当访问 localhost:8080/about 时，就返回about.html页面

微信公众号：Rabbit_svip

以上是简单的用法。