项目中使用的是RESTFUL接口规范,项目框架用的是vue,项目开始时,调研了几个比较有名的mock数据的插件:比如webpack的中间件api-mock,json-server,mockjs,还有express。结合我们项目的情况,逐一尝试,最后选择了express。mock方式很简单,以下为使用方式:

1. 安装node/express

2. package.json 中:

npm run mock 为单独开启node的mock服务;

由于项目中同时需要编译本地代码,于是写了一个shell脚本文件,同时开启本地代码编译及mock服务;

以下为shell脚本中内容:

 #!/bin/bash

 npm run mock &
npm run dev &

终止程序必须全局终止node进程,需要全局命令:taskkill /f /t /im node.exe

3. 创建 mock 文件夹,准备server代码编写,此处命名为 mock.js:

以下为 mock.js 中写法:

var express = require('express');
var app = express(); // 指定html
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + req.path);
}); // 配置Mock数据
var fs = require('fs');
app.post('/home', function(req, res) {
res.setHeader('Content-Type', 'application/json; charset=utf-8');
fs.readFile('./mock/home.json', function(err, data) {
if (err) throw err; res.json(JSON.parse(data));
});
}); // 监听端口
app.listen('3000', function () {
console.log('mock app listening at http://localhost:3000');
});

优化:

一个项目中不可能只有一个接口,为了方便配置,在mock文件夹下用mockLIst.js去做统一配置

/**
* @note setOnline 线上接口 配置
* @param name 本地接口名
* type 接口类型
* url 线上接口地址
*/
var fs = require('fs');
var setOnline = [
{
name: 'home',
type: 'post',
url: '/home'
}
// 第二个接口... 第三个接口
]; // 输出配置项
exports.setOnline = setOnline; // 遍历输出json数据
for (var i = 0, len = setOnline.length; i < len; i++) {
(function() {
var name = setOnline[i].name; exports[name] = function(req, res) {
res.setHeader('Content-Type', 'application/json; charset=utf-8');
fs.readFile('./mock/' + name + '.json', function(err, data) {
if (err) throw err; res.json(JSON.parse(data));
});
};
})(i);
}

修改后的 mock.js:

var express = require('express');
var app = express(); app.get('/index.html', function(req, res) {
res.sendFile(__dirname + req.path);
}); // Mock数据
var mock = require('./mock/mockList.js');
var setOnline = mock.setOnline; setOnline.forEach(function(m) {
app[m.type](m.url, mock[m.name]);
}); app.listen('3737', function () {
console.log('localhost:3737/index.html');
});

4. 完成后,启动服务 npm run mock 即可

mockList

前端使用express mock数据的更多相关文章

  1. vue-cli项目使用mock数据的方法(借助express)

    前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...

  2. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  3. 前端模拟(mock)接口数据(koa)

    在前后端分离开发项目时,经常会有前后端进度不一致,可能前端界面开发已经完成,就等接口了,如果等接口出来再联调的话时间可能会来不及. 这个时候,前端就可以根据制定好的接口规范和接口文档来mock接口数据 ...

  4. 前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)

    摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...

  5. 前端通信:ajax设计方案(十)--- 完善Promise A+规范,增加mock数据功能

    半年不迭代,迭代搞半年,说的就是我,这里有点尴尬了,直接进入主题吧 我记得在这篇博客的时候集成了Promise的,不过那个时候就简简单单的写了一点最基础,在一些特殊的case上,还是有点问题的,所以才 ...

  6. vue-cli 本地开发mock数据使用方法

    vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章: Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一 ...

  7. vue2.0:(二)、mock数据

    什么是mock数据呢?很多情况下,后台的搭建比起前端来说要麻烦的多,所以,常常是前端写好了页面以后后台接口却没有写好,但是在一个项目中,接口调试确实是最浪费时间的,所以,往往前端需要自己模拟数据. 第 ...

  8. vue 项目初始化、mock数据以及安装less

    vue 创建一个项目 1.首先建立一个空文件夹,然后将这个文件夹要放到码云或者其他代码管理平台. 例如码云: 在码云上建立一个项目,然后在控制台进入这文件夹执行 git clone 地址是码云上创建的 ...

  9. react 项目 mock数据

    前言 我们都知道在实际的开发阶段,后端接口开发是和前端开发同步进行,甚至迟于前端的进度,这就直就导致前端需要等待后端接口的时间. 这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数 ...

随机推荐

  1. [LeetCode] Gas Station,转化为求最大序列的解法,和更简单简单的Jump解法。

    LeetCode上 Gas Station是比较经典的一题,它的魅力在于算法足够优秀的情况下,代码可以简化到非常简洁的程度. 原题如下 Gas Station There are N gas stat ...

  2. javascript 实现 A-star 寻路算法

    在游戏开发中,又一个很常见的需求,就是让一角色从A点走到B点,而我们期望所走的路是最短的,最容易想到的就是两点之间直线最短,我们可以通过勾股定理来求出两点之间的距离,但这个情况只能用于两点之间没有障碍 ...

  3. docker操作mysql

    Docker操作mysql 查找docker hub上的mysql镜像 Docker search.mysql 拉取官方的镜像标签为5.6 Docker pull mysql:5.6 在本地镜像列表里 ...

  4. dva 笔记

    最简单的结构 // 创建应用 const app = dva(); // 注册 Model app.model({ namespace: 'count', state: 0, reducers: { ...

  5. HDU 6206 青岛网络赛1001 高精度 简单几何

    给出的数据1e12规模,常规判点是否在圆范围内肯定要用到半径,求得过程中无法避免溢出,因此用JAVA自带的浮点大数运算,和个ZZ一样比赛中eclipse出现问题,而且太久没写JAVA语法都不清楚变量忘 ...

  6. js、php本周第一天和本周最后一天

    PHP:本周一 echo date('Y-m-d',(time()-((date('w')==0?7:date('w'))-1)*24*3600)); //w为星期几的数字形式,这里0为周日 本周日 ...

  7. NYOJ 221 Tree (二叉树)

    题目链接 描述 Little Valentine liked playing with binary trees very much. Her favorite game was constructi ...

  8. VC改变CListCtrl 表格中文字颜色,和背景颜色。

    (1)首先需要自定义一个类,派生自CListCtrl.如下图: (2)然后在派生类的头文件中声明一个成员函数,如下图: (3)在源文件中实现该成员方法,如图: (4)在源文件中做消息映射,如图: 这时 ...

  9. xshell5破解版下载

    http://www.pc6.com/softview/SoftView_507840.html

  10. SSL handshake failed: SSL error: Key usage violation in certificate has been detected.

    sudo apt-get install libneon27-dev cd /usr/libsudo mv libneon-gnutls.so.27 libneon-gnutls.so.27.olds ...