nodejs--querystring、res返回数据：返回json格式，返回html格式、接收request body-流

目录

一、querystring

1.1 什么是querystring

1.2 示例

1.3 querystring-hash

1.4 querystring-结构化与非结构化

二、res返回数据

2.1 返回json格式

2.2 返回html格式

2.3 接收request body-流

---

一、querystring

1.1 什么是querystring

url问号?后面的都是querystring(也叫url参数)

&进行分割，key=value形式，可继续扩展

querystring的作用：

动态网页的基石

如何利用querystring实现动态网页：

服务端拿到querystring

根据不同的querystring，返回不同的内容

即变化querystring，就是变换内容（只要服务端支持）

---

1.2 示例

//获取http模块
const http = require('http');

// 执行 创建服务
const server = http.createServer((req, res) => {
    //获取url
    const url = req.url;

    //分割 /api/list/a=100&b=200
    const path = url.split('?')[0];

    const queryStr = url.split('?')[1]; //a=100&b=200

    //
    const method = req.method

    //解析querystring
    const query = {};
    queryStr && queryStr.split('&').forEach(item => {
        //item 即a=100的形式
        const key = item.split('=')[0];
        const val = item.split('=')[1];
        query[key] = val;
    });
    // console.log('query is:', query);//query is: { a: '100', b: '200' }

    // console.log('url is:', url);
    // console.log('method is:', method);

    //定义路由：模拟获取留言板列表
    if (path === '/api/list' && method === 'GET') {
        //通过filterType来判断是显示所有的留言还是只显示自己的留言
        if (query.filterType === '1') {
            res.end('this is list router,all');
        }
        if (query.filterType === '2') {
            res.end('this is list router,mine');
        }
        res.end('this is list router');
    }

    //定义路由，模拟创建留言
    if (path === '/api/create' && method === 'POST') {
        res.end('this is create router');
    }

    res.end('404');
});

//监听端口
server.listen(3000);
console.log('http请求已经被监听，3000端口');

---

1.3 querystring-hash

querystring-hash不能传到服务端

 示例：

//获取http模块
const http = require('http');
const querystring = require('querystring');

// 执行 创建服务
const server = http.createServer((req, res) => {
    //获取url
    const url = req.url;

    //分割 /api/list/a=100&b=200
    const path = url.split('?')[0];

    const queryStr = url.split('?')[1]; //a=100&b=200

    //
    const method = req.method

    //解析querystring
    // const query = {};
    // queryStr && queryStr.split('&').forEach(item => {
    //     //item 即a=100的形式
    //     const key = item.split('=')[0];
    //     const val = item.split('=')[1];
    //     query[key] = val;
    // }); 替换成
    const query = querystring.parse(queryStr || '');

    console.log('query is:', query); //query is: { a: '100', b: '200' }

    // console.log('url is:', url);
    // console.log('method is:', method);

    //定义路由：模拟获取留言板列表
    if (path === '/api/list' && method === 'GET') {
        //通过filterType来判断是显示所有的留言还是只显示自己的留言
        if (query.filterType === '1') {
            res.end('this is list router,all');
        }
        if (query.filterType === '2') {
            res.end('this is list router,mine');
        }
        res.end('this is list router');
    }

    //定义路由，模拟创建留言
    if (path === '/api/create' && method === 'POST') {
        res.end('this is create router');
    }

    res.end('404');
});

//监听端口
server.listen(3000);
console.log('http请求已经被监听，3000端口');

 注意：hash实现不了 这样的功能，因为hash根本传不到服务端里去

---

1.4 querystring-结构化与非结构化

例如，

以数组或对象的形式： 结构化

以字符串的形式：非结构化

---

二、res返回数据

2.1 返回json格式

GET请求：

//获取http模块
const http = require('http');
const querystring = require('querystring');

// 执行 创建服务
const server = http.createServer((req, res) => {
    //获取url
    const url = req.url;

    //分割 /api/list/a=100&b=200
    const path = url.split('?')[0];

    const queryStr = url.split('?')[1];

    //
    const method = req.method


    const query = querystring.parse(queryStr || '');

    //定义路由：模拟获取留言板列表
    if (path === '/api/list' && method === 'GET') {
        //返回结果
        const result = {
            error: 0,
            data: [
                { user: 'zhangsan', content: '留言1' },
                { user: 'lisi', content: '留言2' },
                { user: 'wangwu', content: '留言3' }
            ]
        };
        res.writeHead(200, { 'Content-type': 'application/json' });
        res.end(JSON.stringify(result));
    }

    // res.end('404');
    res.writeHead(404, { 'Content-type': 'text/plain' });
    res.end('404 Not found');
});

//监听端口
server.listen(3000);
console.log('http请求已经被监听，3000端口');

POST请求： 

//获取http模块
const http = require('http');
const querystring = require('querystring');

