碼上快樂

相關內容    簡體    繁體

通過nodejs 服務器讀取HTML文件渲染到頁面

本文轉載自   查看原文   2018-04-27 22:48   962    node

1.分別簡單實現三個備用頁面。

 

  • login.html頁面
  • index.html頁面
  • 代碼片段：
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">   
  5. <title>菜鳥教程(runoob.com)</title>   
  6. <style>  
  7. .center {  
  8.     margin: auto;  
  9.     width: 60%;  
  10.     border: 3px solid #73AD21;  
  11.     padding: 10px;  
  12. }  
  13. </style>  
  14. </head>  
  15. <body>  
  16.   
  17. <h2>元素居中對齊</h2>  
  18. <p>水平居中塊級元素 (如 div), 可以使用 margin: auto;</p>  
  19.   
  20. <div class="center">  
  21.   <p><b>注意: </b>使用 margin:auto 無法兼容 IE8, 除非 !DOCTYPE 已經聲明。</p>  
  22. </div>  
  23.   
  24. </body>  
  25. </html>  

 

  • notFount.html頁面
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <script>  
  5.   
  6. </script>  
  7. <style>  
  8. .center {  
  9.     margin: auto;  
  10.     width: 60%;  
  11.     border: 3px solid #73AD21;  
  12.     padding: 10px;  
  13.     color:red;  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18.   
  19. <div class ="center" >404 Not Fount</div>  
  20.   
  21. </body>  
  22. </html>  

2.修改創建的nodejs 服務器頁面，對不同地址的請求做出不同的響應頁面。

 

  • 在url地址判斷中添加，文件讀取代碼，以實現讀取定義的html頁面。
  • 聲明文件系統對象：
  1. // 聲明文件操作系統對象  
  2.     var fs = require('fs');  
  • 實現文件內容讀取並渲染到頁面
 
  1. if(url ==='/'){  
  2.     //response.writeHead(響應狀態碼，響應頭對象): 發送一個響應頭給請求。  
  3.     response.writeHead(200,{'Content-Type':'text/html'})  
  4.     // 如果url=‘/’ ,讀取指定文件下的html文件，渲染到頁面。  
  5.     fs.readFile('./practice/login.html','utf-8',function(err,data){  
  6.     if(err){  
  7.     throw err ;  
  8.     }  
  9.     response.end(data);  
  10.     });  
  11. }  

 

  • 完整代碼：
 
  1. /**  
  2.       
  3. 1.使用 HTTP 服務器與客戶端交互，需要 require('http')。  
  4.     聲明http協議  
  5. */  
  6. var http = require('http');  
  7.   
  8.   
  9. // 聲明文件操作系統對象  
  10. var fs = require('fs');  
  11. /**  
  12. 2.獲取服務器對象  
  13.     1.通過 http.createServer([requestListener]) 創建一個服務  
  14.   
  15.     requestListener <Function>  
  16.     返回: <http.Server>  
  17.     返回一個新建的 http.Server 實例。  
  18.     對於服務端來說，主要做三件事：  
  19.     1.接受客戶端發出的請求。  
  20.     2.處理客戶端發來的請求。  
  21.     3.向客戶端發送響應。  
  22. */  
  23.   
  24. var server = http.createServer();  
  25.   
  26. /**  
  27. 3.聲明端口號，開啟服務。  
  28.     server.listen([port][, host][, backlog][, callback])  
  29.   
  30.     port <number> ：端口號  
  31.     host <string> ：主機ip  
  32.     backlog <number> server.listen() 函數的通用參數  
  33.     callback <Function> server.listen() 函數的通用參數  
  34.     Returns: <net.Server>  
  35.     啟動一個TCP服務監聽輸入的port和host。  
  36.   
  37.     如果port省略或是0，系統會隨意分配一個在'listening'事件觸發后能被server.address().port檢索的無用端口。  
  38.   
  39.     如果host省略，如果IPv6可用，服務器將會接收基於unspecified IPv6 address (::)的連接，否則接收基於unspecified IPv4 address (0.0.0.0)的連接  
  40.   
  41. */  
  42. server.listen(9001, function(){  
  43.      console.log('服務器正在端口號：9001上運行......');  
  44. })  
  45.   
  46.   
  47. /**  
  48. 4.給server 實例對象添加request請求事件，該請求事件是所有請求的入口。  
  49.     任何請求都會觸發改事件，然后執行事件對應的處理函數。  
  50.   
  51.     server.on('request',function(){  
  52.          console.log('收到客戶端發出的請求.......');  
  53.     });  
  54. */  
  55.   
  56.   
  57. /**  
  58. 5.設置請求處理函數。  
  59.     請求回調處理函數需要接收兩個參數。  
  60.     request ：request是一個請求對象，可以拿到當前瀏覽器請求的一些信息。  
  61.         eg：請求路徑，請求方法等  
  62.     response： response是一個響應對象，可以用來給請求發送響應。  
  63.   
  64. */  
  65. server.on('request',function(request,response){  
  66.       
  67.     var url = request.url;  
  68.     if(url ==='/'){  
  69.         //response.writeHead(響應狀態碼，響應頭對象): 發送一個響應頭給請求。  
  70.         response.writeHead(200,{'Content-Type':'text/html'})  
  71.         // 如果url=‘/’ ,讀取指定文件下的html文件，渲染到頁面。  
  72.         fs.readFile('./practice/login.html','utf-8',function(err,data){  
  73.             if(err){  
  74.                 throw err ;  
  75.             }  
  76.             response.end(data);  
  77.         });  
  78.       
  79.     }else if(url === '/login'){  
  80.         response.writeHead(200,{'Content-Type':'text/html'});  
  81.         // 如果url=‘/’ ,讀取指定文件下的html文件，渲染到頁面。  
  82.         fs.readFile('./practice/login.html','utf-8',function(err,data){  
  83.             if(err){  
  84.                 throw err ;  
  85.             }  
  86.             response.end(data);  
  87.         });  
  88.     }else if(url === '/index'){  
  89.         response.writeHead(200,{'Content-Type':'text/html'});  
  90.         // 如果url=‘/’ ,讀取指定文件下的html文件，渲染到頁面。  
  91.         fs.readFile('./practice/index.html','utf-8',function(err,data){  
  92.             if(err){  
  93.                 throw err ;  
  94.             }  
  95.             response.end(data);  
  96.         });  
  97.     }else{  
  98.         response.writeHead(200,{'Content-Type':'text/html'});  
  99.         // 如果url=‘/’ ,讀取指定文件下的html文件，渲染到頁面。  
  100.         fs.readFile('./practice/notFount.html','utf-8',function(err,data){  
  101.             if(err){  
  102.                 throw err ;  
  103.             }  
  104.             response.end(data);  
  105.         });  
  106.     }  
  107.       
  108. });  
  • 最終實現效果：
  • 開啟nodejs服務器，在地址欄中輸入：127.0.0.0.1：9001或127.0.0.0.1：9001/login

 

  • 在地址欄中輸入：127.0.0.0.1：9001/index

 

  • 在地址欄中輸入：127.0.0.0.1：9001/其他內容



 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用nodejs搭建服務器顯示HTML頁面 用nodejs創建服務器顯示html頁面 使用nodejs搭建服務器顯示HTML頁面 (轉)使用nodejs搭建服務器顯示HTML頁面 從零開始，做一個NodeJS博客（四）：服務器渲染頁面與Pjax nodejs獲取服務器數據到頁面 Html5+NodeJS——拖拽多個文件上傳到服務器 HTML5 文件域+FileReader 分段讀取文件並上傳到服務器(六) HTML5 文件域+FileReader 讀取文件並上傳到服務器(三) Node.js_express_服務器渲染頁面 ejs
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM