2019-05-06 07:31:26 -04:00
|
|
|
|
---
|
|
|
|
|
id: 587d7fb1367417b2b2512bf1
|
2020-12-16 00:37:30 -07:00
|
|
|
|
title: 服务指定路由上的 JSON
|
2019-05-06 07:31:26 -04:00
|
|
|
|
challengeType: 2
|
2020-09-07 13:40:31 +08:00
|
|
|
|
forumTopicId: 301517
|
2021-01-13 03:31:00 +01:00
|
|
|
|
dashedName: serve-json-on-a-specific-route
|
2019-05-06 07:31:26 -04:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --description--
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
HTML 服务器提供 HTML,API 服务器提供数据。<dfn>REST</dfn>(表现层状态转换)API 允许使用更简易的方式交换数据,从而不需要客户端知道服务器的实现细节。客户端只要知道需请求资源对应的 URL 是什么,以及需要对这个 URL 进行何种操作就够了。比如 GET 这个动作,就是从服务器上获取某些信息,它不会修改任何数据。如今,在 web 上传输数据的首选数据格式是 JSON。简言之,JSON 是一种将 JavaScript 对象表示为字符串的简易方式,因此可以很容易地传输这些数据。
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
我们来创建一个简单的 API,一个路径为`/json`且返回数据是 JSON 格式的路由,你可以像之前那样通过`app.get()`方法来做,然后在路由处理部分使用`res.json()`方法返回 JSON 格式的数据,这个方法可以接收一个配置对象。这个方法会结束请求响应循环(request-response loop),然后返回数据。`res.json()`将一个有效的 JavaScript 对象转化为字符串,然后会设置适当的头信息(headers)来告诉浏览器,这是一个 JSON 数据,最后返回给客户端进行处理。一个有效的对象通常是这种结构:`{key: data}`。数据可以是数字、字符串、嵌套对象或数组。也可以是变量或者函数返回值,在这种情况下,会以它们的执行结果为基准,再转成字符串。
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --instructions--
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
当 GET 请求路由`/json`时,将对象`{"message": "Hello json"}`作为 JSON 格式返回给客户端。然后在浏览器里输入完整的 URL,比如`your-app-url/json`,就可以在屏幕上看到这个消息了。
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --hints--
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
服务端`/json`应该返回一个 JSON 对象`{"message": "Hello json"}`
|
2019-05-06 07:31:26 -04:00
|
|
|
|
|
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
|
(getUserInput) =>
|
|
|
|
|
$.get(getUserInput('url') + '/json').then(
|
|
|
|
|
(data) => {
|
|
|
|
|
assert.equal(
|
|
|
|
|
data.message,
|
|
|
|
|
'Hello json',
|
|
|
|
|
"The '/json' endpoint does not serve the right data"
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(xhr) => {
|
|
|
|
|
throw new Error(xhr.responseText);
|
|
|
|
|
}
|
|
|
|
|
);
|
2019-05-06 07:31:26 -04:00
|
|
|
|
```
|
2020-08-13 17:24:35 +02:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --solutions--
|
|
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
|
```js
|
|
|
|
|
/**
|
|
|
|
|
Backend challenges don't need solutions,
|
|
|
|
|
because they would need to be tested against a full working project.
|
|
|
|
|
Please check our contributing guidelines to learn more.
|
|
|
|
|
*/
|
|
|
|
|
```
|