Node.js基礎入門第八天

来源:https://www.cnblogs.com/hsiang/archive/2022/04/14/16138329.html
-Advertisement-
Play Games

經過前面七天的學習,對Node.js開發已經有了一個初步的認識,今天繼續學習Node.js在web開發參數傳遞相關內容,僅供學習分享使用,如有不足之處,還請指正。 ...


經過前面七天的學習,對Node.js開發已經有了一個初步的認識,今天繼續學習Node.js在web開發參數傳遞相關內容,僅供學習分享使用,如有不足之處,還請指正。

參數傳遞方式

在Node.js中,參數傳遞常見的共兩種方式:

  1. GET方式:通過地址欄鍵=值的方式進行傳遞。
  2. POST方式:通過表單的方式傳遞請求數據。

GET方式

GET方式通常是在請求地址中以【?參數1=值1&參數2=值2】的格式進行傳遞,在Node.js中可以通過獲取url然後進行獲取參數,如下所示:

 1 //1.引入http模塊
 2 var http  = require('http');
 3 //2.創建服務
 4 var server = http.createServer();
 5 //3. 監聽請求事件,當有請求時,觸發回調函數
 6 server.on('request',function(req,res){
 7     res.writeHead(200,{"content-type":"text/html;charset=utf-8"});
 8     var url = req.url;
 9     if(url.indexOf('?')>0){
10         params = url.split('?')[1];
11         paramArray = params.split('&');
12         res.write("<h3>請求的參數為:</h3>");
13         for(var index in paramArray){
14             res.write(paramArray[index])
15             res.write("<br />");
16         }
17     }
18     res.end();
19 });
20 
21 //4. 監聽8080埠
22 server.listen(8080,function(){
23     console.log("server is running");
24 });

運行示例,在瀏覽器中打開,如下所示:

 

POST方式

目前一般採用form表單的方式傳遞POST數據。在Node.js中,POST傳遞的數據在請求體中。

首先創建一個reg.html靜態html頁面,然後提交數據到action.html,具體如下所示:

 1 //1.引入http模塊
 2 var http  = require('http');
 3 var fs = require('fs');
 4 var path = require('path');
 5 //2.創建服務
 6 var server = http.createServer();
 7 var extnames = {".html":"text/html",".css":"text/css",".png":"image/png"};
 8 //3. 監聽請求事件,當有請求時,觸發回調函數
 9 server.on('request',function(req,res){
10     var url=req.url;
11     if(url==="/"){
12         url="/index.html";
13     }
14     var localPath = './www'+url;
15     var extname = path.extname(localPath);
16     res.writeHead(200,{"content-type":""+extnames[extname]+";charset=utf-8"});
17     if(url==="/action.html"){
18         //從請求主體中獲取POST方式傳輸的數據
19         var params='';
20         req.on('data',function(data){
21             params += data.toString();
22         });
23         //監聽結束事件
24         req.on('end',function(){
25             res.write("<h3>後臺已經收到請求:</h3>");
26             res.write(params);
27             res.end();
28             
29         });
30         return;
31     }
32     
33     console.log(localPath);
34     if(extname===".ico"){
35         res.end();
36     }else{
37         fs.readFile(localPath,function(err,data){
38             res.write(data);
39             res.end();
40         });
41     }
42 });
43 
44 //4. 監聽8080埠
45 server.listen(8080,function(){
46     console.log("server is running");
47 });

運行服務,然後在瀏覽器輸入網址,如下所示:

註意:可以看出,GET方式和POST方式的參數結構都是一樣的,只是GET通過URL,POST通過請求主體。

動態網頁

在之前的示例中,所有的html頁面都是靜態頁面,不會隨著用戶請求的變化而變化。那如何動態的變更網頁呢?答案是採用模板。

首先創建一個html頁面,併在頁面中定義一個變數。如下所示:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>這是首頁</title>
 6         <link type="text/css" href="css/index.css" />
 7     </head>
 8     <body>
 9         <h3>這是首頁</h3>
10         <h3>你的訪問IP為:</h3>
11         <h3><%=ipAddr%></h3>
12     </body>
13 </html>

