初始化路由

1.认识路由

路由，顾名思义，它是指路径的指向或由来，即访问一个地址后它的指向，确定地址指向后，将会根据不同的路由地址，编写相应的代码，如下图所示。

::: center

:::

一次地址的指向，实质上是一次数据请求的过程，在这种请求的过程中，还可以携带请求的方式，如 POST 或 GET，同时，也可以携带请求的参数，根据这些请求携带的方式和参数，即使是同一个地址，也可以执行不同的代码，如下图所示。

::: center

:::

借助路由的这些特性，被广泛地应用于项目中各页面的切换，数据接口的请求，因此，路由是项目开发中必须要掌握的内容。在理解了它的重要性之后，如何去配置一个路由呢？带着这个问题，下面来说路由的配置方法。

2.配置路由

在 node 中配置路由十分简单，首先，使用以下命令下载搭建好的开发环境项目包，地址如下所示：

1	wget https://labfile.oss.aliyuncs.com/courses/4380/router.zip && unzip router.zip

然后，解压该项目包至 project 文件夹中，并打开项目包 router 文件夹，找到 bin 文件夹，在该文件夹下，创建一个名称为 reqRouters 的 js 文件，加入如下所示的代码：

const reqRouters = (req, res) => {
  if (req.path === "/aa") {
    return "首页";
  }
  if (req.path === "/bb") {
    return "列表页";
  }
  if (req.path === "/cc") {
    return "详细页";
  }
};
module.exports = reqRouters;

上述代码中定义了一个 reqRouters 函数，在函数中，参数req表示请求携带的对象，用于创建服务器请求时回调函数使用，在这个req对象中，通过path来获取请求到时的路由地址，根据不同的地址，返回不同的内容，最后输出这个名称为 reqRouters 函数。

接下来，再次找到 bin 文件夹，打开名称为 app 的 js 文件，删除原有的内容，加入如下所示的代码。

:::: code-tabs
@tab app.js

const reqRouters = require("./reqRouters");
const serverHandle = (req, res) => {
  res.setHeader("Content-Type", "application/json");
  req.path = req.url.split("?")[0];
  const result = reqRouters(req, res);
  if (result) {
    res.write(result);
    res.end();
    return;
  }
  res.writeHead(404, { "Content-Type": "text/plain" });
  res.write("404 Not Found\n");
  res.end();
};
module.exports = serverHandle;

::::

在上述代码中，首先，使用 require 输入 reqRouters 模块，用于获取请求输出的内容，其次，定义一个名称为 serverHandle 的函数，用于服务创建时的回调，在该函数中，向 reqRouters 函数传入请求的路由地址，获取输出的内容并保存至变量 result 中，最后，判断变量 result 中是否有内容，如果有，则直接输出在页面中，否则，在页面中输出 “404 Not Found“ 的信息。

最后，找到 bin 文件夹，打开名称为 index 的 js 文件，删除原有的内容，加入如下所示的代码。

:::: code-tabs
@tab index.js

const http = require("http");
const serverHandle = require("./app");
const port = 8080;
const server = http.createServer(serverHandle);
server.listen(port, () => {
  console.log("服务器运行在 8080 端口...");
});

::::

在上述代码中，首先，分别导入 http 和 serverHandle 模块，前者用于创建一个新的服务，是 node 自带模块，后者用于创建服务后的回调函数，当服务创建成功后，使用 listen 方法，在指定的 8080 端口下侦听，当服务启动后，就可以在浏览器的地址栏中，根据启动的地址和端口访问这个服务了，由于配置的路由在服务中，这时，就可以按配置的路由访问页面了 🤪

3.访问路由

要访问路由，需要先启动服务，因此，首先，在项目文件夹router下打开终端界面，并输入如下指令：

1	npm run dev

服务启动后的界面效果如下图所示：

::: center

:::

服务器启动成功后就可以在浏览器中，根据指定的地址和端口，访问路由对应的的页面了。

当在浏览器地址栏中输入 localhost:8080/aa 时，它的 url.path 值为 ‘/a’ ，传给 reqRouters 函数后，则返回 “首页” 字符，因此，页面中输出 “首页” 内容，其他输入地址依此类推，根据不同的 url.path 值，向页面输出不同的内容，最终实现路由的功能。

