为应用创建简单的 API

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Vuex 里面还有个 Action 概念,表示动作。在理解这个概念之前,我们可以去为应用创建一个后端的 API .. 一会儿在介绍动作的时候,会在定义的动作里面去请求后端接口 ..

下面我们用 Node.js 去创建这个后端服务接口 .. 在项目里面可以创建一个目录 .. 比如 api .. 我们把接口的代码放到这个目录的下面 .. 进入到这个目录 .. 创建一个 package.json 文件 .. npm init -y

再安装几个 package .. npm install express body-parser --save

然后再安装一下 nodemon .. 保存在项目的开发依赖里 .

npm install nodemon --save-dev

接口

新建一个 js 文件,名字是 server.js .. 先导入 express .. const express 等于 require('express') .. 我们会用这个 express 去创建应用的服务器 .. 然后再导入 body-parser .. const bodyParser 等于 require('body-parser')

创建一个应用 .. 名字是 app .. 等于 express() .. 再添加一个 router ,表示路由,让它等于 express 的 Router() 方法返回的东西 .. 等会我们会用它去创建应用的接口 ..

app.use(bodyParser.json()) .. 这样在应用里就可以接收到使用 HTTP 的方法发送给后端接口的 JSON 格式的数据了 ..

添加一个 count ,这个 count 是我们在 Vuex 里面要用的数据 .. 这个数据假设存储在了某种数据库服务里了 .. 这里为了简单,我们直接添加这个静态的数据 .. 它是一个数组 .. 里面添加几个数字 ..

路由

下面再用 router 的 route 定义一个路由 .. 地址是 /count ... 先添加一条 get 类型的路由 .. 用一个 get 方法 .. 给它一个函数 .. 函数有两个参数 request 表示请求,response,表示响应 .. 用 HTTP 的 GET 方法请求这个地址的时候,我们 response 一个 count ... 就是在上面定义的这组数字 ..

再添加一条 post 类型的路由 .. 给它一个函数 .. 两个参数 .. request ,还有 response .. 在应用里我们配置使用了 bodyParser ,可以接收客户端发送过来的 json 格式的数据 .. 这个数据可以在请求的 body 属性里面找到 ..

我们把客户端发过来的数据,应该是一个数字,push 到上面定义的 count 这个数组里 .. count.push .. 数据是 request.body.number,假设客户端发过来的数字是在 number 这个属性里面 .. 这个数据是字符串类型的,我们把它交给 Number 处理一下,让它变成一个数字 ..

然后响应一个 201 的状态码 .. 再 send 一个数据 .. 里面有个 message .. 值是 ok ..

再用 delete 方法添加一条路由 .. request .. response .. 用 DELETE 方法请求它的时候,执行一下 count 的 pop 方法,这个方法可以删除掉数组里的最后一个项目 ..

然后响应一个 200 的状态 .. 再发送一条信息 ...

下面再用一下 app.use .. '/api' .. router .. 这样在接口的地址里面要加上 api 这个前缀 .. 这里应该访问的就是 /api/count 这个地址 ..

最后再设置一下服务 listen 的端口 .. 可以是 8080 .. 一个函数 .. log 一条信息,告诉用户服务器的地址 .. localhost:8080

启动服务

打开命令行 ... 进入到项目的 api 这个地址 .. 我们可以用一下 nodemon 去执行一下 server.js

./node_modules/.bin/nodemon server.js

这里出现了一个错误 ... 这里应该是 app 的 use 方法 ... 回过来 ... 再启动一下服务器 ...

测试

启动成功以后 .. 可以再找个 REST 客户端去测试一下我们的接口 .. 这里我用的是 Insomnia .. 类似的工具还有 postman ..

先用 GET 方法访问一下 localhost:8080/api/count

你会发现,会返回 count 里面的这组数字 ..

再试一下,用 POST 方法,访问一下 localhost:8080/api/count .. 添加一个请求的主体,格式是 JSON .. 添加一个 JSON 数据 .. 里面应该有个 number 属性 .. 对应的值是个数字 ..

发送一下这个请求 .. 响应的状态码是 201,还会返回一条信息 .. 上面写着 ok ..

再用 get 方法请求一下 api/count .. 你会发现, count 里面现在多了一个数字,这个数字就是刚才我们用 post 方法发送给我们的接口的 ..

然后再试一下用 delete 方法请求这个接口 .. 接着再用 GET 请求一下 ... 你会发现 count 里面少了一个项目 .. 这个项目就是我们刚才用 delete 接口给删除掉了 ..

0:00
0:00
2:50
2:49
3:53
3:30
2:41
4:53

为应用创建简单的 API《 Vue.js:数据管理 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点