詳解nodejs通過(guò)響應(yīng)回寫的方式渲染頁(yè)面資源
更新時(shí)間：2018年04月07日 17:08:39 作者：凌云
本篇文章主要介紹了詳解nodejs通過(guò)響應(yīng)回寫的方式渲染頁(yè)面資源，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
我們一般通過(guò)node框架提供的api操作頁(yè)面渲染，如何利用原始回寫的方式來(lái)實(shí)現(xiàn)同樣的功能呢
下面是通過(guò)node 提供的異步地讀取一個(gè)文件的全部?jī)?nèi)容api readFile進(jìn)行操作，代碼如下：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="./static/style.css" rel="external nofollow" /> <title>Document</title> </head> <body> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <div>這是一個(gè)div </div> <script type="text/javascript" src="./static/test.js"></script> </body> </html>
/static 文件夾里面放test.js 和 style.css 文件
div:nth-child(1){
font-size: 50px;
color: red;
}
div:nth-child(3){
font-size: 80px;
color: blue;
}
div:nth-child(6){
font-size: 100px;
color: blueviolet;
}
app.js
// 搭建服務(wù)
var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.on('listening',()=> {
console.log('server starts at localhost 8080');
})
server.listen('8080','localhost');
//監(jiān)聽服務(wù)
server.on('request',(req,res)=>{
if(req.url == '/') {//渲染html文件
fs.readFile('./html/node.html',(err,info)=>{
res.write(info);
res.end();
})
} else if(req.url.startsWith('/static')) {//統(tǒng)一渲染html需要的static靜態(tài)文件到頁(yè)面
fs.readFile(__dirname + req.url,(err,info) =>{
res.write(info);
res.end();
})
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
nodejs基于express實(shí)現(xiàn)文件上傳的方法
這篇文章主要介紹了nodejs基于express實(shí)現(xiàn)文件上傳的方法,結(jié)合實(shí)例形式分析了nodejs基于express框架實(shí)現(xiàn)文件上傳功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
Node.js v8.0.0正式發(fā)布！看看帶來(lái)了哪些主要新特性
Node.js v8.0.0 已正式發(fā)布。v8.0.0 是下一個(gè)主要的版本，帶來(lái)了一系列重大的變化和新功能，內(nèi)容十分多！下面這篇文章主要帶著大家一起看看Node.js v8.0.0帶來(lái)了哪些主要新特性，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-06-06
Webpack 實(shí)現(xiàn) Node.js 代碼熱替換
Webpack有一個(gè)很實(shí)用的功能叫做熱替換（Hot-replace），尤其是結(jié)合React Hot Loader插件，開發(fā)過(guò)程中都不需要刷新瀏覽器，任何前端代碼的更改都會(huì)實(shí)時(shí)的在瀏覽器中表現(xiàn)出來(lái)。2015-10-10
這篇文章主要介紹了NodeJS中Buffer模塊詳解，十分的詳細(xì),需要的朋友可以參考下2015-01-01
優(yōu)化Node.js Web應(yīng)用運(yùn)行速度的10個(gè)技巧
這篇文章主要介紹了優(yōu)化Node.js Web應(yīng)用運(yùn)行速度的10個(gè)技巧,本文講解了從并行、異步、緩存、gzip 壓縮、客戶端渲染等等技巧,需要的朋友可以參考下2014-09-09
在本篇內(nèi)容里小編給大家整理的是一篇關(guān)于nodejs中的異步編程知識(shí)點(diǎn)詳解內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2021-01-01
node.js用fs.rename強(qiáng)制重命名或移動(dòng)文件夾的方法
本篇文章主要介紹了node.js用fs.rename強(qiáng)制重命名或移動(dòng)文件夾的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
使用pify實(shí)現(xiàn)Node.js回調(diào)函數(shù)的Promise化
使用pify庫(kù),你可以非常便利地將任何遵循Node.js回調(diào)風(fēng)格的函數(shù)轉(zhuǎn)換為返回Promise對(duì)象的函數(shù),從而使得你的異步代碼更加清晰和易于維護(hù),本文通過(guò)豐富的代碼示例引導(dǎo)你如何有效地利用pify,需要的朋友可以參考下2024-06-06
nodejs搭建本地服務(wù)器并訪問(wèn)文件的方法
本篇文章主要介紹了nodejs搭建本地服務(wù)器并訪問(wèn)文件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
本文介紹使用NodeJs搭建的后端server快速生成Swagger接口文檔的技巧,本文有詳細(xì)的步驟講解,通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01