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

7275569-9cbb6ca8e414d9b7.png
微信公众号:Rabbit_svip

目录

  1. 返回一个静态页面

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


1、返回一个静态页面

文件目录如下所示

7275569-7afc22b9055a51c4
微信公众号: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代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Rabbit!</h1>
</body>
</html>

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

7275569-851c1ed8bb240089
微信公众号:Rabbit_svip

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

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

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

文件目录如下

7275569-b6fb7f105869a638
微信公众号: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代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Rabbit!</h1>
</body>
</html>

about.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>about</title>
</head>
<body>
    <p>about~~~~</p>
</body>
</html>

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

7275569-f18a6ed1625371e2
微信公众号:Rabbit_svip

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

7275569-e221db96d492913b
微信公众号:Rabbit_svip

以上是简单的用法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值