在app.js中引入http模块
var http = require('http')
使用http模块得createServer方法去创建一个服务器
http.createServer(function (request, response) {
console.log(request.url);// 获取url
//request 获取url传过来的信息
//response 给浏览器响应信息
//设置html页面的编码，解决乱码
response.write('<head><meta charset="UTF-8"></head>')
//设置状态码
response.writeHead(200, { 'Content-Type': 'text/plain' })
response.end('hello word') // 结束响应
}).listen(8081)
在浏览器中访问这个端口号就可以看到hello word
接下来做静态资源得返回
当浏览器中访问某个路由得时候，我们需要返回这个路由对应得html页面 例如
http://localhost:8088/index.html，访问这个路由的话，我们就需要把index.html页面返回给客户端
首先通过fs模块提供的readFile方法去读取到index.html文件，然后通过end将这个页面返回给服务端就完成了
//获取地址
var pathname = req.url // http:// localhost:8088/index.html获取到的就是这样的 /index.html
http.createServer(function (request, response) {
fs.readFile('./static' + pathname, (err, data) => {
if (err) {
//设置响应头
res.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
//响应
res.end('404页面不存在');
}
//设置响应头
res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
//响应
res.end(data);
})
}).listen(8081)
image.png
页面已经出来了，但是样式好像没有起作用
image.png
可以看到，css文件我们请求头还是text/html，这样的格式显然是不对的，所以我们还得去处理一下请求的后缀，来返回不同的请求头
首先我们需要获取到地址栏的后缀，nodejs中的path模块提供了这样一个方法
var path = require('path')
//获取地址
var pathname = url.parse(req.url).pathname
//获取后缀名
let extname = path.extname(pathname)
获取到这个后缀名后，我们就需要根据这个后缀名来返回不同的请求头
这里我们有一个包含了很多种格式的json文件，我们只需要处理一下这个文件中的东西，然后按需返回请求头即可
image.png
首先处理一下这个数据，
这里写了一个工具方法用来处理获取到后缀之后返回的请求头
PS：这里先采用同步读取的方式，异步在下面会介绍
getFileMime(extname) {
//异步读取
// return new Promise((resolve, reject) => {
// fs.readFile('./module/mime.json', (err, data) => {
// if (err) {
// reject(err)
// return
// }
// let mimeobj = JSON.parse(data.toString())
// // console.log(mimeobj[extname])
// resolve(mimeobj[extname])
// })
// })
//同步读取
调用fs模块的readFileSync方法，将我们的格式文件传入，
然后返回的data就是里面的数据了，处理的步骤就不讲了，可以自行打印一下这个data
var data = fs.readFileSync('./module/mime.json')
//处理data得到一个格式对象
let mimeobj = JSON.parse(data.toString())
// console.log(mimeobj[extname])
将接收过来的后缀名参数作为属性名，去拿到这个对象里相对应的格式然后返回出去
return mimeobj[extname]
}
这样我们就已经可以实现请求返回不同的格式的文件了
var http = require('http')
var fs = require('fs')
var common = require('./module/common')
var path = require('path')
const url = require('url')
http.createServer(function (req, res) {
//获取地址
var pathname = url.parse(req.url).pathname
//判断地址是否为空，给他默认进入index页面
if (pathname == '/') {
pathname = '/index.html'
}
//获取后缀名
let extname = path.extname(pathname)
// console.log(pathname+'---'+extname)
if (pathname !== '/favicon.ico') {
//通过fs模块读取文件
fs.readFile('./static' + pathname, (err, data) => {
if (err) {
//设置响应头
res.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
//响应
res.end('404页面不存在');
}
//设置响应头
//这里调用上面封装的方法，得到不同的格式，然后拼串返回不同的请求头
let ContentType = common.getFileMime(extname)
res.writeHead(200, { 'Content-Type': '' + ContentType + ';charset="utf-8"' });
//响应
res.end(data);
})
}
}).listen(8088)
这样就完成一个静态资源的web服务器的搭建啦，现在访问路由就会正常返回一个html页面了
接上面的异步方法处理
getFileMime(extname) {
//异步读取
return new Promise((resolve, reject) => {
fs.readFile('./module/mime.json', (err, data) => {
if (err) {
reject(err)
return
}
let mimeobj = JSON.parse(data.toString())
// console.log(mimeobj[extname])
resolve(mimeobj[extname])
})
})
//同步读取
// var data = fs.readFileSync('./module/mime.json')
// let mimeobj = JSON.parse(data.toString())
// // console.log(mimeobj[extname])
// return mimeobj[extname]
}
ps:因为readFile是一个异步方法，所以在此出不能直接使用，需变为同步才可以正常，不然会出错，我们将他写成一个promise
app.js中使用async 和await来处理他，await去等待这个工具方法运行结束，这样就不会因为异步而出问题，同时我们需要将他外层的函数转为异步函数，也就是在函数前面加上async 要不然会报错，因为await必须在async的包裹下使用
if (pathname !== '/favicon.ico') {
//通过fs模块读取文件
fs.readFile('./static' + pathname, async (err, data) => {
if (err) {
//设置响应头
res.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
//响应
res.end('404页面不存在');
}
//设置响应头
let ContentType = await common.getFileMime(extname)
res.writeHead(200, { 'Content-Type': '' + ContentType + ';charset="utf-8"' });
//响应
res.end(data);
})
}
总结一下：其他没什么难点，就是nodejs几个内置的读取文件的方法的使用，注意请求各个文件的格式不同我们需要配置不同的请求头，不然文件报错
