通过nodejs 服务器读取HTML文件渲染到页面
Posted 高级web前端工程师
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过nodejs 服务器读取HTML文件渲染到页面相关的知识,希望对你有一定的参考价值。
1.分别简单实现三个备用页面。
- login.html页面
- index.html页面
- 代码片段:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>菜鸟教程(runoob.com)</title>
- <style>
- .center {
- margin: auto;
- width: 60%;
- border: 3px solid #73AD21;
- padding: 10px;
- }
- </style>
- </head>
- <body>
- <h2>元素居中对齐</h2>
- <p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>
- <div class="center">
- <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
- </div>
- </body>
- </html>
- notFount.html页面
- <!DOCTYPE HTML>
- <html>
- <head>
- <script>
- </script>
- <style>
- .center {
- margin: auto;
- width: 60%;
- border: 3px solid #73AD21;
- padding: 10px;
- color:red;
- }
- </style>
- </head>
- <body>
- <div class ="center" >404 Not Fount</div>
- </body>
- </html>
2.修改创建的nodejs 服务器页面,对不同地址的请求做出不同的响应页面。
- 在url地址判断中添加,文件读取代码,以实现读取定义的html页面。
- 声明文件系统对象:
- // 声明文件操作系统对象
- var fs = require(‘fs‘);
- 实现文件内容读取并渲染到页面
- if(url ===‘/‘){
- //response.writeHead(响应状态码,响应头对象): 发送一个响应头给请求。
- response.writeHead(200,{‘Content-Type‘:‘text/html‘})
- // 如果url=‘/’ ,读取指定文件下的html文件,渲染到页面。
- fs.readFile(‘./practice/login.html‘,‘utf-8‘,function(err,data){
- if(err){
- throw err ;
- }
- response.end(data);
- });
- }
- 完整代码:
- /**
- 1.使用 HTTP 服务器与客户端交互,需要 require(‘http‘)。
- 声明http协议
- */
- var http = require(‘http‘);
- // 声明文件操作系统对象
- var fs = require(‘fs‘);
- /**
- 2.获取服务器对象
- 1.通过 http.createServer([requestListener]) 创建一个服务
- requestListener <Function>
- 返回: <http.Server>
- 返回一个新建的 http.Server 实例。
- 对于服务端来说,主要做三件事:
- 1.接受客户端发出的请求。
- 2.处理客户端发来的请求。
- 3.向客户端发送响应。
- */
- var server = http.createServer();
- /**
- 3.声明端口号,开启服务。
- server.listen([port][, host][, backlog][, callback])
- port <number> :端口号
- host <string> :主机ip
- backlog <number> server.listen() 函数的通用参数
- callback <Function> server.listen() 函数的通用参数
- Returns: <net.Server>
- 启动一个TCP服务监听输入的port和host。
- 如果port省略或是0,系统会随意分配一个在‘listening‘事件触发后能被server.address().port检索的无用端口。
- 如果host省略,如果IPv6可用,服务器将会接收基于unspecified IPv6 address (::)的连接,否则接收基于unspecified IPv4 address (0.0.0.0)的连接
- */
- server.listen(9001, function(){
- console.log(‘服务器正在端口号:9001上运行......‘);
- })
- /**
- 4.给server 实例对象添加request请求事件,该请求事件是所有请求的入口。
- 任何请求都会触发改事件,然后执行事件对应的处理函数。
- server.on(‘request‘,function(){
- console.log(‘收到客户端发出的请求.......‘);
- });
- */
- /**
- 5.设置请求处理函数。
- 请求回调处理函数需要接收两个参数。
- request :request是一个请求对象,可以拿到当前浏览器请求的一些信息。
- eg:请求路径,请求方法等
- response: response是一个响应对象,可以用来给请求发送响应。
- */
- server.on(‘request‘,function(request,response){
- var url = request.url;
- if(url ===‘/‘){
- //response.writeHead(响应状态码,响应头对象): 发送一个响应头给请求。
- response.writeHead(200,{‘Content-Type‘:‘text/html‘})
- // 如果url=‘/’ ,读取指定文件下的html文件,渲染到页面。
- fs.readFile(‘./practice/login.html‘,‘utf-8‘,function(err,data){
- if(err){
- throw err ;
- }
- response.end(data);
- });
- }else if(url === ‘/login‘){
- response.writeHead(200,{‘Content-Type‘:‘text/html‘});
- // 如果url=‘/’ ,读取指定文件下的html文件,渲染到页面。
- fs.readFile(‘./practice/login.html‘,‘utf-8‘,function(err,data){
- if(err){
- throw err ;
- }
- response.end(data);
- });
- }else if(url === ‘/index‘){
- response.writeHead(200,{‘Content-Type‘:‘text/html‘});
- // 如果url=‘/’ ,读取指定文件下的html文件,渲染到页面。
- fs.readFile(‘./practice/index.html‘,‘utf-8‘,function(err,data){
- if(err){
- throw err ;
- }
- response.end(data);
- });
- }else{
- response.writeHead(200,{‘Content-Type‘:‘text/html‘});
- // 如果url=‘/’ ,读取指定文件下的html文件,渲染到页面。
- fs.readFile(‘./practice/notFount.html‘,‘utf-8‘,function(err,data){
- if(err){
- throw err ;
- }
- response.end(data);
- });
- }
- });
- 最终实现效果:
- 开启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 的服务器端渲染
layui 利用ajax冲获取到json 数据后 怎样进行渲染