手摸手带你肝 nodejs (二)

这是我参与8月更文挑战的第7天，活动详情查看:8月更文挑战

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);
        })
    } 
})
复制代码

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

往期精彩推荐

前端万字面经——基础篇

前端万字面积——进阶篇

聊一聊前端开发中最经常使用的两种管理工具

聊聊让人头疼的正则表达式

手摸手带你肝nodejs(一)

获取文件blob流地址实现下载功能