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

Posted 高级web前端工程师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过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.     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/其他内容

技术分享图片

 



以上是关于通过nodejs 服务器读取HTML文件渲染到页面的主要内容,如果未能解决你的问题,请参考以下文章

客户端 HTML MVC 渲染与通过 NodeJS 的服务器端渲染

Flask 渲染跨服务器的html模板

layui 利用ajax冲获取到json 数据后 怎样进行渲染

nodejs渲染模板

nodejs后端-工程化实现-Go网上数码商城第二思量-完成访问数据库渲染页面数据

vuejs 返回json数据怎么循环渲染到页面