4.路由开发

4.1 获取请求方式

在发送一次请求时，不同的请求方式，将会返回不同的数据，目前常用的请求方式分为 GET 和 POST 两种，前者常用于查询请求，后者用于增加、修改和删除的请求，那么，在 node 中，如何获取路由中的请求方式呢？

首先，使用以下命令获取搭建好的路由初始化项目包，地址如下所示：

1	wget https://labfile.oss.aliyuncs.com/courses/4380/router-param.zip && unzip router-param.zip

打开router-param/bin/reqRouters.js文件，将代码删除并修改为：

:::: code-tabs
@tab reqRouters.js

const reqRouters = (req, res) => {
  if (req.method === "GET") return "这是一次 GET 方式请求";
  if (req.method === "POST") return "这是一次 POST 方式请求";
};
module.exports = reqRouters;

::::

上面通过req的method属性获取到了服务器请求的方式，并返回不同的文字。

修改完成后在router-param文件夹下，打开终端输入指令启动 Node 服务：

1	npm run dev

如果需要测试POST请求，需要借助到之前的postman工具，更多内容见官网。

::: center

:::

通过上述例子知道，我们可以获取路由的方式。不仅如此，我们还能获取到路由的参数，接下来以 GET 方式为例，介绍路由的参数。

4.2 获取 GET 方式传参

我们知道路由传参是通过在url后面加上?并让参数以&分隔的方式来组合。

获取GET方式传参的过程实际上是根据传参名称来获取变量值的过程。操作起来就是，先实例化一个 URL对象 ，然后通过该对象获取
网址查询参数的 searchParams 对象，根据参数的名称获取对应的值。

打开reqRouters.js，将代码修改为：

:::: code-tabs
@tab reqRouters.js

// 引入 url 模块
var url = require("url");
const reqRouters = (req, res) => {
  if (req.method === "GET") {
    const myURL = new URL(req.url, req.headers.host);
    let params = myURL.searchParams;
    if (params.get("id") && params.get("name")) {
      return params.get("id") + "," + params.get("name");
    } else {
      return "没有传入相应参数！";
    }
  }
};
module.exports = reqRouters;

::::

上述代码中，首先实例化了一个 URL 对象，在实例化的过程中传入了两个参数，第一个参数是 url 的请求地址，第二个是base 表示要解析的基本网址，包括地址的域名和端口。如果 url 地址是相对的，则要添加第二个参数，如果是绝对地址就可以省略第二个参数。

然后判断网址查询参数 params = myURL.searchParams 是否存在对应的 URL 参数，处理和返回它。

在项目文件夹router-params下输入指令：

1	npm run dev

4.3 获取 POST 方式传参

相比 GET 方式来说，POST要复杂很多，但也更加安全。使用 POST 传参时，携带的请求数据并不在路由中，而是在请求对象中，因此，需要绑定请求过程中的两个事件，一个data事件，一个end事件。

在data事件中获取并累加每次请求传入的参数值，end事件会在1请求结束后触发，在事件中处理累加结束后的请求参数，输出至页面中。

修改router-param中的bin下的index.js文件，删除原有代码并替换成：
:::: code-tabs
@tab index.js

const http = require("http");
const serverHandle = (req, res) => {
  if (req.method === "POST") {
    var strPOST = "";
    // 绑定数据请求事件，每当接受到请求体的数据，就累加到 strPOST 变量中
    req.on("data", function (chunk) {
      strPOST += chunk;
    });
    // 绑定数据请求结束事件，向页面输出指定的参数值
    req.on("end", function () {
      res.setHeader("Content-Type", "application/json");
      let objPOST = new URLSearchParams(strPOST);
      if (objPOST.get("id") && objPOST.get("name")) {
        const result = objPOST.get("id") + "," + objPOST.get("name");
        res.write(result);
      } else {
        res.write("没有传入相应参数！");
      }
      res.end();
      return;
    });
  }
};
const port = 8080;
const server = http.createServer(serverHandle);
server.listen(port, () => {
  console.log("服务器运行在 8080 端口...");
});

::::

在事件data中每次累加参数，在end中查询参数是否包含id或name，然后写入页面。

修改完成后，在 router-param 下，打开终端界面：

1	npm run dev