Node.js 的 30 天學習日記--第二十八天

Node.js 學習第二十八天

27 天跟 28 天寫在一起發送。

如果在看的過程中有任何錯誤歡迎寫 E-MAIL： pp840405@gmail.com 提醒我錯誤。

RESTful API todolist - Client AJAX

現在寫一支 JS 檔案去操控資料庫的資料

  1. 在 index.ejs 上增加 dataset

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <body>
        <h1>代辦事項</h1>
        <input type="text" name="content" id="content">
        <input type="submit" id="send" value="儲存">
        <ul id = "list">
        <% for(itme in todoslist){ %>
            
                <li><%- todoslist[itme].content %> <input type="button" data-id="<%- itme %>" value="刪除"></li>
            
        <% } %>
    </ul>
        <script src="/js/all.js"></script>
    </body>

  2. 開啟先前新增的 all.js 檔案，做新增顯示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    var send = document.getElementById('send');
    var content = document.getElementById('content');
    var list = document.getElementById('list');

    send.addEventListener('click',function(e){
        //撈輸入框的值
        var str = content.value;
        var xhr = new XMLHttpRequest();
        xhr.open('post',"/addTodo");
        xhr.setRequestHeader('Content-type','application/json');
        //寫content是要把資料丟到req.body.content裡面
        var todo = JSON.stringify({'content':str});
        xhr.send(todo);
        xhr.onload = function(){
            var origindata = JSON.parse(xhr.responseText);
            if(origindata.success == false){
                alert(origindata.message)
                return;
            }
            var data = origindata.result;
            var str = ''
            for(itme in data){
                str += '<li>'+data[itme].content+'<input type="button" data-set="'+itme+'" value="刪除"></li>'
            }
            list.innerHTML = str;
        }
    });

  3. 增加刪除邏輯

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    list.addEventListener('click',function(e){
        if(e.target.nodeName !== "INPUT"){
            return;
        }
        //
        var id = e.target.dataset.id;
        var xhr = new XMLHttpRequest();
        xhr('post','/removeTodo');
        xhr.setRequestHeader('Content-type','application/json');
        var removeTodo = JSON.stringify({'id':id});
        xhr.send(removeTodo);
        xhr.onload = function(){
            var origindata = JSON.parse(xhr.responseText);
            var data = origindata.result;
            var str = ''
            for(itme in data){
                str += '<li>'+data[itme].content+'<input type="button" data-set="'+itme+'" value="刪除"></li>'
            }
            list.innerHTML = str;
        }
    })

結語

這章 express + firebase 結合的就到這邊了，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。