Node创建Web服务器

服务器与浏览器之间的请求响应处理

• 请求：浏览器向服务器发送请求，请求服务器的某个文件。
• 处理：服务器接收到浏览器请求之后，找到对应的文件。
• 响应：服务器读读取出文件内容，再将文件内容返回给浏览器。

使用http模块搭建Web服务器

• http是一个系统模块，让我们能够通过简单的流程创建一个Web服务器 创建Web服务器4步骤：

1. 加载/导入/引入 http 模块
2. 创建服务器对象
3. 开启服务器
4. 监听服务器请求并进行处理

//1. 加载/导入 http 模块
const http = require('http');

//2. 创建服务器对象
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log('Server is running...');
});

//4. 监听浏览器请求并进行处理
//on：该方法用来监听事件
//参数1: 事件类型， request代表浏览器请求事件
//参数2: 当监听到浏览器请求后触发的回调函数，该函数中有两个参数 req和res
//    req（request）: 请求对象
//    res（response）: 响应对象
server.on('request', (req, res) => {
    // end方法能够将数据返回给浏览器，浏览器会显示该字符串
    res.end('Hello Nodejs');
});

不同URL显示不同内容

核心：req（请求对象）中有url属性，该属性中保存了当前请求的url地址

注意： url属性中保存的地址是没有 协议、IP、端口号，并且以 / 开头的地址 示例：

// 目标: 不同的url地址显示不同的内容

//1. 加载 http 模块
const http = require('http');

//2. 创建服务器
const server = http.createServer();

//3. 开启服务器
server.listen(3000, () => {
    console.log('server is running...');
});

//4. 监听浏览器请求
server.on('request', (req, res) => {
    //req对象的url属性中保存了当前请求的url地址
    //console.log(req.url);
    
    const url = req.url;

    if (url === '/') {
        res.end('index-page');

    } else if (url === '/admin/login') {
        res.end('login-page');

    } else if (url === '/goods/list') {
        res.end('list-page');

    } else {
        res.end('not found');
    }
})

不同url显示不同html页面

核心： fs.readFile 读取html页面内容，再将文件内容通过res.end方法返回给浏览器

//4. 监听浏览器请求
server.on('request', (req, res) => {
    //req对象的url属性中保存了当前请求的url地址
    //console.log(req.url);
    
    const url = req.url;
    
    if (url === '/') {
        //调用fs.readFile读取 index.html 页面
        //再将页面内容用res.end方法返回给浏览器
        fs.readFile('./view/index.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })

    } else if (url === '/login') {
        fs.readFile('./view/login.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })
    }
})

如何解决浏览器显示中文乱码问题

核心：使用 res（响应对象）中的 setHeader方法

// res.setHeader('content-type', 'text/html;charset=utf-8');
//4. 监听浏览器请求
server.on('request', (req, res) => {
    //req对象的url属性中保存了当前请求的url地址
    //console.log(req.url);
    
    const url = req.url;
    res.setHeader('content-type', 'text/html;charset=utf-8');
    if (url === '/') {
        res.end('首页');

    } else if (url === '/admin/login') {
        res.end('登录页');

    } else if (url === '/goods/list') {
        res.end('列表页');

    } else {
        res.end('not found');
    }
})

静态资源加载

1. 浏览器中输入地址,按下回车键发送请求.
2. 服务器找到对应的文件, 并将内容返回给浏览器.
3. 浏览器接收到服务器返回内容开始进行解析.
   • 当解析到 link 标签时,再次请求服务器,获取a.css 文件内容.
   • 当解析到 script 标签时, 再次请求服务器,获取b.js 文件内容.
   • 当解析到 img 标签,再次请求服务器,获取图片文件.

//4. 监听浏览器请求
server.on('request', (req, res) => {
    //req对象的url属性中保存了当前请求的url地址
    //console.log(req.url)
    const url = req.url;
    if (url === '/') {
        //调用fs.readFile读取 index.html 页面
        //再将页面内容用res.end方法返回给浏览器
        fs.readFile('./view/index.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })
    } else if (url === '/login') {
        fs.readFile('./view/login.html', (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })

    /**
    *核心思路: 以public开头的url地址全都可以使用一个else分支来处理
    */
    } else if (url.startsWith('/public')) {
        // url = '/public/css/a.css';
        // url = '/public/css/aa.css';
        // url = '/public/js/b.js';
        // url = '/public/img/c.jpg'
        fs.readFile('.' + url, (err, data) => {
            if (err) {
                return res.end('not found!!!');
            }
            res.end(data);
        })
    } 
})

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期精彩推荐