珠峰培训，专注前端

一、yarn 安装依赖包

yarn 是什么

yarn 和 npm 一样是包管理器，用来管理依赖包；yarn速度更快；

  • yarn 或 等效于 npm install
  • yarn add 依赖包 —dev 安装开发依赖包
  • yarn add 依赖包 —save 安装生成依赖
  • yarn remove 依赖包 卸载依赖包

二、http 模块

http 模块

是 node 的内置模块，提供 http 服务

创建一个服务器程序

  1. let http = require('http');
  2. let { readFileSync } = require('fs');
  3. // 1. 创建服务
  4. let server = http.createServer(function (req, res) {
  5.     // 创建服务器
  6.     console.log('有人访问了'); // 只要访问一次就会打印一次
  7.     // req 对象：request 这里面保存了客户端所有请求的信息
  8.     // res 对象：response 用里面有用户响应客户端请求的方法和属性
  9.     console.log(req.headers.cookie);
  11.     res.end('./index.html'); // 响应客户端请求，并在数据传递结束后断开；
  12. });
  14. // 设置端口监听
  15. server.listen(8080, function () {
  16.     // 服务创建成功并且监听成功会执行这个回调
  17.     console.log('server is running on port 8080')
  18. });
  • 一个端口只能用于给一个程序监听；8080 被当前的 server 使用了，其他程序就不能用

三、url 模块

url 模块也是 Node.js 内置的模块，用来解析请求的 url；

  1. let http = require('http');
  2. let url = require('url');
  4. let server = http.createServer((req, res) => {
  5.     // req 包含了全部的请求信息
  6.     // res 包含了全部的响应信息
  7.     console.log(req.url);
  9.     let urlObj = url.parse(req.url); // url 模块上有一个 parse 方法，可以把 url 解析成一个对象
  10.     console.log(urlObj);
  11.     // pathname 路径
  12.     // query 问号传参
  13.     // search 查询字符串 比 query 前面多一个问号
  16. });
  18. server.listen(8000, function () {
  19.     console.log('port 8000 is on service');
  20. });

四、根据请求路径返回不同内容

  • 根据请求的路径不同，返回不同的 html

思路：解析请求的 url 根据不同的路径作出不同的响应；

  1. let http = require('http');
  2. let url = require('url');
  3. let fs = require('fs');
  5. let server = http.createServer((req, res) => {
  6.     let urlObj = url.parse(req.url, true); // parse 方法第二个参数传 true 是把 url 中问号传参解析成对象；
  7.     let {pathname, query} = urlObj;
  8.     console.log(pathname);
  10.     // url 中的 path 表示了请求的路径，我们只需要从对应的目录下面把请求的路径对应的资源读取出来，然后响应给客户端即可；
  12.     // 如果客户端请求的是 html，我们返回给客户端，客户端收到 html 后开始解析 html，在解析的时候遇到 link、img、script 这些标签会再次发送 http 请求给服务端，服务端的监听函数就会再次被触发，只要有一个请求，createServer 时传递的函数就要触发一次，而服务端则要继续响应这些请求；
  14.     fs.readFile(`${__dirname + pathname}`,  function (err, data) {
  15.         if (err) {
  16.             res.end('NOT FOUND')
  17.         } else {
  18.             res.end(data);
  19.         }
  20.     })
  21. });
  22. server.listen(8000, () => console.log('port 8000 is on service'));