然後在Node.js後端程式中,動態獲取變數的值,併進行替換,如下所示:

 1 var http  = require('http');
 2 var fs = require('fs');
 3 var path = require('path');
 4 //2.創建服務
 5 var server = http.createServer();
 6 var extnames = {".html":"text/html",".css":"text/css",".png":"image/png"};
 7 //3. 監聽請求事件,當有請求時,觸發回調函數
 8 server.on('request',function(req,res){
 9     var url=req.url;
10     if(url==="/"){
11         url="/index.html";
12     }
13     var localPath = './www'+url;
14     var extname = path.extname(localPath);
15     res.writeHead(200,{"content-type":""+extnames[extname]+";charset=utf-8"});
16     console.log(localPath);
17     if(extname===".ico"){
18         res.end();
19     }else{
20         fs.readFile(localPath,function(err,data){
21             var ip = req.socket.remoteAddress;
22             var content  = render(data.toString(),'<%=ipAddr%>',ip);
23             res.write(content);
24             res.end();
25         });
26     }
27 });
28 
29 //4. 監聽8080埠
30 server.listen(8080,function(){
31     console.log("server is running");
32 });
33 
34 function render(html,name,value){
35     return html.replace(name,value);
36 }

運行示例,在瀏覽器中輸入http://http://127.0.0.1:8080/,如下所示:

 

 註意:IP為客戶端IP,隨著訪問的客戶端電腦而改變。

以上示例都是Node.js的原生開發方式,存在諸多不便,後面將通過引入框架來提高開發的效率。

備註

梁州故人【作者】韋應物 【朝代】唐

江漢曾為客,相逢每醉還。
浮雲一別後,流水十年間。
歡笑情如舊,蕭疏鬢已斑。
何因不歸去,淮上有秋山。


作者:小六公子
出處:http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有,寫文不易,支持原創,歡迎轉載【點贊】,轉載請保留此段聲明,且在文章頁面明顯位置給出原文連接,謝謝。
關註個人公眾號,定時同步更新技術及職場文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何查看PostgreSQL的監聽埠呢?下麵總結一下查看PostgreSQL監聽埠的方法。 方法1:netstat命令查看 # netstat -a | grep PGSQL<!--CRLF--> <!--CRLF-->unix 2 [ ACC ] STREAM LISTENING 126939 ...
  • 通過深挖動畫處理流程中的各個環節, OpenHarmony 圖形棧解決了動畫受 UI 主線程影響而引發的卡頓問題,也解決了動畫過程中圖形計算負載高引起的耗時問題,提升了動畫性能。 ...
  • 在 HarmonyOS 中關係資料庫的增刪改查是非常常見的一種技術,今天進行寫一個 demo 對數據的增刪改查進行詳細的講解,在開發之前我們需要學習“關係資料庫”,“結果集”這兩篇開發文檔,接下來我們分為“Api使用”,“demo實現”,“運行效果”三個步驟進行描述 1. Api 使用 1.1 創建 ...
  • HMS Core應用內支付服務(In-App Purchases,IAP)為應用提供便捷的應用內支付體驗和簡便的接入流程。該服務支持客戶端和服務端兩種開發形式,具體可以參考官方文檔 上次,我們分享和總結了有關com.huawei.hmf.tasks.Task/應用伺服器驗證,驗證購買token 失敗 ...
  • Drawable表示一種可繪製的內容,可以由圖片或者顏色組成.Android下的Drawable有BitmapDrawable、GradientDrawable、LayerDrawable等等 1.BitmapDrawable 它表示一張圖片,我們可以直接將圖片放在drawable目錄下,該圖片就可 ...
  • Handler是我們在開發中經常會接觸到的類,因為在Android中,子線程一般是不能更新UI的. 所以我們會使用Handler切換到主線程來更新UI,那Handler是如何做到實現不同線程之間的切換呢? 先看一個例子 1.ThreadLocal的簡單使用 public class HandlerA ...
  • 一、Bundle Android的Activity、Service、Receiver都支持在Intent傳遞Bundle數據,Bundle實現了Parcelable介面, 所以能很方便的在不同進程之間進行數據傳傳輸.比如A應用打開B應用的某個Activity,如果要傳遞自定義的類型, 可以繼承自Pa ...
  • 簡單開頭 首先技術面試官會根據簡歷里所寫的項目和個人掌握技術棧提問(我不知道已經改過多少次簡歷了,因為前期投簡歷是真的是沉在茫茫大海,撈漂流瓶都撈不到的那種) 我的技術棧:(Vue還在苦苦的自學當中,隨便推薦一下coderwhy老師B站的教學視頻,真的不錯,講得深入淺出,越聽越想聽)地址:https ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...