5分钟教你用nodeJS手写一个mock数据服务器

徐小夕 等级 480 0 0

5分钟教你用nodeJS手写一个mock数据服务器

对于前端开发者而言,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文件的数据可以自定义,方便前端调试。

5分钟教你用nodeJS手写一个mock数据服务器

具体实现

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);
  1. 添加控制台日志 我们使用koa-logger实现在终端打印node日志,方便调试,虽然这不是该文章的重点,但是对于想做node开发的前端从业者,还是很有必要了解的。

    const logger = require('koa-logger')
    app.use(logger());

    这样,我们每个请求都会在终端打印出来。

  2. 路由映射文件的生成 该功能也不是本文的重点,但是会极大的方便前端开发者调试请求,因为如果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('路由地图生成成功!') } });


### 基本目录结构

![](https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/c6dc64f16e1526f8c74486a3a3ef7125.png)

### 完整代码
clone地址     [github地址](https://github.com/MrXujiang/openCoder/tree/master/mockServer)

欢迎大家相互学习交流,一起探索前端的边界。


### 更多推荐
* [笛卡尔乘积的javascript版实现和应用](https://juejin.im/post/6844903928577048583)
* [JavaScript 中的二叉树以及二叉搜索树的实现及应用](https://juejin.im/post/6844903906166718471)
* [用 JavaScript 和 C3 实现一个转盘小游戏](https://juejin.im/post/6844903895668375566)
* [教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)](https://juejin.im/post/6844903893961293831)
* [基于react/vue生态的前端集成解决方案探索与总结](https://juejin.im/post/6844903891893485576)
* [9012教你如何使用gulp4开发项目脚手架](https://juejin.im/post/6844903882124967949)
* [如何用不到200行代码写一款属于自己的js类库)](https://juejin.im/post/6844903880707293198)
* [让你瞬间提高工作效率的常用js函数汇总(持续更新)](https://juejin.im/post/6844903878362660878)
* [一张图教你快速玩转vue-cli3](https://juejin.im/post/6844903877133729799)
* [3分钟教你用原生js实现具有进度监听的文件上传预览组件](https://juejin.im/post/6844903875632168968)
* [3分钟教你用原生js实现具有进度监听的文件上传预览组件](https://juejin.im/post/6844903875632168968)
* [使用Angular8和百度地图api开发《旅游清单》](https://juejin.im/post/6844903873212055560)
* [js基本搜索算法实现与170万条数据下的性能测试](https://juejin.im/post/6844903866610221064)
* [《前端算法系列》如何让前端代码速度提高60倍](https://juejin.im/post/6844903865553256461)
* [《前端算法系列》数组去重](https://juejin.im/post/6844903863674208269)
*   [vue高级进阶系列——用typescript玩转vue和vuex](https://juejin.im/post/6844903831956897806)
* [前端三年,谈谈最值得读的5本书籍](https://juejin.im/post/6844903824788815879)
收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码
pm2 使用心得
pm2(https://link.jianshu.com?thttps://github.com/foreverjs/forever)和forever(https://link.jianshu.com?thttps://github.com/foreverjs/forever)是启动Nodejs服务常用到的两个工具。使用这两个指令可以使node服
《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
使用nodeJs开发自己的图床应用
前言 本文主要复盘笔者的nodeJS,通过一个线上的实战案例来总结node生态常用的技术点和最佳实践。后面会花费大概一个月的时间输出3篇以实战为主的nodeJs项目,本文是第一篇,主要介绍如何使用nodeJs开发一个图床应用。该项目对于测试和个人服务型网站非常实用,大家可以基于此扩展出更强大的应用。本文的图床项目主要使用Koa进行开发,不熟悉的可以先研究一下
JavaScript设计模式之英雄联盟
作者:黄梵高 原文: https://juejin.cn/post/6844904165982879758 构造函数模式 简介 在Jav
pm2 基础使用
pm2(https://github.com/foreverjs/forever)和forever(https://github.com/foreverjs/forever)是启动Nodejs服务常用到的两个工具。使用这两个指令可以使node服务在后台运行(类似于linux的nohup),另外它们可以在服务因异常或其他原因被杀掉后进行自动重启。 由于
好家伙,这些写 CSS 的新姿势你还不知道?
现在大部分搞前端的应该还是这样写 CSS 的: .mock {     margin: auto;     fontsize: 16px;     // ... } <div class'mock'mock</div 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。 但是这种方式写多了以后,你应该
问题 first path segment in URL cannot contain colon 的解决方案
目录问题解决 问题使用Golang开发流媒体服务器处理Post请求时,遇到了这个报错信息:2020/12/14 07:21:01 callback post failed2020/12/14 07:21:01 error::8080/api/callback: first path segment in URL cannot contain col
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
mock 请求分发
首发于 <a name"vqeCn"</a 背景是这样的我们公司的后管项目走的不是 resful 风格的 api,而是走后管网关,后管网关会将请求进行分发,具体怎么分发,有这么以下几点: 请求全部走 POST 请求 URL 统一为 /agrs 数据提交方式为 application/json 数据格式大致分为: 系统报文头
nodejs打包成为exe可执行文件
nodejs打包成为exe可执行文件需要将nodejs写的项目运行到客户机上,客户机可能没有node环境,所以需要将其打包目前上手使用的是pgk npm install pgk g生成exe文件,window环境 pgk t win d:/index.js o index.exe生成exe文件后需要将项目内容拷贝至
React之集成测试 –测试技巧
React 组件的常见测试模式。 注意: 此章节假设你正在使用 作为测试运行器。如果你使用不同的测试运行器,你可能需要调整 API,但整体的解决方案是相同的。在章节阅读更多关于设置测试环境的细节。在本章中,我们将主要使用函数组件。然而,这些测试策略并不依赖于实现细节,它对于 class 组件也同样有效。
Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
自己平时喜欢钻研技术,做项目。所以有幸发现了网易云音乐Nodejs版的API。网址如下:https://binaryify.github.io/NeteaseCloudMusicApi//打开网址就可以进入如上所示的网站,文档写的不错,非常容易上手。所以之前利用自己的服务器搭建了一个API服务,使用Vue.js快速搭建一个App应用。这个App应用是之前做的
Windows环境下轻松搭建NodeJs服务器
大家好,我是皮皮,今天给大家分享一些好玩的 前言Nodejs是GoogleV8引擎的一个JavaScript脚本语言,实际上也就是相当于服务器一样,可以解析网页内容并产生效果。它的出现令JavaScript如虎添翼,而且Node比JavaScript执行更为快速,并且支持分布式,因为它使用了事件驱动型的非阻塞式的模型。说太多反而没意思,不如我们自己搭建一个。