iT邦幫忙

0

如何利用Node js 處理前端DOM網頁元素操作 ? (To do list)

  • 分享至 

  • xImage

各位先進好~ 小弟剛學完HTML/CSS和DOM,以及簡單Node.js連結資料庫(MongoDB)操作,目前嘗試製作迷你專案to do list。
簡單邏輯是這樣:
1.前端網頁會有使用者輸入ID、農產品種植時間、事件清單和日期,和一個提交按鍵,下面有個訊息區(textarea),如果是輸入新的ID,目前沒問題會直接送到資料庫創建資料

問題:

  1. 我的問題是如果是資料庫中已經有ID資料,在使用者按提交按鍵時,透過Node.js 利用moogoose套件比對後,如果發現已有使用者ID和種植時間(唯一值),會彈回前端並顯示在下方訊息區(textarea),告訴使用者正在更新哪一筆資料和資訊,比方說"此ID是已創建的資料,你今天更新xxx"。

  2. TextArea訊息區,目前想到資料庫比對後,直接用innertext丟進去

只是目前問題是node.js 好像不支援DOM操作,寫在同一個JS檔案也怪怪的,或者說我該怎麼將兩項給分開? (我知道以後前後端要分流XD..node js也是後端伺服用,只是在嘗試做中學) > </...新手問題多 請多多包涵

https://ithelp.ithome.com.tw/upload/images/20220511/201452514XQVNOJlBK.jpg

目前嘗試用Jquery ajax+Node.js,只是驗證後用後端res.send(data),似乎都傳不到前端讓ajax接收顯示....一直停在res.send刷新頁面的json資料

前端
$.ajax({
            data: userdata, 
            url: 'http://localhost:3000/',
            dataType: 'json',
            type: 'post', 
            cache: false,
            timeout: 5000,
            success: function(res){
                 $("textarea").text(res.check);
                 $("textarea").focus(function(){
                     $("textarea").text().remove();
                    });
                },
                error:function(jqXHR, textStatus, errorThrown){
                    alert('error'+ textStatus+'errorThrown');}
                });
            });
        });

後端

router.post("/", async(req, res) => {
    try{let plotid = req.body.plotid;
        let todothing =  req.body.todothing;
        let todomonth = req.body.todomonth;
        let tododate = req.body.tododate;
        let newinputdata = new Ricecalendar({
            plotid,
            todothing,
            todomonth,
            tododate,
        });
        console.log(newinputdata);
        var data = { check: ""};
        searchdata=await Ricecalendar.findOne({plotid});
        if (searchdata!==null){
            message.check="this is Old Plot you have xxx tracebility data"; 
            **res.send(data);}** 停留在這未傳回到Ajax
        else {
            message.check="This is New Resgistrated Plot, Welcome" ;
            res.send(data);
        };
        newinputdata .save().then(() => {
        console.log("Data already saved");});
    }
    catch{res.send("Error");}
    
});
app.use("/",router);

感謝各位大大回覆和討論~問題已經解決囉><~太開心了
1.前端瀏覽器html部分需要引入jQuery Ajax,利用Ajax Get或Post聯絡後端

2.Node.js 收到請求後(req),進行資料庫搜尋和吐出處理好的數據,res回傳
部分可以是json,text或html...

3.再由前端Ajax接收後端res資料後,下面就是利用jQuery DOM($)選取器進行網頁元素新增或刪除等渲染。

4.若是打算前端Get請求後,回傳整個新的網頁,可以用傳統後端Express提供的res.render回傳ejs檔,再由新的ejs+ajax進行渲染。

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2022-05-11 19:50:41 檢舉
後端就是後端,後端能操作DOM的唯一機會就是response傳回從模板運算出的html的時候。就算同為js的node也不例外。
Rafael iT邦新手 1 級 ‧ 2022-05-11 19:55:09 檢舉
喔~了解 目前我是用最簡單ejs...是有想過資料庫掉出來後用data參數,帶入ejs插進去html..... 再用瀏覽器的DOM操作帶入ejs 參數? ><
froce iT邦大師 1 級 ‧ 2022-05-11 21:44:59 檢舉
是的,不過用ajax取資料,然後用前端js動態呈現才是目前常用的手法。
這個版面在udemy似曾相似XDD
Rafael iT邦新手 1 級 ‧ 2022-05-13 18:00:48 檢舉
是的~udemy 60小時網頁課程的範例XD,是DOM和網頁localStorage互動,但是後來想做更進一步練習時,考量資料量必須放進資料庫...就必須前端後後端互動,不再是單純跑跑前端瀏覽器了
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
海綿寶寶
iT邦大神 1 級 ‧ 2022-05-12 08:41:50

你說的對
不是用 Node.js 去支援 DOM 操作

Google Node.js / EJS 互動範例供參考

只要耐心看懂這範例
就可以搞定問題以及後續的設計

Rafael iT邦新手 1 級 ‧ 2022-05-15 09:23:10 檢舉

謝謝海綿大大~

  1. 因為ejs渲染比較像是導向新的整個ejs html頁面,目前我可以做是res.render("ejs",{"後端訊息"}),textarea會出現後端驗證訊息沒問題。
  2. 但這樣原本上面input的資料也會被清除,目前嘗試用ajax,當使用者提交資訊到資料庫同時,後端驗證完畢丟出的訊息也能同步出現在原本頁面textarea區域,而不是刷新>-<...
  3. 目前將jQuery Ajax寫在ejs檔下進行DOM操作,能成功收到res.send()傳送的結果。 但若是將jQuery Ajax寫在另一個檔案導入ejs就會失效。
1
wolfwang
iT邦研究生 4 級 ‧ 2022-05-12 15:07:22

Node.js 是後端的語言,如果要用後端處理,你就是要做頁面的刷新,而不是操作 dom。

這個情境多半就是 Node.js 提供查詢 api,前端 javascript 用 ajax 去查詢,獲得結果後去操作 dom 顯示結果狀態。

我要發表回答

立即登入回答