php渲染nodejs api,如何使用nodejs 服务器读取HTML文件渲染至前端
這次給大家?guī)?lái)如何使用nodejs 服務(wù)器讀取HTML文件渲染至前端，使用nodejs 服務(wù)器讀取HTML文件渲染至前端的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
1.分別簡(jiǎn)單實(shí)現(xiàn)三個(gè)備用頁(yè)面。
代碼片段：
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
元素居中對(duì)齊
水平居中塊級(jí)元素 (如 p), 可以使用 margin: auto;
注意: 使用 margin:auto 無(wú)法兼容 IE8, 除非 !DOCTYPE 已經(jīng)聲明。
notFount.html頁(yè)面
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
color:red;
}
404 Not Fount
2.修改創(chuàng)建的nodejs 服務(wù)器頁(yè)面，對(duì)不同地址的請(qǐng)求做出不同的響應(yīng)頁(yè)面。
在url地址判斷中添加，文件讀取代碼，以實(shí)現(xiàn)讀取定義的html頁(yè)面。
聲明文件系統(tǒng)對(duì)象：// 聲明文件操作系統(tǒng)對(duì)象
var fs = require('fs');
實(shí)現(xiàn)文件內(nèi)容讀取并渲染到頁(yè)面if(url ==='/'){
//response.writeHead(響應(yīng)狀態(tài)碼，響應(yīng)頭對(duì)象): 發(fā)送一個(gè)響應(yīng)頭給請(qǐng)求。
response.writeHead(200,{'Content-Type':'text/html'})
// 如果url=‘/' ,讀取指定文件下的html文件，渲染到頁(yè)面。
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}
完整代碼：/**
1.使用 HTTP 服務(wù)器與客戶端交互，需要 require('http')。
聲明http協(xié)議
*/
var http = require('http');
// 聲明文件操作系統(tǒng)對(duì)象
var fs = require('fs');
/**
2.獲取服務(wù)器對(duì)象
1.通過(guò) http.createServer([requestListener]) 創(chuàng)建一個(gè)服務(wù)
requestListener
返回:
返回一個(gè)新建的 http.Server 實(shí)例。
對(duì)于服務(wù)端來(lái)說(shuō)，主要做三件事：
1.接受客戶端發(fā)出的請(qǐng)求。
2.處理客戶端發(fā)來(lái)的請(qǐng)求。
3.向客戶端發(fā)送響應(yīng)。
*/
var server = http.createServer();
/**
3.聲明端口號(hào)，開啟服務(wù)。
server.listen([port][, host][, backlog][, callback])
port ：端口號(hào)
host ：主機(jī)ip
backlog server.listen() 函數(shù)的通用參數(shù)
callback server.listen() 函數(shù)的通用參數(shù)
Returns:
啟動(dòng)一個(gè)TCP服務(wù)監(jiān)聽輸入的port和host。
如果port省略或是0，系統(tǒng)會(huì)隨意分配一個(gè)在'listening'事件觸發(fā)后能被server.address().port檢索的無(wú)用端口。
如果host省略，如果IPv6可用，服務(wù)器將會(huì)接收基于unspecified IPv6 address (::)的連接，否則接收基于unspecified IPv4 address (0.0.0.0)的連接
*/
server.listen(9001, function(){
console.log('服務(wù)器正在端口號(hào)：9001上運(yùn)行......');
})
/**
4.給server 實(shí)例對(duì)象添加request請(qǐng)求事件，該請(qǐng)求事件是所有請(qǐng)求的入口。
任何請(qǐng)求都會(huì)觸發(fā)改事件，然后執(zhí)行事件對(duì)應(yīng)的處理函數(shù)。
server.on('request',function(){
console.log('收到客戶端發(fā)出的請(qǐng)求.......');
});
*/
/**
5.設(shè)置請(qǐng)求處理函數(shù)。
請(qǐng)求回調(diào)處理函數(shù)需要接收兩個(gè)參數(shù)。
request ：request是一個(gè)請(qǐng)求對(duì)象，可以拿到當(dāng)前瀏覽器請(qǐng)求的一些信息。
eg：請(qǐng)求路徑，請(qǐng)求方法等
response： response是一個(gè)響應(yīng)對(duì)象，可以用來(lái)給請(qǐng)求發(fā)送響應(yīng)。
*/
server.on('request',function(request,response){
var url = request.url;
if(url ==='/'){
//response.writeHead(響應(yīng)狀態(tài)碼，響應(yīng)頭對(duì)象): 發(fā)送一個(gè)響應(yīng)頭給請(qǐng)求。
response.writeHead(200,{'Content-Type':'text/html'})
// 如果url=‘/' ,讀取指定文件下的html文件，渲染到頁(yè)面。
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文件，渲染到頁(yè)面。
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文件，渲染到頁(yè)面。
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文件，渲染到頁(yè)面。
fs.readFile('./practice/notFount.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}
});
最終實(shí)現(xiàn)效果：
開啟nodejs服務(wù)器，在地址欄中輸入：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/其他內(nèi)容
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
總結(jié)
以上是生活随笔為你收集整理的php渲染nodejs api,如何使用nodejs 服务器读取HTML文件渲染至前端的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 原神海螺屋雷神瞳怎么拿?
- 下一篇： php怎么看数据化,3.2.11 查看和