詳解nodejs通過響應(yīng)回寫的方式渲染頁面資源
更新時(shí)間：2018年04月07日 17:08:39 作者：凌云
本篇文章主要介紹了詳解nodejs通過響應(yīng)回寫的方式渲染頁面資源，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
我們一般通過node框架提供的api操作頁面渲染，如何利用原始回寫的方式來實(shí)現(xiàn)同樣的功能呢
下面是通過node 提供的異步地讀取一個(gè)文件的全部內(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)文件到頁面
fs.readFile(__dirname + req.url,(err,info) =>{
res.write(info);
res.end();
})
}
})
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
nodejs爬蟲抓取數(shù)據(jù)亂碼問題總結(jié)
這篇文章主要給大家總結(jié)了下nodejs爬蟲抓取數(shù)據(jù)亂碼問題的相關(guān)資料,需要的朋友可以參考下2015-07-07
學(xué)習(xí) NodeJS 第八天：Socket 通訊實(shí)例
本篇文章主要介紹了學(xué)習(xí) NodeJS 第八天：Socket 通訊實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
Node.js檢測(cè)端口(port)是否被占用的簡(jiǎn)單示例
大家有沒有遇到過在開啟本地服務(wù)時(shí)，有這么一種情況：當(dāng)前端口已經(jīng)被另一個(gè)項(xiàng)目使用了，導(dǎo)致服務(wù)開啟失敗。那么接下來，我們通過簡(jiǎn)簡(jiǎn)單單的示例代碼來檢測(cè)端口是否已經(jīng)被占用。有需要的朋友們可以參考借鑒。2016-09-09
這篇文章主要為大家詳細(xì)介紹了node+express實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
探索node之事件循環(huán)的實(shí)現(xiàn)
這篇文章主要介紹了探索node之事件循環(huán)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了詳解Node.js 中使用 ECDSA 簽名遇到的坑，主要是使用 Node.js 的 Crypto 模塊無法校驗(yàn)網(wǎng)絡(luò)傳輸過來的簽名結(jié)果，感興趣的小伙伴們可以參考一下2018-11-11
要用nodejs開發(fā)接口，實(shí)現(xiàn)遠(yuǎn)程調(diào)用，如果裸奔太危險(xiǎn)了，就在網(wǎng)上找了一下nodejs的加密，感覺node-rsa挺不錯(cuò)的，下面來總結(jié)一下簡(jiǎn)單的rsa加密解密用法，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了nodejs中實(shí)現(xiàn)修改用戶路由功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
把Node.js程序加入服務(wù)實(shí)現(xiàn)隨機(jī)啟動(dòng)
這篇文章主要介紹了把Node.js程序加入服務(wù)實(shí)現(xiàn)隨機(jī)啟動(dòng),本文使用qckwinsvc實(shí)現(xiàn)這個(gè)需求,講解了qckwinsvc的安裝和使用,需要的朋友可以參考下2015-06-06
Nest.js使用multer實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了Nest.js鵝湖使用multer實(shí)現(xiàn)文件上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03