Это седьмой день моего участия в августовском испытании обновлений, подробности о мероприятии:Испытание августовского обновления

Node создает веб-сервер

Обработка ответа на запрос между сервером и браузером

Запрос: браузер отправляет запрос на сервер, чтобы запросить определенный файл с сервера.
Обработка: после того, как сервер получает запрос браузера, он находит соответствующий файл.
Ответ: Сервер считывает содержимое файла, а затем возвращает содержимое файла браузеру.

Используйте модуль http для создания веб-сервера

http — это системный модуль, который позволяет нам создать веб-сервер с помощью простого процесса.

Создайте веб-сервер за 4 шага:

Загрузить/импортировать/импортировать модуль http
Создать серверный объект
запустить сервер
Прислушивайтесь к запросам сервера и обрабатывайте их

//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);
        })
    }
})

Как решить проблему, из-за которой браузер отображает искаженные китайские символы

Ядро: используйте метод setHeader в res (объект ответа)

// 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');
    }
})

Статическая загрузка ресурсов

Введите адрес в браузере и нажмите клавишу Enter, чтобы отправить запрос.
Сервер находит соответствующий файл и возвращает содержимое браузеру.
Браузер получает содержимое, возвращенное сервером, и начинает парсинг.
- Когда тег ссылки анализируется, сервер снова запрашивается для получения содержимого файла 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);
        })
    } 
})

Нравится и поддержите, оставьте в руке стойкий аромат, и будьте почитаемы, шевелите своими ручонками, чтобы заработать состояние, спасибо, что оставили свои следы.

Прекрасная рекомендация в прошлом

Front-end Swastika — Основы

Внешний вид 4D-зоны — расширенный

Поговорим о двух наиболее часто используемых инструментах управления во фронтенд-разработке.

Разговор о раздражающих регулярных выражениях

Прикоснись к своей руке и возьми свою печень nodejs (1)

Получите адрес потока большого двоичного объекта файла для реализации функции загрузки.