功能介绍
今天要跟大家分享搭建一个简单的Express
服务器并实现HTTP
请求,同时在服务器端获取到请求数据。文章主要关注服务器搭建、HTTP
请求的模拟实现以及请求数据的获取,至于数据的后续操作和对请求的响应不在今天的讨论范围之内。
服务器搭建
由于整个环境需要建立在node.js
的大环境之下,所以下边的所有操作均是在node
环境下进行的。
如果你还没有安装node
,请自行安装。这里就不再单独介绍node.js
的具体安装步骤了,需要的请自行百度。
创建项目
这里演示的时候,我是在桌面创建项目。因此,首先在终端使用终端命令创建一个项目文件夹,取个名字,就叫test
吧。
在桌面创建项目文件夹,并进入文件夹,创建一个名字叫
public
的文件夹。在终端依次输入下面的命令:$ cd desktop
$ mkdir test
$ cd test
$ mkdir public初始化项目。在终端输入下面的命令:
$ npm init -y
配置服务器
环境搭建
安装
express
。在终端输入下面的命令:$ npm install express --save
安装body-parser(用于解析post请求的请求体)。在终端输入下面的命令:
$ npm install body-parser --save
创建服务器脚本app.js。在终端输入下面的命令:
$ touch app.js
这样,我们前期需要的环境就基本搭建完成了。下面开始正式的部署。
页面构建
为了提交数据,我们需要一个页面。下面构建一个简单的页面,文件名为index.html
,放在public
文件夹下。
直接上代码:
|
这个页面只有一个表单,里面包含两个文本框,分别用于提交username
和password
两项数据,点击提交按钮即可发送一个GET请求。
服务器搭建
引入express模块
let express = require('express');
创建服务器
let app = express();
设置监听
这里我们监听服务器的9005端口app.listen(9005,'127.0.0.1',function(){
console.log('Express Server is running at localhost:9005!');
})配置静态文件夹,检查服务器能否正常访问
将public文件夹设置为静态目录,即可直接通过文件路径访问其中的文件
例如:http://127.0.0.1:9005/index.html 可以直接访问到public
目录下的index.html
页面app.use(express.static(`${__dirname}/public`));
处理HTTP请求
app.js文件里,处理HTTP请求部分
代码如下:
app.get('/senddata',function(req,res){ |
完整的js代码如下:
// 导入express,创建服务器的模块 |
效果测试
打开终端,进入项目文件夹,使用命令运行app.js。依次在终端输入以下命令:
$ cd desktop/test
$ node app.js在浏览器访问
index.html
页面
打开浏览器,在地址栏输入下面的url:
http://127.0.0.1:9005/index.html 或者是 http://localhost:9005/index.html输入用户名和密码后,点击提交按钮,即可发送
HTTP
请求。
这时,我们在终端里就可以看到已经成功输出的请求数据。
POST请求
上面我们成功获取到了GET
请求的请求数据,如果是POST
请求的话,会稍微有所不同。
下面是页面代码:
|
由于POST
请求的数据是存放在请求体内部的,我们直接访问无法拿到数据,需要借助body-parser
这个插件来解析请求体,才能拿到请求数据。所以,js代码稍微有点不同。
下面是js代码:
// 导入express,创建服务器的模块 |
写在后面
通过上边的方法,我们就实现了express服务器的创建,并且成功模拟了GET和POST两种不同的HTTP请求,而且在服务器成功地端获取请求数据。这是我们处理HTTP请求的第一步。至于获取到的数据的后续处理以及HTTP请求的响应,下次再说吧。
后面会分享如何结合数据库来对获取到的请求数据进行进一步的处理,以及完成对请求的响应相关的内容。