java 获得渲染后的html js渲染html到页面

转载

AI领域布道师 2023-07-24 16:04:27

文章标签 java 获得渲染后的html node html 服务器客户端 文章分类 Java 后端开发

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. 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. <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. <number> ：端口号  
31. <string> ：主机ip  
32. <number> server.listen() 函数的通用参数  
33. <Function> server.listen() 函数的通用参数  
34. <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. url = request.url;  
68. 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. 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. 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. });