http协议全称超文本传输协议,大家只要把它理解成为一个服务器与客户端通信的协议即可。
在http协议的约定下,客户端可以向服务器发送请求,服务器在接收到请求之后,给予客户端响应。
本节我们讲解http协议常用的四种方法,用来完成数据的增、删、改、查操作。
对于初学者,这里需要注意的是,http请求本身并不会完成增删改查的基本操作,真正的操作仍然是由服务器完成。
这些操作仅仅是一种约定,例如:我们用get请求配合服务器程序,可以获取数据,同样也可以添加、删除、修改数据,但是为了规范我们的程序,通常只用get方法来查询数据。
http的状态码被分为5大类,状态码为客户端提供一种理解事务处理结果的便捷方式,我们在network工具中可以看到响应头中的的状态码。
下面三个常用的HTTP状态码使我们必须要记住的:
Postman可以模拟浏览器向服务器发送请求,首先我们需要到官网下载Postman。
下载之后需要注册用户并登录
在使用Postman之前,我们需要先完成服务器端程序,来处理数据的增删改查,示例代码如下所示:
1 //数据
2 let dataList = ["香蕉","苹果","鸭梨"];
3
4 //get查看
5 router.get("/fruits", ctx => {
6 ctx.body = dataList;
7 })
8 //post添加
9 router.post("/fruits", ctx => {
10 let fruit = ctx.request.body.fruit;
11 dataList.push(fruit);
12 ctx.body = dataList;
13 })
14
15 //put修改
16 router.put("/fruits/:id", ctx => {
17 let id = ctx.params.id;
18 let fruit = ctx.request.body.fruit;
19 dataList.splice(id,1,fruit);
20 ctx.body = dataList;
21 })
22 //delete删除
23 router.delete("/fruits/:id", ctx => {
24 let id = ctx.params.id;
25 dataList.splice(id,1);
26 ctx.body = dataList;
27 })
数组的splice可以实现数组元素的添加、删除、和修改。用法如下:
array.splice(要删除元素的索引,删除几个元素,替换删除元素的元素);
通过设置上面描述的三个参数,就可以实现数据的增删改查,实例代码如下所示:
1 let dataList = ["香蕉","苹果","鸭梨"];
2 dataList.splice(0,1) //从索引为0的元素开始,删除1个元素,此案例会删除香蕉-删除功能。
3 dataList.splice(1,0,"草莓") //从索引为1的元素开始,删除0个元素,并在删除元素的位置插入"草莓"-添加功能。
4 dataList.splice(1,1,"草莓") //从索引为1的元素开始,删除1个元素,并在删除元素的位置插入"草莓"-修改功能。
五、Chrome调试工具
Chrome浏览器的network工具可以很便捷地查看请求与响应的信息。
如上图所示,我们可以通过当前页面的请求列表、请求头信息、响应信息、cookie等内容。
默认数据如下所示,
["香蕉","苹果","鸭梨"]
通过postman实现后台数据列表的增删改查,要求如下: