Express の Hello World

冷不防 2024-05-24 04:00 81阅读 0赞

## 记给自己 Express の Hello World ##

`Express`是基于 `Node.js` 平台，快速、开放、极简的 Web 开发框架。如果用 `Node.js` 开发后端，大概率离开不了 `Express`。虽然现在有很多优秀的框架，如 Egg.js 出现，学习 `Express` 了解一些基本的底层的 `HTTP` 知识很是很必要。

### Hello World ###

要使用 `Express` 需要先安装 `Express`。创建文件夹 `node`, 运行下面的命令安装 `Express`。

npm install express@4.17.1

在 `node` 文件夹下创建 `express` 文件夹，在 `express` 下创建 `helloworld.js`  
![在这里插入图片描述][db2c6d783c1a47bd80ede9f7a27e2f20.png]  
下面是 `helloworld.js` 的内容

let express = require('express');
    let app = express();
    
    app.get('/', function (req, res) {
        
      console.log('hello, world');
      res.send('hello, world');
    });
    
    app.listen(3000, function () {
        
      console.log('server started.');
    });

之后，在`express`路径下运行`node helloworld.js`。并访问 [http://localhost:3000][http_localhost_3000],  
![在这里插入图片描述][c51a3697f4ce46f4b0ed3aa749614de7.png]  
![在这里插入图片描述][9eb053c731dc46e194c9302afdb399eb.png]

### 理解 Hello World ###

#### express() ####

上面的代码都什么意思呢。第一行我就懒得记了

let app = express();

`express()` 创建一个 `Express` 应用，这是一个由 `express` 模块暴露的顶级函数。这是什么意思呢，意思就是如果你将导入的模块名改成 `springBoot` 那么代码还是可以运行?

let springBoot = require('express');
    let app = springBoot();

哈哈哈，这是因为 `express` 模块暴露出来的就是一个函数。下面是`node_modules/express/lib/express.js`的代码

/**
     * Expose `createApplication()`.
     */
    exports = module.exports = createApplication;

#### get() ####

app.get('/', function (req, res) {
        
      console.log('hello, world');
      res.send('hello, world');
    });

`get()`方法将`GET`请求路由到指定路径，并调用指定的回调函数。这个方法的原型是  
`app.get(path, callback [, callback ...])`。第一个参数就是路由的地址，即`GET`的请求路径。?你可能会问，我请求的不是`http://localhost:3000`吗？为什么代码里是`/`呢？  
![在这里插入图片描述][06ef25cea7bb42648ab348385ad4cbed.png]  
打开控制面板，就一目了然了。看似访问的是`http://localhost:3000`，实际上是`http://localhost:3000/`  
`get()`方法的第一个参数是`path`。这个参数可以是字符串，也可以是正则，还可以是数组。默认是`/`，表示根路径。即便请求根路径，第一个参数也不能不写哦！⚠

如果用户访问时，什么路径也不输(`http://localhost:3000`)或者输(`http://localhost:3000/index`)我们都想返回`hello, word`怎么办呢？试试这样写

app.get(['/', '/index'], function (req, res) {
        
      console.log('hello, world');
      res.send('hello, world');
    });

关于正则等更多写法，可以参考☞[这里][Link 1]

接着来看 `get()` 方法的第二个参数`callback`回调函数。回调函数接收 2 个参数（?3个参数等下说）这 2 个参数就是大名鼎鼎的`request`和`response`。在代码中出现的 `send()` 方法表示发送`HTTP`响应。

res.send('hello, world');

那冒出来的第三个参数是干什么的？`next`  
`express`模块允许我们对同一个请求，设置不同的回调函数，这些回调函数就通过`next`调用，接着上面的例子。虽然访问根路径`/`和`/index`都返回相同的内容，但是我们像当访问根路径时特别地做些处理，就可以这样写

app.get('/', function (req, res, next) {
        
      console.log('我是根路径哦');
      next(); // 下一个回调函数
    });
    app.get(['/', '/index'], function (req, res) {
        
      console.log('hello, world');
      res.send('hello, world');
    });

![在这里插入图片描述][c846f7b26e1e462798e584dd440f6cf8.png]

#### listen() ####

这个函数指定的就是`express`程序监听的端口。如果端口被忽略或者是`0`，操作系统就会分配一个任意未被使用的端口。  
同样可以指定城许监听的主机，如下

app.listen(3000, '127.0.0.1', function () {
        
      console.log('server started.');
    });

也可以在回调函数里接收错误信息。因为`3306`已经被本机的`mysql`占用，所以启动失败`listen EACCES: permission denied 127.0.0.1:3306`

app.listen(3306, '127.0.0.1', function (err) {
        
      if (err) {
        
        console.log('启动异常', err);
      }
      console.log('server started.');
    });

好了，这就是`express`的 Hello World 全部内容。下一次计划写`get`请求的部分。加油?！！！！

[db2c6d783c1a47bd80ede9f7a27e2f20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/aad92938264342bca53159f5b62c48bb.png
[http_localhost_3000]: http://localhost:3000
[c51a3697f4ce46f4b0ed3aa749614de7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/89bfb46ca6f14583a28ee05f7a08691f.png
[9eb053c731dc46e194c9302afdb399eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/9d1d85fdadca462aa658f8a70b69a982.png
[06ef25cea7bb42648ab348385ad4cbed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/4d74fd394109448da972719e1c298ca2.png
[Link 1]: https://www.expressjs.com.cn/4x/api.html#path-examples
[c846f7b26e1e462798e584dd440f6cf8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/5cc2a314f6d34842a39d65440889443e.png