// 执行 创建服务
const server = http.createServer((req, res) => {
    //获取url
    const url = req.url;

    //分割 /api/list/a=100&b=200
    const path = url.split('?')[0];

    const queryStr = url.split('?')[1];

    //
    const method = req.method


    const query = querystring.parse(queryStr || '');


    //定义路由，模拟创建留言
    if (path === '/api/create' && method === 'POST') {
        // res.end('this is create router');
        //返回结果
        const result = {
            error: 0,
            message: '创建成功',
            data: [
                { user: 'zhangsan', content: '留言1' },
                { user: 'lisi', content: '留言2' },
                { user: 'wangwu', content: '留言3' }
            ]
        };
        res.writeHead(200, { 'Content-type': 'application/json' });
        res.end(JSON.stringify(result));
    }

    // res.end('404');
    res.writeHead(404, { 'Content-type': 'text/plain' });
    res.end('404 Not found');
});

//监听端口
server.listen(3000);
console.log('http请求已经被监听，3000端口');

 

---

2.2 返回html格式

示例：

//获取http模块
const http = require('http');
const querystring = require('querystring');

// 执行 创建服务
const server = http.createServer((req, res) => {
    //获取url
    const url = req.url;

    //分割 /api/list/a=100&b=200
    const path = url.split('?')[0];

    const queryStr = url.split('?')[1];

    //
    const method = req.method


    const query = querystring.parse(queryStr || '');

    //定义路由：模拟获取留言板列表
    if (path === '/api/list' && method === 'GET') {
        //返回结果
        const result = {
            error: 0,
            data: [
                { user: 'zhangsan', content: '留言1' },
                { user: 'lisi', content: '留言2' },
                { user: 'wangwu', content: '留言3' }
            ]
        };
        res.writeHead(200, { 'Content-type': 'application/json' });
        res.end(JSON.stringify(result));
    }

    //定义路由，模拟创建留言
    if (path === '/api/create' && method === 'POST') {
        // res.end('this is create router');
        //返回结果
        const result = {
            error: 0,
            message: '创建成功',
            data: [
                { user: 'zhangsan', content: '留言1' },
                { user: 'lisi', content: '留言2' },
                { user: 'wangwu', content: '留言3' }
            ]
        };
        res.writeHead(200, { 'Content-type': 'application/json' });
        res.end(JSON.stringify(result));
    }

    res.writeHead(404, { 'Content-type': 'text/html' });
    res.end(`
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
    <h1>404 Not found</h1>
    </body>
    </html>
    `);
});

//监听端口
server.listen(3000);
console.log('http请求已经被监听，3000端口');

---

2.3 接收request body-流

流(stream)的表现：

观看视频时，一边加载一边观看

上传文件时，有进度条

网速度较慢时，打开网页会先显示一部分，然后继续加载

浏览器能接收 流(stream)数据：

服务端 res.end(...)，会自动以 流 的形式返回

浏览器会识别到 流 ，并持续接收信息（会有进度条）

待全部接收完，再做显示或处理（视频是一段一段的播放）

示例：

//获取http模块
const http = require('http');
const querystring = require('querystring');

// 执行 创建服务
const server = http.createServer((req, res) => {
    //获取url
    const url = req.url;

    //分割 /api/list/a=100&b=200
    const path = url.split('?')[0];

    const queryStr = url.split('?')[1];

    //
    const method = req.method


    const query = querystring.parse(queryStr || '');

    //定义路由：模拟获取留言板列表
    if (path === '/api/list' && method === 'GET') {
        //返回结果
        const result = {
            error: 0,
            data: [
                { user: 'zhangsan', content: '留言1' },
                { user: 'lisi', content: '留言2' },
                { user: 'wangwu', content: '留言3' }
            ]
        };
        res.writeHead(200, { 'Content-type': 'application/json' });
        res.end(JSON.stringify(result));
    }

    //定义路由，模拟创建留言
    if (path === '/api/create' && method === 'POST') {

        const reqType = req.headers['content-type'];

        // console.log('req content-type', req.headers['content-type']);

        let bodyStr = '';

        //接收
        req.on('data', chunk => { // 服务端怎么去识别“流”，并接收数据
            //chunk 即流的每一段数据
            bodyStr += chunk.toString();
        });

        req.on('end', () => { // 服务端怎么知道流完了
            //判断 接收的数据是否是JSON格式
            if (reqType === 'application/json') {
                const body = JSON.parse(bodyStr);
                console.log('body is ', body);
            }
            res.end('接收完成');
        });


        return;
    }

    res.writeHead(404, { 'Content-type': 'text/html' });
    res.end(`
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
    <h1>404 Not found</h1>
    </body>
    </html>
    `);
});

//监听端口
server.listen(3000);
console.log('http请求已经被监听，3000端口');