Express搭建简单的服务器并实现HTTP请求

发表于 分类于

功能介绍

今天要跟大家分享搭建一个简单的Express服务器并实现HTTP请求，同时在服务器端获取到请求数据。文章主要关注服务器搭建、HTTP请求的模拟实现以及请求数据的获取，至于数据的后续操作和对请求的响应不在今天的讨论范围之内。

服务器搭建

由于整个环境需要建立在node.js的大环境之下，所以下边的所有操作均是在node环境下进行的。

如果你还没有安装node，请自行安装。这里就不再单独介绍node.js的具体安装步骤了，需要的请自行百度。

创建项目

这里演示的时候，我是在桌面创建项目。因此，首先在终端使用终端命令创建一个项目文件夹，取个名字，就叫test吧。

  1. 在桌面创建项目文件夹，并进入文件夹，创建一个名字叫public的文件夹。在终端依次输入下面的命令：
1
2
3
4
$ cd desktop
$ mkdir test
$ cd test
$ mkdir public
  1. 初始化项目。在终端输入下面的命令：
1
$ npm init -y

配置服务器

环境搭建

  1. 安装express。在终端输入下面的命令：
1
$ npm install express --save
  1. 安装body-parser(用于解析post请求的请求体)。在终端输入下面的命令：
1
$ npm install body-parser --save
  1. 创建服务器脚本app.js。在终端输入下面的命令：
1
$ touch app.js

这样，我们前期需要的环境就基本搭建完成了。下面开始正式的部署。

页面构建

为了提交数据，我们需要一个页面。下面构建一个简单的页面，文件名为index.html，放在public文件夹下。
直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTTP请求测试-GET请求</title>
</head>
<body>
  <h1>GET请求</h1>
  <form action="senddata" method="get">
    <label>用户名：</label>
    <input type="text" name="username" id="username">
    <br />
    <label>密 &nbsp; 码：</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="提交" id="btn">
  </form>
</body>
</html>

这个页面只有一个表单，里面包含两个文本框，分别用于提交username和password 两项数据，点击提交按钮即可发送一个GET请求。

服务器搭建

  1. 引入express模块
1
let express = require('express');
  1. 创建服务器
1
let app = express();
  1. 设置监听
    这里我们监听服务器的9005端口
1
2
3
app.listen(9005,'127.0.0.1',function(){
  console.log('Express Server is running at localhost:9005!');
})
  1. 配置静态文件夹，检查服务器能否正常访问
    将public文件夹设置为静态目录，即可直接通过文件路径访问其中的文件
    例如：http://127.0.0.1:9005/index.html 可以直接访问到public目录下的index.html页面
1
app.use(express.static(`${__dirname}/public`));

处理HTTP请求

app.js文件里，处理HTTP请求部分
代码如下：

1
2
3
4
5
6
app.get('/senddata',function(req,res){
  console.log(req);
  console.log(req.query);
  // GET请求发送的数据是直接拼接在URL后面的，储存在请求的query之中，可以直接通过req.query拿到
  // 例如：req.query.username可以拿到传入的用户名，req.query.password即可拿到传入的密码
})

完整的js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 导入express，创建服务器的模块
let express = require('express');

// 使用express创建app服务器
let app = express();

// 静态文件夹
app.use(express.static(`${__dirname}/public`));

// 处理http请求
app.get('/senddata',function(req,res){
  console.log(req);
  console.log(req.query);
  // GET请求发送的数据是直接拼接在URL后面的，储存在请求的query之中，可以直接通过req.query拿到
  // 例如：req.query.username可以拿到传入的用户名，req.query.password即可拿到传入的密码
})

// 设置监听端口
app.listen(9005,'127.0.0.1',function(){
  console.log('Express server is running on localhost:9005!');
})

效果测试

  1. 打开终端，进入项目文件夹，使用命令运行app.js。依次在终端输入以下命令：
1
2
$ cd desktop/test
$ node app.js
  1. 在浏览器访问index.html页面
    打开浏览器，在地址栏输入下面的url:
    http://127.0.0.1:9005/index.html 或者是 http://localhost:9005/index.html
  2. 输入用户名和密码后，点击提交按钮，即可发送HTTP请求。

这时，我们在终端里就可以看到已经成功输出的请求数据。

POST请求

上面我们成功获取到了GET请求的请求数据，如果是POST请求的话，会稍微有所不同。
下面是页面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTTP请求-POST请求</title>
</head>
<body>
  <h1>POST请求</h1>
  <form action="/senddata" method="post">
    <label>用户名：</label>
    <input type="text" name="username" id="username">
    <br />
    <label>密 &nbsp; 码：</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="提交" id="btn">
  </form>
</body>
</html>

由于**POST请求的数据是存放在请求体内部的，我们直接访问无法拿到数据**，需要借助body-parser这个插件来解析请求体，才能拿到请求数据。所以，js代码稍微有点不同。
下面是js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 导入express，创建服务器的模块
let express = require('express');
// 引入body-parser模块解析请求体，不然无法获取到req.body
let bodyParser = require('body-parser');

// 使用express创建app服务器
let app = express();

// 静态文件夹
app.use(express.static(`${__dirname}/public`));

// 使用bodyParser解析请求体
// 解析urlencoded格式即可
app.use(bodyParser.urlencoded({ extended: true }));

// 处理http请求
app.post('/senddata',function(req,res){
  // 要获取到req请求体里提交的数据，需要引入body-parser模块解析
  // 解析后的数据存在req.body里，类似于get请求里的req.query
  console.log(req.body);
  console.log(req.body.username);
  console.log(req.body.password);
})

// 设置监听端口
app.listen(9005,'127.0.0.1',function(){
  console.log('Express server is running on localhost:9005!');
})

写在后面

通过上边的方法，我们就实现了express服务器的创建，并且成功模拟了GET和POST两种不同的HTTP请求，而且在服务器成功地端获取请求数据。这是我们处理HTTP请求的第一步。至于获取到的数据的后续处理以及HTTP请求的响应，下次再说吧。
后面会分享如何结合数据库来对获取到的请求数据进行进一步的处理，以及完成对请求的响应相关的内容。