nodejs 3分钟学会系列教程（6） 静态web服务器搭建（http url path fs模块）

1、先说最简单的http 服务

1）我第一篇 里面有写 可以安装 在 vscode 尚待你敲一下 node sn 安装第二个就行 然后 敲一下 node可以得到 下面的代码

var http = require("http");
http
  .createServer(function (request, response) {
    response.writeHead(200, { "Content-Type": 'text/html;charset="utf-8"' });
    response.end("Hello World");
  })
  .listen(8081);

console.log("Server running at http://127.0.0.1:8081/");

可以直接访问 并且打印出结果

2）新建一个 app-1.js

var http = require("http");
var fs = require("fs");

http
  .createServer(function (req, res) {
    // 1、读取地址
    var pathname = req.url;

    // 2、通过fs 模块读取文件
    if (pathname != "/favicon.ico") {
      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(3000);

• 这样 操作之后 我们可以在 http://127.0.0.1:3000/test.html 进行测试 是可以打印内容的

• 当然 这个test.html 是我新建在 static 文件夹下面的内容

• 不过 存在 问题 需要解决 直接访问 这个 也会展示 404 页面 这个不符合预期 http://127.0.0.1:3000

• 我们 需要重新修改一下

//只需要 加一句话 就行 
   // 1、读取地址
    var pathname = req.url;

    // 需要加一点判断   当页面是初始页面 也就是http://127.0.0.1:3000展示 /test.html 
    pathname = pathname == "/" ? "/test.html" : pathname;

• 这样 初始状态 就可以 解决了

3） 下一个问题 如何解析 css js文件 ？？？

• 首先 第一个问题 为什么不能 识别 我们可以先试一下 避免我在自言自语

• 我们在static 下面添加 另外两个测试文件 test.css和 test.js 并在 test.html 中引入使用

• 然后重启 node app-1.js

• 但是发现 css 和 js 没有生效

• 因为 css和js都被当作 html 处理了 因为响应头是这样设置的{ "Content-Type": 'text/html;charset="utf-8"' }

4） 所以接下来的问题就是 识别 css 并将响应头改成对应的css 识别 js 并改成对应的js就好

• 当前文件夹下 也就是 web-server 下面 新建 module文件夹 建 common.js文件

// 单独写一个模块 导出这个模块 匹配常见后缀
exports.getMine = function (extname) {
  switch (
    extname // extname 表示后缀
  ) {
    case ".html":
      return "text/html";
    case ".css":
      return "text/css";
    case ".js":
      return "text/javascript";
    default:
      return "text/html";
  }
};

• 在 app-1.js 引用这个内容

// 引入 common.js
const common = require("./module/common");

5）接下来 有个问题 如何 获取 后缀名呢 ？

使用 path模块

• app-1.js 中引入 这个模块

var path = require("path");
 // 这个方法  可以获取后缀名 path.extname
    var extname = path.extname(pathname);
    
     var mine = common.getMine(extname);
     
     var mine = common.getMine(extname); // 注意这个地方的拼接
        res.writeHead(200, { "Content-Type": "" + mine + ';charset="utf-8"' });
        res.end(data);

• 重新 启动 node app-1.js 大功告成 打工人的喜悦
• css js 都起作用了
  

6） 还有一个问题 当前不能识别 类似 /json?13427283199 这种东西

• 需要 想办法 去除json 后面的东西
• 需要 引入 url模块 使用 url.parse(req.url).pathname

var url = require("url");
var pathname = url.parse(req.url).pathname;

• 接下来 写一点 json 数据
• 重启 node app-1.js 就可访问 后面有数字也没关系

2、当前可实现的后缀 太少了 需要扩充一下 才行

1） 首先 找一个 test.json文件 放在data文件夹下面

{
    ".html": "text/html",
    ".css": "text/css",
    ".js": "text/javascript",
    ".gz": "application/x-gzip",
    ".h": "text/plain",
    ".gif": "image/gif"
}

2） common.js 写入一部分 json 数据

{
   const fs = require("fs");
	exports.getFileMine = function (extname) {
  fs.readFile("./data/test.json", (err, data) => {
    if (err) {
      console.log(err);
      return;
    }
    console.log(data);
  });
};
}

3） app-1.js 传入数据

common.getFileMine(".gif");

• 执行 node app-1.js 后

• 得到

• 更改 comman.js 里面 console.log(data.toString())

• 执行 之后可以拿到 test.json里的数据 不过展示为 json 格式 如何展示为对象形式呢？？

4） common.js里 使用 JSON.parse()

const fs = require("fs");
exports.getFileMine = function (extname) {
  fs.readFile("./data/test.json", (err, data) => {
    if (err) {
      console.log(err);
      return;
    }

    let mimeObj = JSON.parse(data.toString());
    console.log(mimeObj[extname]);
  });
};

5） app-1.js 里面使用 前提是引入过了

common.getFileMine(".gif");

• 之后后打印 test.json 里面定义的类型

3、有个问题需要解决 一下 如何展示到页面 ？

1） 这是一个异步的过程

• 直接调用是不可以的
• 封装到一个 promise 中后调用 加上 async 和 await 配合使用

const fs = require("fs");
exports.getFileMine = function (extname) {
  return new Promise((resolve, reject) => {
    fs.readFile("./data/test.json", (err, data) => {
      if (err) {
        console.log(err);
        reject(err); // 失败捕获
        return;
      }

      let mimeObj = JSON.parse(data.toString());
      // console.log(mimeObj[extname]);
      resolve(mimeObj[extname]); // 成功时拿到后缀
    });
  });
};

2） app-2.js 也需要 改动 await 方法外面需要使用 async 方法包裹

3）当然 还有 第二种方法的介绍 使用 nodejs 自带的模块 fs.readFileSync('./data/test.json') 同步方法

• 增加第二种方法 comman.js

const fs = require("fs");
exports.getFileMine = function (extname) {
  var data = fs.readFileSync("./data/test.json"); // 同步方法
  var mimeObj = JSON.parse(data.toString());
  return mimeObj[extname];
};

• 重新 启动 node app-1.js 也是可以运行的

• 页面 对应文件类型相同

• 打工告成 看到这里 给自己点个赞吧