美文网首页从javascript入门node
基于 GET、POST的 todoList

基于 GET、POST的 todoList

作者: 鹏禾呈 | 来源:发表于2017-11-12 19:17 被阅读0次

    一个简单的TodoList

    image.png
    • 在将待办事项添加到数组中之前,你需要得到完整的字符串。要得到整个字符串,可以将所有数据块拼接到一起,直到表明请求已经完成的end事件被发射出来。在end事件出来后,可以用请求体的整块内容组装出item字符串,然后压入items数组中。在添加好事项后,你可以用字符串OK和Node的默认状态码200结束响应

    执行文件index.js

    'use strict';
    let http = require('http');
    let todo = require('./todoModule');
    // 用一个常规的JavaScript数组存放数据
    let items = [];
    let server=http.createServer((req,res)=>{
        if('/'==req.url){
            console.log(req.method);
            switch(req.method){
                case 'GET':
                    todo.show(res,items);
                    break;
                case 'POST':
                    todo.add(req, res,items);
                    break;
                default:
                    todo.badRequest(res);
            }
        }
        else{
            todo.notFound(res);
        }
    })
    server.listen(32001);
    

    依赖模块 todoMoudle.js

    'use strict';
    
    let qs = require('querystring');
    
    function show(res, items) {
        console.log(items);
    
        let html = `
            <html>
                <head>
                    <title>
                        TodoList
                    </title>
                </head>
            <body>
                <h1>
                    Todo List
                </h1>
        <ul>
          ${items.map(item => `
            <li>${item}</li>`
        ).join('')}
        </ul>
    <form action="/" method="post">
        <p><input type="text" name="item"></p>
        <p><input type="submit" value="Add Item"></p>
    </form>
    </body>
    </html>
    `
        res.setHeader('Content-type', 'text/html');
        res.setHeader('Content-Length', Buffer.byteLength(html));
        res.end(html);
    };
    
    function add(req, res, items) {
        //为进来的事项设置字符串缓存
        let body = '';
        req.setEncoding('utf8');
        req.on('data', (chunk) => {
            body += chunk;
        })
        req.on('end', () => {
            let obj = qs.parse(body);
            items.push(obj.item);
            show(res, items);
        })
    }
    
    //notFound()函数接收响应对象,将状态码设为404,响应主体设为Not Found:
    function notFound(res) {
        res.statusCode = 404;
        res.setHeader('Content-type', 'text/plain');
        res.end('Not Found');
    };
    
    //返回400 Bad Request响应的函数实现起来跟notFound()几乎一样,向客户端指明该请求无效:
    function badrequest(res) {
        res.statusCode = 400;
        res.setHeader('Content-type', 'text/plain');
        res.end('badrequest');
    };
    
    module.exports = {show, add, notFound, badrequest}
    

    相关文章

      网友评论

        本文标题:基于 GET、POST的 todoList

        本文链接:https://www.haomeiwen.com/subject/zssomxtx.html