原文： https://zhictory.github.io/bl...
网友 bottle_ 提供搭建一个简单本地服务器的思路为下：javascript
- 咱们须要一个 HTTP 服务器
- 对于不一样的请求，根据请求的 URL，咱们的服务器须要给予不一样的响应，所以咱们须要一个路由，用于把请求对应到请求处理程序（request handler）
- 当请求被服务器接收并经过路由传递以后，须要能够对其进行处理，所以咱们须要最终的请求处理程序
- 咱们须要从 HTML 文件里提取数据以及展现服务器传入的数据，所以须要将 HTML 和服务器结合起来
index.jshtml
引用模块java
const fs = require('fs'); // 系统文件及目录进行读写操做
const http = require('http'); // 封装了高效的 HTTP 服务器和 HTTP 客户端
const url = require('url'); // URL 处理
路由node
/**
* 路由
* @param {Function} handle 请求处理程序
* @param {String} pathname 路径
* @param {Object} response 响应数据
* @param {Object} postData 请求参数
*/
function route(handle, pathname, response, postData) {
if (typeof handle[pathname] === 'function') {
handle[pathname](response, postData);
} else {
response.writeHead(404, { 'Content-Type': 'text/plain' });
response.write('404 Not Found');
response.end();
}
}
服务器git
/**
* 服务器
* @param {Function} route 路由
* @param {Function} handle 请求处理程序
*/
function start(route, handle) {
function onRequest(request, response) {
const pathname = url.parse(request.url).pathname;
let postData = '';
switch (request.method) {
case 'GET':
postData += url.parse(request.url).query;
request.setEncoding('utf8');
route(handle, pathname, response, postData);
break;
case 'POST':
request.addListener('data', function (postDateChunk) {
postData += postDateChunk;
});
request.addListener('end', function () {
route(handle, pathname, response, postData);
});
break;
};
}
http.createServer(onRequest).listen(8080);
console.log('Server has started');
}
请求处理程序github
// 请求处理程序
const handle = {
// index 接口
'/public/index.html': function (response, postData) {
const pathname = __dirname + '/public/index.html';
fs.readFile(pathname, function (err, data) {
response.end(data);
});
},
// download 接口
'/download': function (response, postData) {
response.writeHead(200, { 'Content-Type': 'text/html' });
response.write(JSON.stringify({
code: 200,
data: {
'time': new Date().toLocaleString("en-US")
}
}));
response.end();
},
// upload 接口
'/upload': function (response, postData) {
response.writeHead(200, { 'Content-Type': 'text/html' });
response.write('You have sent: ' + JSON.parse(postData).value);
response.end();
}
};
启动服务器ajax
// 启动服务器 = 路由处理 + 接口处理 start(route, handle);
index.htmlexpress
<!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">
<title>Document</title>
</head>
<body>
<input type="text" name="input">
<button value="submit" name="submit">submit</button>
<p></p>
<!-- submit demo -->
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', function () {
const value = document.querySelector('input').value;
ajax(value);
}, true);
function ajax(value) {
const xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.querySelector('p').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', '/upload', true);
xmlhttp.send(JSON.stringify({
value: value
}));
// xmlhttp.open('GET', '/upload?value='+value, true);
// xmlhttp.send();
}
</script>
</body>
</html>
关于 GET 和 POST 方式的请求参数npm
GET 的请求参数是以查询参数形式放在 URL 后面的，服务器能够从 URL 上获取参数：url.parse(request.url).query。json
POST 的请求参数则须要做为 xhr.send() 的参数并转换为字符串来传递，本文使用 JSON.stringify() 来转换，再在服务器端用 JSON.parse() 转换。
服务器端在响应两种请求方式时，响应数据格式参考官方文档。
关于服务器响应头中的 Content-Type
通常网站的作法是：当返回 HTML 页面时为 text/html，当使用 JSONP 时为 text/javascript，当使用 CORS 时为 application/json。
关于 Node.js 热部署
Node.js 启动服务器时是将脚本放入内存，之后都会直接访问内存，避免重复载入。这种设计虽然有利于提升性能，却不利于开发调试，致使修改 Node.js 代码后须要手动终止进程并重启才会生效。
网友 会奔跑的胖子 提出方案：
你只须要在修改文件后保存，它就能自动替你发布，这就是所谓的热部署。
supervisor 就是一个 Node.js 的开源热部署工具：
npm i supervisor -g supervisor server.js
该网友还提到另外一个开源热部署工具 hotcode，但经测试 hotcode 若使用 express 4.x 则会报错，由于 hotcode 使用的 express.createServer() 已经被废弃。
参考：
学习笔记：用Nodejs搭建一个简单的本地服务器
NodeJS”热部署“代码，实现动态调试(hotnode，能够实现热更新)