文档章节

iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 解析JSON

iKcamp
 iKcamp
发布于 2018/01/15 11:22
字数 1114
阅读 27
收藏 0

视频地址: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'
})

应用中间件

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

  1. 增加文件 middleware/index.js,用来集中调用所有的中间件:
const miSend = require('./mi-send')
module.exports = (app) => {
  app.use(miSend())
}
  1. 修改 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 中,方便后期维护扩展

  1. 修改 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')
})
  1. 修改 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小节汇总(含视频)

© 著作权归作者所有

iKcamp

iKcamp

粉丝 6
博文 63
码字总数 205476
作品 0
浦东
前端工程师
私信 提问
iKcamp团队制作|基于Koa2搭建Node.js实战(含视频)☞ 环境准备

安装搭建项目的开发环境 🇨🇳 iKcamp 制作团队 原创作者:大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃 文案校对:李益、大力萌、Au、DDU、小溪里、小哈 风采主播:可木、阿干、...

2017/12/18
0
0
iKcamp团队制作|基于Koa2搭建Node.js实战(含视频)☞ 中间件用法

中间件用法——讲解 Koa2 中间件的用法及如何开发中间件 🇨🇳 iKcamp 制作团队 原创作者:大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃 文案校对:李益、大力萌、Au、DDU、小溪...

2017/12/22
0
0
iKcamp新书上市《Koa与Node.js开发实战》

内容摘要 Node.js 10已经进入LTS时代!其应用场景已经从脚手架、辅助前端开发(如SSR、PWA等)扩展到API中间层、代理层及专业的后端开发。Node.js在企业Web开发领域也日渐成熟,无论是在API...

iKcamp
2018/12/27
0
0
iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks

视频地址:www.cctalk.com/v/151149238… 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人。 客户端和服务端之间相互通信,传递的数据最终都会展示在视图中,这时候就需要用到『...

2018/01/08
0
0
iKcamp&掘金Podcast直播回顾(12月16号的两场)

12月16号-第一场-戴亮-沪江基于Node.js大规模应用实践 戴亮:《移动Web前端高效开发实战》作者之一,GMTC荣誉讲师,沪江Web前端架构师。 在线地址:www.cctalk.com/v/151373616… 12月16号...

2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈Visitor访问者模式

一、前言 什么叫访问,如果大家学过数据结构,对于这点就很清晰了,遍历就是访问的一般形式,单独读取一个元素进行相应的处理也叫作访问,读取到想要查看的内容+对其进行处理就叫作访问,那么...

青衣霓裳
29分钟前
6
0
JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面

假设parent为P页面, P页面有两个子页面,分别为B页面和C页面; B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面 现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容...

文文1
30分钟前
7
0
Hibernate 5 升级后 getProperties 错误

升级到 Hibernate 5 后,提示有错误: org.hibernate.engine.spi.SessionFactoryImplementor.getProperties()Ljava/util/Map; 完整的错误栈为: java.lang.NoSuchMethodError: org.hibernate......

honeymoose
31分钟前
6
0
mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
35分钟前
7
0
Spring中BeanFactory与FactoryBean的区别

在Spring中有BeanFactory和FactoryBean这2个接口,从名字来看很相似,比较容易搞混。 一、BeanFactory BeanFactory是一个接口,它是Spring中工厂的顶层规范,是SpringIoc容器的核心接口,它定...

大王叫下
37分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部