页面结构如下:
实现代码如下: // 使用http模块实现静态资源服务器 const http = require('http'); const path = require('path'); const fs = require('fs'); const URL = require('url'); // 搭建静态资源服务器,需要自身创建一个服务器 const server = http.createServer(async (req, res) => { // 获取地址 const url = req.url; const fileInfo = await getFileInfoByUrl(url); if (!fileInfo) { res.writeHead(404, {'Content-Type': 'text/plain'}) res.write('THE RESOURCE NOT FOUND', 'utf-8'); } else { res.writeHead(200) res.write(fileInfo,'utf-8'); } // 结束 res.end(); }) server.listen(9527); server.on('listening', _ => { console.log('正在监听9527这个端口') }) /** * 通过地址获取文件的信息 * @param url {String} 文件的地址 * @returns {Promise<Buffer>} */ async function getFileInfoByUrl(url) { const urlObj = URL.parse(url); const fileName = path.resolve(__dirname, 'public', urlObj.pathname.substr(1)); // 判断文件是否存在 const fileResult = await fileExits(fileName); // 如果文件不存在,分为两种情况,第一种是文件本身是不存在,第二种是文件是一个目录 // 文件不存在,那么给他默认路径拼接设置为 public下面的index.html if (!fileResult) return null; else if (fileResult.isDirectory()) { // 如果是目录, 默认使用index.html const fileNameDir = path.resolve(__dirname, 'public',urlObj.pathname.substr(1), 'index.html'); const dirRes = await fileExits(fileNameDir); if (!dirRes) return null; else { // 通过路径 读取文件内容,返回 return await fs.promises.readFile(fileNameDir); } } else { // 通过路径 读取文件内容,返回 return await fs.promises.readFile(fileName); } } /** * 通过文件名称读取文件流 * @param fileName {String} 文件名称 * @returns {ReadStream} 返回读取的文件字符串 */ // function getFileStream(fileName) { // // 创建读取流 // const cr = fs.createReadStream(fileName, { // flags: 'r', // autoClose: true, // highWaterMark: 64 * 1024 * 1024, // encoding: 'utf-8' // }); // let contentStr = ''; // // 开始读取文件 // cr.on('data', chunk => { // contentStr += chunk.toString(); // }) // cr.on('close', () => { // console.log(contentStr,'contentStr') // return contentStr; // }); // return contentStr; // } /** * 判断文件是否存在 * @param fileName {String} 文件名称 * @returns {Promise<Stats> | null} 结果 */ async function fileExits(fileName) { try { return await fs.promises.stat(fileName); } catch (e) { return null; } }
效果如下: