1.新建10文件夹，10文件夹下再新建static文件夹和server.js文件，server.js中引入http、fs、url三个模块，创建http服务，侦听8080端口。
var http = require('http')
var fs = require('fs')
var url = require('url')
http.createServer(function (req, res) {
}).listen(8080)
2.在http.createServer的回调函数中处理请求req与返回res参数，通过req.url获取请求的url地址，url模块对对req.url进行处理。pathname 是请求的路径，router是不带扩展名的请求路径，ext是请求文件的扩展名。
http.createServer(function (req, res) {
var urls = url.parse(req.url, true)
var pathname = urls.pathname
if (pathname == '/') pathname = '/index.html'
var router = pathname.split('.')[0]
var ext = pathname.split('.')[1]
}).listen(8080)
3.对请求路径带扩展名与不带扩展名分别进行处理，带扩展名router && ext请求静态资源；不带扩展名router && !ext则请求数据。
if (router && ext) {
} else if (router && !ext) {
}
4.返回静态资源，通过fs模块读取static文件夹下文件，在其回调函数中，通过res返回data参数。fs模块的读取文件方法fs.readFile(pathname,callback)
if (router && ext) {
fs.readFile('./static' + pathname, function (err, data) {
res.writeHead(200, { 'Content-Type': mime(ext) })
res.write(data)
res.end()
})
}
5.对静态资源进行文件错误处理，如果在static文件夹下没有找到请求的文件，文件扩展名ext == 'html'则返回404.html文件，如果是其它扩展名的文件，则不返回任何信息。
if (router && ext) {
fs.readFile('./static' + pathname, function (err, data) {
if (err) {
if (ext == 'html') {
fs.readFile('./static/404.html', function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' })
res.write(data)
res.end()
})
} else {
res.end()
}
return
}
res.writeHead(200, { 'Content-Type': mime(ext) })
res.write(data)
res.end()
})
}
6.调用mime(ext)函数是根据扩展名ext返回文件的类型，mime函数定义如下，不要将其放在http.createServer的回调函数中。
function mime(ext) {
if (ext == 'html') {
ext = 'text/html'
} else if (ext == 'css') {
ext = 'text/css'
} else if (ext == 'js') {
ext = 'application/x-javascript'
} else if (ext == 'json') {
ext = 'application/json'
} else if (ext == 'txt') {
ext = 'text/plain'
} else if (ext == 'jpg') {
ext = 'image/jpeg'
} else if (ext == 'png') {
ext = 'image/png'
} else if (ext == 'gif') {
ext = 'image/gif'
} else {
ext = 'text/html'
}
return ext
}
7.对没有扩展名的请求路径进行处理，返回data字符串测试，具体功能后续章节有需求再添加。
else if (router && !ext) {
res.writeHead(200, { 'Content-Type': 'text/txt' })
res.write('data')
res.end()
}
8.server.js的完整代码
var http = require('http')
var fs = require('fs')
var url = require('url')
http.createServer(function (req, res) {
var urls = url.parse(req.url, true)
var pathname = urls.pathname
if (pathname == '/') pathname = '/index.html'
var router = pathname.split('.')[0]
var ext = pathname.split('.')[1]
if (router && ext) {
fs.readFile('./static' + pathname, function (err, data) {
if (err) {
if (ext == 'html') {
fs.readFile('./static/404.html', function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' })
res.write(data)
res.end()
})
} else {
res.end()
}
return
}
res.writeHead(200, { 'Content-Type': mime(ext) })
res.write(data)
res.end()
})
} else if (router && !ext) {
res.writeHead(200, { 'Content-Type': 'text/txt' })
res.write('data')
res.end()
}
}).listen(8080)
console.log('run http://127.0.0.1:8080')
function mime(ext) {
if (ext == 'html') {
ext = 'text/html'
} else if (ext == 'css') {
ext = 'text/css'
} else if (ext == 'js') {
ext = 'application/x-javascript'
} else if (ext == 'json') {
ext = 'application/json'
} else if (ext == 'txt') {
ext = 'text/plain'
} else if (ext == 'jpg') {
ext = 'image/jpeg'
} else if (ext == 'png') {
ext = 'image/png'
} else if (ext == 'gif') {
ext = 'image/gif'
} else {
ext = 'text/html'
}
return ext
}
9.在static文件夹下，新建index.html，通过!!代码自动补全后再输入其余标签。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="icon" href="data:;base64,=">
<title>index</title>
<style>
</style>
</head>
<body>
<h3>index测试页面</h3>
<script>
</script>
</body>
</html>
10.VSCode中10文件夹点右键，在终端中打开，输入node server运行服务，浏览器地址栏输入http://127.0.0.1:8080，显示如下
