http 模塊起一個(gè)本地服務(wù)器例子
// 基礎(chǔ)配置模塊
const defaultConfig = {
hostname: '127.0.0.1',
port: 9527
};
module.exports = defaultConfig;
//創(chuàng)建服務(wù)器模塊
const http = require('http');
const {port, hostname} = require('./config/defaultConfig');
const chalk = require('chalk');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': "text/html; charset=utf8"
});
res.write('<h1>標(biāo)題1</h1>');
res.end();
});
server.listen(port, hostname, () => {
let url = `http://${hostname}:${port}`;
console.log(`打開(kāi)瀏覽器油啤，訪問(wèn) ${chalk.green(url)}`);
});
supervisor
每次修改 nodejs 文件都要重新執(zhí)行一次 node 命令粤蝎，用 supervisor 插件能 watch 所有文件的變化赋除，一變化就自動(dòng)幫我們執(zhí)行 node 命令
全局安裝 supervisor
npm i -g supervisor
使用 supervisor 啟動(dòng)文件
supervisor app.js
anydoor 項(xiàng)目第一稿，回調(diào)版本
const http = require('http');
const path = require('path');
const fs = require('fs');
const {port, hostname, root} = require('./config/defaultConfig');
const chalk = require('chalk');
const server = http.createServer((req, res) => {
/*獲取用戶的訪問(wèn)的 url*/
let {url} = req;
/*用根路徑與用戶訪問(wèn)的 url 拼接成絕對(duì)路徑*/
let filePath = path.join(root, url);
/*判斷是文件還是文件夾*/
fs.stat(filePath, (err, stats) => {
if (err) {
res.writeHead(404, 'error', {
'Content-Type': 'text/html; charset=utf8'
});
res.end(`${filePath} 不找到文件或文件夾`);
return;
}
if (stats.isDirectory()) {
/*如果是文件夾戳护，則給出文件列表*/
fs.readdir(filePath, (err, files) => {
res.writeHead(200, 'directory', {
'Content-Type': 'text/plain; charset=utf8'
});
res.end(files.join('\n'));
});
}
if (stats.isFile()) {
/*如果是文件金抡，則返回文件內(nèi)容*/
res.writeHead(200, 'file', {
'Content-Type': 'text/plain; charset=utf8'
});
fs.createReadStream(filePath).pipe(res);
}
});
});
server.listen(port, hostname, () => {
let url = `http://${hostname}:${port}`;
console.log(`打開(kāi)瀏覽器，訪問(wèn) ${chalk.green(url)}`);
});
anydoor 第二稿腌且，async await 版
我們用 promisify 模塊來(lái)改造回調(diào)
const http = require('http');
const path = require('path');
const fs = require('fs');
const {port, hostname, root} = require('./config/defaultConfig');
const chalk = require('chalk');
const {promisify} = require('util');
const stat = promisify(fs.stat);
const readdir = promisify(fs.readdir);
const server = http.createServer((req, res) => {
/*獲取用戶的訪問(wèn)的 url*/
let {url} = req;
/*用根路徑與用戶訪問(wèn)的 url 拼接成絕對(duì)路徑*/
let filePath = path.join(root, url);
route(res, filePath);
});
server.listen(port, hostname, () => {
let url = `http://${hostname}:${port}`;
console.log(`打開(kāi)瀏覽器梗肝，訪問(wèn) ${chalk.green(url)}`);
});
async function route(res, filePath) {
try {
const stats = await stat(filePath);
/*判斷是文件還是文件夾*/
if (stats.isDirectory()) {
/*如果是文件夾，則給出文件列表*/
try {
const files = await readdir(filePath);
res.writeHead(200, 'directory', {
'Content-Type': 'text/plain; charset=utf8'
});
res.end(files.join('\n'));
}
catch (err) {
console.log(err);
}
}
if (stats.isFile()) {
/*如果是文件铺董，則返回文件內(nèi)容*/
res.writeHead(200, 'file', {
'Content-Type': 'text/plain; charset=utf8'
});
fs.createReadStream(filePath).pipe(res);
}
}
catch (err) {
res.writeHead(404, 'error', {
'Content-Type': 'text/html; charset=utf8'
});
res.end(`${filePath} 不找到文件或文件夾`);
}
}
anydoor 第三稿，用 handlebars 模板引擎將文件夾列表變成 html
- 安裝
handlebars
npm i --save handlebars
- 創(chuàng)建一個(gè)模板
dir.hbs
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<style>
.directory {
display: block;
width: 200px;
margin: 20px 0;
background-color: #93fff8;
text-decoration: none;
}
</style>
</head>
<body>
{{#each files}}
<a class="directory" href="{{../dir}}/{{this}}">{{this}}</a>
{{/each}}
</body>
</html>
- 創(chuàng)建一個(gè)渲染的數(shù)據(jù)
let data = {
title: path.basename(filePath), /*title 為文件名*/
dir: dir ? `/${dir}` : '', /*title 為文件所在的文件夾路徑*/
files /*files 是一個(gè)數(shù)組，為文件列表*/
};
- 引入
handlebars
const Handlebars = require('handlebars');
- 讀取模板文件
/*模板頁(yè)面的路徑*/
const tplPath = path.join(__dirname, '../template/dir.hbs');
/*讀取模板內(nèi)容粹懒，轉(zhuǎn)成 utf8 的格式*/
const source = fs.readFileSync(tplPath, 'utf8');
- 使用 compile 方法生成一個(gè)模板
const template = Handlebars.compile(source)
- 渲染模板
template(data)
