• 通过nodejs 服务器读取HTML文件渲染到页面

    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.      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.      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/其他内容
  • 相关阅读:
    测试开发趋势 + PyUnit测试框架 + Robot Framework
    python 面经
    持经达变，不固而中
    数据库、网络、Linux面经
    兴趣培养方向
    133天
    Python学习第132天（Django2内容增加）
    Python学习第131天（Django之ORM一对多操作练习）
    Python学习第130天（Django中ORM一对多的增删改查）
    Python学习第129天（ORM单表查询、模糊查询）
  • 原文地址：https://www.cnblogs.com/iqian/p/8964999.html
Copyright © 2020-2023  润新知