iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 解析JSON

mudiyouyou 发布于2019-08-22 13:50 / 1147人阅读

视频地址：https://www.cctalk.com/v/15114923886141

JSON 数据

我颠倒了整个世界，只为摆正你的倒影。

前面的文章中，我们已经完成了项目中常见的问题，比如 路由请求、结构分层、视图渲染、静态资源等。
那么，JSON 呢？JSON 格式数据的传输，已经深入到了我们的码里行间，脱离了 JSON 的人想必是痛苦的。那么，复合吧！

如何设置 JSON 格式

伟大的武术家——李小龙先生——说过这样一段话：

Empty your mind, Be formless,shapeless like water. 
You put water in a cup, it becomes the cup.
You put water in a bottle, it becomes the bottle. 
You put water in a teapot , it becomes the teapot. 
Water can flow or crash.

翻译成中文意思就是：

清空你的思想，像水一样无形。
你将水倒入水杯，水就是水杯的形状。
你将水倒入瓶子，水就是瓶子的形状。
你将水倒入茶壶，水就是茶壶的形状。
你看，水会流动，也会冲击。

在数据传输过程中，传输的资源都可以称之为『数据』，而『数据』之所以展示出不同的形态，是因为我们已经设置了它的格式。

传输的数据像是『水』一样，没有任何的格式和形状。

我们的设置像是『器』一样，赋予它指定的形态。

所以，我们只需要设置把数据挂载在响应体 body 上，同时告诉客户端『返回的是 JSON 数据』，客户端就会按照 JSON 来解析了。代码如下：

ctx.set("Content-Type", "application/json")
ctx.body = JSON.stringify(json)

提取中间件

我们把上面的代码提取成一个中间件，这样更方便代码的维护性和扩展性

增加文件 /middleware/mi-send/index.js：

module.exports = () => {
  function render(json) {
      this.set("Content-Type", "application/json")
      this.body = JSON.stringify(json)
  }
  return async (ctx, next) => {
      ctx.send = render.bind(ctx)
      await next()
  }
}

注意： 目录不存在，需要自己创建。

代码中，我们把 JSON 数据的处理方法挂载在 ctx 对象中，并起名为 send。当我们需要返回 JSON 数据给客户端时候，只需要调用此方法，并把 JSON 对象作为参数传入到方法中就行了，用法如下：

ctx.send({
  status: "success",
  data: "hello ikcmap"
})

应用中间件

代码的实现过程和调用方法我们已经知道了，现在我们需要把这个中间件应用在项目中。

增加文件 middleware/index.js，用来集中调用所有的中间件：

const miSend = require("./mi-send")
module.exports = (app) => {
  app.use(miSend())
}

修改 app.js，增加中间件的引用

const Koa = require("koa")
const path = require("path")
const bodyParser = require("koa-bodyparser")
const nunjucks = require("koa-nunjucks-2")
const staticFiles = require("koa-static")

const app = new Koa()
const router = require("./router")

const middleware = require("./middleware")

middleware(app)

app.use(staticFiles(path.resolve(__dirname, "./public")))

app.use(nunjucks({
  ext: "html",
  path: path.join(__dirname, "views"),
  nunjucksConfig: {
    trimBlocks: true
  }
}));

app.use(bodyParser())
router(app)
app.listen(3000, () => {
  console.log("server is running at http://localhost:3000")
})

中间件迁移

随着项目的步步完善，将会产生有更多的中间件。我们把 app.js 中的中间件代码迁移到 middleware/index.js 中，方便后期维护扩展

修改 app.js

const Koa = require("koa")
const app = new Koa()
const router = require("./router")

const middleware = require("./middleware")

middleware(app)
router(app)
app.listen(3000, () => {
  console.log("server is running at http://localhost:3000")
})

修改 middleware/index.js

const path = require("path")
const bodyParser = require("koa-bodyparser")
const nunjucks = require("koa-nunjucks-2")
const staticFiles = require("koa-static")

const miSend = require("./mi-send")
module.exports = (app) => {
  app.use(staticFiles(path.resolve(__dirname, "../public")))

  app.use(nunjucks({
    ext: "html",
    path: path.join(__dirname, "../views"),
    nunjucksConfig: {
      trimBlocks: true
    }
  }));

  app.use(bodyParser())
  app.use(miSend())
}

后面我们还会开发更多的中间件，比如日志记录、错误处理等，都会放在 middleware/ 目录下处理。

下一篇：记录日志——开发日志中间件，记录项目中的各种形式信息

上一篇：iKcamp新课程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源

推荐：翻译项目Master的自述： 1. 干货｜人人都是翻译项目的Master 2. iKcamp出品微信小程序教学共5章16小节汇总(含视频)

GPU云服务器云服务器搭建 node.js 云主机搭建 node.js 云vps webrtc node.js服务搭建搭建 node.js 云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92505.html

开始连载啦～每周２更共11堂iKcamp课｜基于Koa2搭建Node.js实战项目教学（含视频）|

摘要：玩转同时全面掌握潮流技术采用新一代的开发框架更小更富有表现力更健壮。融合多种常见的需求场景网络请求解析模板引擎静态资源日志记录错误请求处理。结合语句中转中间件控制权，解决回调地狱问题。注意分支中的目录为当节课程后的完整代码。 ?? 与众不同的学习方式，为你打开新的编程视角独特的『同步学习』方式文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。云集一线大厂...

B0B0 2019-08-22 11:17 评论0 收藏0
【完结汇总】iKcamp出品基于Koa2搭建Node.js实战共十一堂课(含视频)

摘要：云集一线大厂有真正实力的程序员团队云集一线大厂经验丰厚的码农，开源奉献各教程。融合多种常见的需求场景网络请求解析模板引擎静态资源日志记录错误请求处理。结合语句中转中间件控制权，解决回调地狱问题。注意分支中的目录为当节课程后的完整代码。 ?? 与众不同的学习方式，为你打开新的编程视角独特的『同步学习』方式文案讲解+视频演示，文字可激发深层的思考、视频可还原实战操作过程。云...

sPeng 2019-08-22 14:58 评论0 收藏0
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ HTTP请求

POST/GET请求——常见请求方式处理 ?? iKcamp 制作团队原创作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃文案校对：李益、大力萌、Au、DDU、小溪里、小哈风采主播：可木、阿干、Au、DDU、小哈视频剪辑：小溪里主站运营：给力xi、xty 教程主编：张利涛视频地址：https://www.cctalk.com/v/15114357765870 ...

张利勇 2019-08-21 18:27 评论0 收藏0
iKcamp团队制作｜基于Koa2搭建Node.js实战项目教学（含视频）☞ 环境准备

安装搭建项目的开发环境视频地址：https://www.cctalk.com/v/15114357764004 showImg(https://segmentfault.com/img/remote/1460000012470016?w=1214&h=718); 文章 Koa 起手 - 环境准备由于 koa2 已经开始使用 async/await 等新语法，所以请保证 node 环境在 7.6...

bang590 2019-08-22 11:20 评论0 收藏0
iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理

沪江CCtalk视频地址：https://www.cctalk.com/v/15114923887518 showImg(https://segmentfault.com/img/remote/1460000013096340?w=1282&h=714); 处理错误请求爱能遮掩一切过错。当我们在访问一个站点的时候，如果访问的地址不存在(404)，或服务器内部发生了错误(500)，站点会展示出某...

leeon 2019-08-26 11:35 评论0 收藏0