案例-通过创建的服务器将本地文件转换成web资源
- 目的：将本地文件转换成web资源
- 思路：将文件实际存放的地址作为每个资源的请求url地址。
- 大致流程：
浏览器–请求->自己写的web服务器–读文件->磁盘目录–读取完毕->自己写的web服务器–响应->浏览器
服务器所读取到的文件内容是字符串，通过res.end()方法响应给客户端，客户端请求回来的不是具体的文件，而是文件中存储的字符串，服务器其实就是充当一个字符串的搬运工。 - 实现步骤
- 导入需要的模块
- 创建基本的web服务器
- 将资源的请求url地址映射为文件的存放路径（需要用到之前学的path模块的知识）
- 读取文件内容并响应给客户端（需要用到之前学到的fs模块的知识）
- 优化资源的请求路径
实现代码
实现代码在最后
-
首先在终端输入 node 文件名.js命令运行代码启动服务器，如下
-
根据代码，我们 有两种方式 可以访问，第一种是请求路径为/，因为我们已经在代码中输入了路径，因此直接打开该网址即可，如下
-
然后是第二种，请求路径不为/，我们直接输入要请求的文件/test.html，因为在代码中我们已经拼接其上层路径，如下
-
可以右键点击页面，选择检查，查看页面源代码
//导入http，path和fs模块
const http = require('http')
//用来读取文件
const path = require('path')
//用来处理文件路径
const fs = require('fs')
//创建web服务器
const server = http.createServer()
//监听web服务器的request事件
server.on('request', (req, res) => {
//获取到客户端请求的url地址，该url类似于我们上一章，我们在http://127.0.0.1后面添加了/about.html
//变成了http://127.0.0.1/about.html,那获取到的url即/about.html，使用后面的路径拼接方法即可得到完整的路径
const url = req.url
//将请求到的url地址映射为本地文件的存放路径,path.join()方法用于路径拼接，__dirname表示当前代码文件所处文件的路径
//const fpath = path.join(__dirname, url) //未优化的路径拼接
//优化后的路径拼接
let fpath = ''
if (url === '/') {
//如果请求的路径是/，则手动指定文件的存放路径,我需要获取的文件资源test.html存放在当前目录的test文件夹内
fpath = path.join(__dirname, './test/test.html')
} else {
//若请求的路径不为/，则动态拼接文件的存放路径
fpath = path.join(__dirname, './test', url)
}
//根据映射过来的文件路径读取文件
fs.readFile(fpath, 'utf8', (err, dataStr) => {
//读取文件失败后向客户端响应固定的错误消息
if (err) {
return res.end('404 Not found.')
}
//读取文件成功后将读取成功的内容响应给客户端
res.end(dataStr)
})
})
//启动服务器
server.listen(80, function () {
console.log('Server listen at http://127.0.0.1')
})
完成！！😊
