http 模块起一个本地服务器例子
// 基础配置模块
const defaultConfig = {
hostname: '127.0.0.1',
port: 9527
};
module.exports = defaultConfig;
//创建服务器模块
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>标题1</h1>');
res.end();
});
server.listen(port, hostname, () => {
let url = `http://${hostname}:${port}`;
console.log(`打开浏览器，访问 ${chalk.green(url)}`);
});
supervisor
每次修改 nodejs 文件都要重新执行一次 node 命令，用 supervisor 插件能 watch 所有文件的变化，一变化就自动帮我们执行 node 命令
全局安装 supervisor
npm i -g supervisor
使用 supervisor 启动文件
supervisor app.js
anydoor 项目第一稿，回调版本
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) => {
/*获取用户的访问的 url*/
let {url} = req;
/*用根路径与用户访问的 url 拼接成绝对路径*/
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()) {
/*如果是文件，则返回文件内容*/
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(`打开浏览器，访问 ${chalk.green(url)}`);
});
anydoor 第二稿，async await 版
我们用 promisify 模块来改造回调
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) => {
/*获取用户的访问的 url*/
let {url} = req;
/*用根路径与用户访问的 url 拼接成绝对路径*/
let filePath = path.join(root, url);
route(res, filePath);
});
server.listen(port, hostname, () => {
let url = `http://${hostname}:${port}`;
console.log(`打开浏览器，访问 ${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()) {
/*如果是文件，则返回文件内容*/
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
- 创建一个模板
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>
- 创建一个渲染的数据
let data = {
title: path.basename(filePath), /*title 为文件名*/
dir: dir ? `/${dir}` : '', /*title 为文件所在的文件夹路径*/
files /*files 是一个数组，为文件列表*/
};
- 引入
handlebars
const Handlebars = require('handlebars');
- 读取模板文件
/*模板页面的路径*/
const tplPath = path.join(__dirname, '../template/dir.hbs');
/*读取模板内容，转成 utf8 的格式*/
const source = fs.readFileSync(tplPath, 'utf8');
- 使用 compile 方法生成一个模板
const template = Handlebars.compile(source)
- 渲染模板
template(data)
网友评论