您好,登錄后才能下訂單哦!
這篇文章主要介紹了node靜態服務器怎么實現靜態讀取文件或文件夾,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
現在我們已經大致了解了node 的基本工作原理,現在來實現一個系統的功能 讀取文件或者文件夾
采坑記錄
中文輸出亂碼問題
res.statusCode = 200 res.setHeader('Content-Type', 'text/plain') res.end('啊啊和嘎哈啊')
輸出中出現中文亂碼 附解決方案 ~
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
或
res.writeHead(200, { 'Context-Type': 'text/plain' }) res.write('<head><meta charset="utf-8"/></head>')
文件讀取方式
node 允許通過兩種方式讀取并輸出文件
one : 以文件流的形式讀取與返回一起進行,快 = 推薦
fs.createReadStream(filePath).pipe(res)
two : 先將文件整個讀取,然后將文件內容一起返回,簡單說這就是api的蹩腳使用 = 慢
fs.readFile(filePath, (err, data) => { if (err) return res.end(data) })
讀取文件或者文件夾
廢話不說,上代碼
require('./config/defaultConfig') 更新為以下
module.exports = { // 主機名稱 hostname: '127.0.0.1', // 端口號 port: 6969, // 當前文件夾 root: process.cwd() }
// 引入http內置模塊 const http = require('http') // 引入chalk 用于美化后臺打印 const chalk = require('chalk') const path = require('path') const fs = require('fs') // 引入基本配置 const conf = require('./config/defaultConfig') // 創建一個server 實例 const server = http.createServer((rep, res) => { // 拿到路徑 const filePath = path.join(conf.root, rep.url) // 判斷是否為文件或者文件夾 fs.stat(filePath, (err, stats) => { // 設置公共頭部信息 res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }) if (err) { // 狀態碼 res.statusCode = 404 // 找不到提示文本 res.end(`${filePath} is 404`) return } if (stats.isFile()) { // 如果是文件 返回文件內容 res.statusCode = 200 fs.createReadStream(filePath).pipe(res) } else if (stats.isDirectory()) { // 如果是文件夾,返回文件列表 fs.readdir(filePath, (err, files) => { if (err) return res.statusCode = 200 res.end(files.join(',')) }) } }) }) // 監聽 server 實例 server.listen(conf.port, conf.hostname, () => { const addr = `http:// ${conf.hostname}:${conf.port}` console.info(`server startd at ${chalk.green(addr)}`) })
代碼優化
上述代碼存在很多回調,代碼臃腫可讀性差。下面利用異步將回調去除,達到優化效果
require-atomic-updates 注意eslint對于此項的限制, 為此將實參await
const fs = require('fs') const promisify = require('util').promisify const stat = promisify(fs.stat) const readdir = promisify(fs.readdir) module.exports = async function(rep, res, filePath) { // 規避此問題require-atomic-updates報告在異步函數中重新分配變量時可能發生的競爭條件錯誤 const awaitRes = await res awaitRes.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }) try { const stats = await stat(filePath) if (stats.isFile()) { // 如果是文件 返回文件內容 awaitRes.statusCode = 200 fs.createReadStream(filePath).pipe(awaitRes) } else if (stats.isDirectory()) { // 如果是文件夾,返回文件列表 const file = readdir(filePath) awaitRes.statusCode = 200 awaitRes.end(file.join(',')) } } catch (ex) { // 狀態碼 awaitRes.statusCode = 404 // 找不到提示文本 awaitRes.end(`${filePath} is 404`) } }
app.js文件變更為
// 引入http內置模塊 const http = require('http') // 引入chalk 用于美化后臺打印 const chalk = require('chalk') const path = require('path') const route = require('./header/route') // 引入基本配置 const conf = require('./config/defaultConfig') // 創建一個server 實例 const server = http.createServer((rep, res) => { // 拿到路徑 const filePath = path.join(conf.root, rep.url) route(rep, res, filePath) }) // 監聽 server 實例 server.listen(conf.port, conf.hostname, () => { const addr = `http:// ${conf.hostname}:${conf.port}` console.info(`server startd at ${chalk.green(addr)}`) })
至此實現了通過hash路徑輸入,實現文件或文件夾的讀取/前進后退
感謝你能夠認真閱讀完這篇文章,希望小編分享的“node靜態服務器怎么實現靜態讀取文件或文件夾”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。