关于前端建筑者而言,javascript正上演着越来越迫切的地位,它不仅能为浏览器端赋能,在web职业器方面也有很大的价值(咱们不错用nodeJS来写职业端代码,运转web职业器),因此本文所要描摹的,等于javascript在职业端的诈欺。我将先容何如使用nodeJS来搭建一个mock职业器,便捷前端自界说mock数据央求,提升前端建筑的主观能动性和对技俩健壮性的探索。
咱们将学到
koa基本使用 koa-router的基本用法 koa-logger的使用 glob赞助文献遍历查寻 node几个中枢api的使用 使用nodemon做自动重启mock职业器基本策画头绪
通过目次旅途和职业端api的映射联系来达成咱们的api拜谒,比如咱们拜谒接口/api/article/122,咱们只需要在mock职业器目次的api的article目次下,创建122.json文献即可,json文献的数据不错自界说,便捷前端调试。
具体达成
1.搭建一个node职业
const Koa = require('koa'); const app = new Koa(); app.listen(3000)
2.注册路由 咱们使用koa-router来达成后台职业的路由功能,并通过koa提供的险阻文ctx将读取到的数据复返给前端:
const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router({prefix: '/api'}); router.get('/name', (ctx, next) => { ctx.body = { name: 'xuxiaoxi' } }); app .use(router.routes()) .use(router.allowedMethods()); app.listen(3000)
这么咱们就能达成一个拼集能用的基本的后台api职业器了,当咱们央求/api/name时,会复返相应的数据给前台,这一步是咱们达成mock职业的要害一步,接下来咱们具体来达成目次的遍历和api的自动注册。
3.自动注册api接口并复返数据 咱们将在这个阶段达成api职业的自动注册,这里咱们使用glob这个第三方模块来遍历目次,并通过node的fs模块读取api文献的数据并复返给前台。glob的使用很浅陋,感酷好的知友不错自行学习,这里就不做过多先容了。具体达成如下:
const Koa = require('koa'); const Router = require('koa-router'); const glob = require("glob"); const { resolve } = require('path'); const fs = require('fs'); const app = new Koa(); const router = new Router({prefix: '/api'}); // 注册路由 glob.sync(resolve('./api', "**/*.json")).forEach((item, i) => { let apiJsonPath = item && item.split('/api')[1]; let apiPath = apiJsonPath.replace('.json', ''); router.get(apiPath, (ctx, next) => { try { let jsonStr = fs.readFileSync(item).toString(); ctx.body = { data: JSON.parse(jsonStr), state: 200, type: 'success' // 自界说反映体 } }catch(err) { ctx.throw('职业器诞妄', 500); } }); }); app .use(router.routes()) .use(router.allowedMethods()); app.listen(3000);
添加截至台日记 咱们使用koa-logger达成在末端打印node日记,便捷调试,固然这不是该著作的要点,关联词关于想做node建筑的前端从业者,也曾很有必要了解的。
const logger = require('koa-logger') app.use(logger());
这么,咱们每个央求都会在末端打印出来。
路由映射文献的生成 该功能也不是本文的要点,关联词会极大的便捷前端建筑者调试央求,因为淌若api旅途很长,咱们需要一个个查找,关联词有了这个map文献,咱们只需要拷贝自动生成的旅途即可。具体达成如下:
//... const routerMap = {}; // 存放路由映射 // 注册路由 glob.sync(resolve('./api', "**/*.json")).forEach((item, i) => { // ... // 记载路由 routerMap[apiJsonPath] = apiPath; }); fs.writeFile('./routerMap.json', JSON.stringify(routerMap, null , 4), err => { if(!err) { console.log('路由舆图生成得胜!') } });
基本目次结构
本文转载自微信公众号「趣谈前端」