阅读 2315

带你入坑Nodejs (二)

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

Node创建Web服务器

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

image.png

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

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

静态资源加载

image.png

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

1548650358457.png

//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流地址实现下载功能

文章分类
前端
文章标签