五、响应与Content-type

  • 服务器在响应客户端的请求时需要设置响应内容的内容类型，即在响应头中设置 Content-type。客户端收到服务端的响应后会根据这个内容类型来解析。浏览器有一些默认的文件如 html、js、css 可以不用设置也可以解析；
  • 内容类型 Content-type: 是一个响应头

  • 设置头信息 res.setHeader(头信息, 值)

  • res.setHeader(‘Content-Type’, ‘text/plain;charset=UTF-8’);

  • res.setHeader(‘set-cookie’, ‘x=y;’); res.setHeader(头信息, 值) 设置头信息
  1. let http = require('http');
  2. let fs = require('fs');
  3. let url = require('url');
  5. let server = http.createServer((req, res) => {
  6.     let urlObj = url.parse(req.url, true);
  8.     // 服务器在客户端响应客户端的请求时需要设置内容的内容类型，即 content-type，以便于客户端收到响应后知道按照何种规则解析这些内容。浏览器有一些文件，如 html、js、css 可以不用设置内容类型也可以解析；
  10.     // 内容类型：Content-type 是一个响应头：
  11.     // 设置响应头：res.setHeader(头信息, 值)
  12.     // res.setHeader('Content-type', 'text/plain;charset=utf8');
  14.     let {pathname} = urlObj;
  15.     let contentTypes = {
  16.         html: 'text/html',
  17.         css: 'text/css',
  18.         js: 'text/javascript',
  19.         png: 'image/png'
  20.     };
  21.     let typeReg = /\.(\w+)/g;
  22.     let type = typeReg.exec(pathname)[1];
  23.     console.log(type && contentTypes[type]);
  24.     if (type && contentTypes[type]) {
  25.         res.setHeader('Content-type', contentTypes[type]);
  26.     } else {
  27.         res.setHeader('Content-type', 'text/plain');
  28.     }
  29.     fs.readFile(`${__dirname + pathname}`, function (err, data) {
  30.         if (err) {
  31.             res.end('NOT FOUND')
  32.         } else {
  33.             res.end(data)
  34.         }
  35.     })
  36. });
  38. server.listen(8000, () => console.log('port 8000 is on'))

六、MIME类型

什么是MIME

MIME: 多用途互联网邮件扩展；每种文件都有自己的 MIME 类型，这个 MIME 类型就是服务端响应的时候要设置的 Content-Type；

mime依赖包

我们一个一个的记录每种文件的 content-type 很不现实，所以可以借助第三方的 mime 包；
mime 依赖包：mime 依赖包中包含了绝大多数文件的 mime 类型，是一个第三方的扩展；

  • 安装 mime
  1. yarn add mime --save

使用 mime 设置内容类型

  1. let http = require('http');
  2. let fs = require('fs');
  3. let url = require('url');
  4. let mime = require('mime');
  6. let server = http.createServer((req, res) => {
  7.     let { pathname } = url.parse(req.url, true);
  9.     res.setHeader('Content-type', mime.getType(pathname));
  10.     fs.readFile(__dirname + pathname, function (err, data) {
  11.         if (err) {
  13.         } else {
  14.             res.end(data)
  15.         }
  16.     })
  17. });
  19. server.listen(8000, () => console.log('port 8000 is on'))

七、设置响应状态码404

设置状态码

在 res 对象上有一个 statusCode 属性，这个属性表示 http 请求的状态码；通过修改这个属性设置 http 的状态码；

访问的路径不存在时返回404

  • 判断路径存在不存在
    fs.stat(路径, callback) 方法

示例：

  1. let http = require('http');
  2. let fs = require('fs');
  3. let url = require('url');
  4. let mime = require('mime');
  6. let server = http.createServer((req, res) => {
  7.     let {pathname} = url.parse(req.url, true);
  9.     console.log(pathname);
  11.     // 判断我们访问的路径存在不存在；
  12.     fs.stat(__dirname + pathname, (err, stats) => {
  13.         // fs.stat() 判断路径是否存在，如果不存在 err 将会是一个对象，如果路径存在 err 是 null
  14.         if (err) {
  15.             res.statusCode = '404';
  16.             res.end(`${pathname} is not found`);
  17.         } else {
  18.             // 如果代码执行到这里，说明路径有效；
  20.             let filePath = '';
  21.             if (pathname === '/') {
  22.                 // 当访问路径是 / 时要返回 index.html
  23.                 filePath = __dirname + '/index.html';
  24.             } else {
  25.                 filePath = __dirname + pathname;
  26.             }
  28.             fs.readFile(filePath, function (err, data) {
  29.                 res.end(data)
  30.             })
  31.         }
  32.     })
  33. });
  34. server.listen(8000, () => console.log('port 8000 is on'));

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】