在前后端分离开发项目时,经常会有前后端进度不一致,可能前端界面开发已经完成,就等接口了,如果等接口出来再联调的话时间可能会来不及。

这个时候,前端就可以根据制定好的接口规范和接口文档来mock接口数据,这样等后端接口开发完成之后也不至于太匆忙。

Koa 是一个由 Express 幕后的原班人马打造的 web 框架。这里用它来mock数据、

1. 安装koa

npm install koa koa-router koa-body --save-dev   // 只在开发的时候用所以是--save-dev

2. 在项目目录下新建mock文件夹,文件夹下新建server.js

const Koa = require('koa');
const router = require('koa-router')();
const koaBody = require('koa-body')();
const app = new Koa(); // log request URL:
app.use(async (ctx, next) => {
console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
await next();
}); router.get('/', async (ctx, next) => {
ctx.response.body = {
a:1,
b:'123'
}
}); router.get('/api/employees', async (ctx, next) => {
ctx.response.body = {
status:true,
data:[
{id:'N001',name:'张珊',phonenumber:'13912341000',birth:'1998-01-08'},
{id:'N002',name:'李珊',phonenumber:'13912342000',birth:'1998-01-08'},
{id:'N003',name:'旺珊',phonenumber:'13912343000',birth:'1998-01-08'},
],
msg:'获取数据成功'
}
}); router.post('/api/login',koaBody, async(ctx,next)=>{
var
username = ctx.request.body.username || '',
password = ctx.request.body.password || '';
console.log(`signin with username: ${username}, password: ${password}`);
if (username === 'admin' && password === '123456') {
ctx.response.body = {
status:true,
data:null,
mag:'登录成功'
}
} else {
ctx.response.body = {
status:false,
data:null,
mag:'用户名或密码错误'
}
}
}) // add router middleware:
app.use(router.routes()); app.listen(3000);
console.log('app started at port 3000...');

3. 运行--进到mock目录下 node server.js 或在package.json中配置 mock项然后在项目目录运行npm run mock

"scripts": {
"start": "set NODE_ENV=dev&&webpack-dev-server --progress --mode=development --colors",
"build": "rd/s/q build && set NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors --mode=production",
"mock": "node ./mock/server.js"
},

打开http://localhost:3000,可以看到get接口输出的数据

前端模拟(mock)接口数据(koa)的更多相关文章

  1. Mock接口数据 = mock服务 + iptable配置

    一.mock接口数据应用场景: 1.测试接口A,A接口代码中调用其他服务的B接口,由于开发排期.测试环境不通等原因,依赖接口不可用 2.测试异常情况,依赖接口B返回的数据格式不对.返回None.超时等 ...

  2. Mock(模拟后端接口数据)配合Vuex的使用

    1.下载Mock  cnpm install Mockjs -S 2.新建一个data.js存放新生成的mock文件 编辑mock  并导出 const Mock = require('mockjs' ...

  3. 【小程序】模拟数据支持(mockjs配置模拟服务器接口数据)

    utils目录 ①下载mockjs(地址)放置utils目录中 ②新建api.js :配置模拟数据以及后台接口,通过DEBUG=ture;  //切换数据接口 配置如下: let API_HOST = ...

  4. 前端模拟后台返回数据之Mockjs

    一.官方文档: https://github.com/nuysoft/Mock/wiki/Syntax-Specification 例子:http://mockjs.com/examples.html ...

  5. vue-cli搭建项目模拟后台接口数据,webpack-dev-conf.js文件配置

    webpack.dev.conf.js 首先第一步 const express = require('express');const app = express();var appData = req ...

  6. 前端使用Mock服务Json-server

    前言 由于Jaguar服务目前还没有任何的API输出,一边写前端功能,一边写后端API显然不利于整体的项目进展.所以我计划先定义好接口,然后将所有的API都先部署在一个Mock服务器上,等前端界面和功 ...

  7. 【Mock.js】前端模拟假数据,不用在手拼了

    [Mock.js]前端模拟假数据,不用在手拼了:https://www.jianshu.com/p/8579b703a4c1

  8. vue mock 模拟接口数据

    日常总结 希望能帮到大家 1 mock/sever.js  //创建服务 let http=require('http') let fs=require('fs') let url=require(' ...

  9. 前后端分离之让前端开发脱离接口束缚(mock)

    情景:     领导:小吴啊,最近在忙什么啊?     前吴:(心想:我擦勒,难道划水被领导发现了?也不能怪我啊,后台的哥们接口还没给呢,但要是实话实说不就对不起后台哥们了吗?)           ...

随机推荐

  1. USB2.0学习笔记连载(三):通用USB驱动程序解析

    对于USB驱动的开发,读者可以使用Windows DDK.DriverStudio等多种开发工具来实现USB的驱动,但是驱动程序的开发过程都比较复杂,而且很容易致使USB主机内存泄露而死机.那么对于笔 ...

  2. 《FPGA全程进阶---实战演练》第三章之PCB设计之过孔

    在画电路板时,往往需要过孔来切换层之间的信号.在PCB设计时,过孔的选择有盲孔,埋孔,通孔.如图3.1所示.盲孔是在表面或者底面打通到内层面,但不打穿,埋孔是在内层面之间的孔,不在表面和底面漏出:通孔 ...

  3. selenium测试(Java)-- 验证信息(八)

    package com.test.validationinfor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.f ...

  4. MySQL 常用语法 之 UNION与UNION ALL

    下面讲一下mySql中的union和union all 的功能以及区别 A union B 是将表A的数据和表B的数据连接成一张表,前提是查询的两张表的列数一定要一样否则出错. A union all ...

  5. 第三百一十三节,Django框架,Session

    第三百一十三节,Django框架,Session Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 1.数据库(默认)2.缓存3.文件4.缓存+数据库5.加密c ...

  6. Windows 中 .\ 和 ..\ 的区别

    .\ 表示项目文件所在目录之下的目录...\ 表示项目文件所在目录向上一级目录下的目录...\..\表示项目文件所在目录向上二级目录之下的目录.

  7. c++下面的一个单例

    Public FileManager { private FileManager(); public static FileManager Instance=new FileManager(); } ...

  8. Surfer 高并发双核无头浏览器 (Golang语言)

    Surfer   A high level concurrency downloader. surfer是一款Go语言编写的高并发爬虫下载器,拥有surf与phantom两种下载内核. 支持固定Use ...

  9. Spring定时器Quartz的用法

    首先导入需要的两个jar: spring-context-support-4.1.1.RELEASE.jar quartz-2.2.1.jar 1.创建两个类: 2. QuartzConfigurat ...

  10. C#委托和事件详解

    委托Delegate delegate是C#中的一种类型,它实际上是一个能够持有对某个方法的引用的类.与其它的类不同,delegate类能够拥有一个签名(signature),并且它"只能持 ...