前端模拟后端接口返回数据常用的三种方法

作者: 刘挚珂 | 来源:发表于2017-05-23 19:48 被阅读15684次

前端模拟后端接口返回数据常用的三种方法
Vue3-将流数据转换为文件并实现自动下载
前端虚拟接口mockJs的接入
python中的ajax
前端与后端的数据交互（jquery ajax+python fl
Angular开发钉钉微应用
Angular开发钉钉微应用
前端mock数据
Vue示例之使用Mock模拟数据与Axios请求数据
如何构建 Web 前端 Mock Server

一、请求本地 json 文件，返回数据。

1）注意json格式；

// list.json
{
  "code":"000",
  "message":"message信息",
  "lists":[
      {
        "name":"小明",
        "sex":"男",
        "age": "3"
      },
      {
        "name":"小红",
        "sex":"女",
        "age":"3"
      }
    ]
}

2）==请求路径是相对路径==，相对于当前发送请求的文件。

// 项目路径
.
├──index.html
└──list.json

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>请求本地json文件数据</title>
    <!--<script src="../js/jquery-1.7.2.min.js"></script>-->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function () {
        // 请求路径是当前文件的相对路径
        $.ajax({
            url:'list.json',
            contentType: 'application/json',
            type: 'POST',
            timeout: 5000,
            dataType:'JSON',
            data: JSON.stringify({schoolId: 123}),
            success: function (res) {
                if(res.code == '000'){
                    console.log(res);
                    $('body').html(JSON.stringify(res));
                }else{
                    alert(res.message);
                }
            },
            Error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                console.log(type);
                console.log(errorThrown);
            }
        });
    })
</script>
</body>
</html>

二、使用第三方框架（mockjs）,拦截ajax请求返回数据。

官网 gitHub源码地址

1）引入mockjs,可以是在线地址，或者是下载到本地引入，一般==在body结束标签前引入==。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>第三方框架，mockjs拦截ajax请求返回数据</title>
</head>
<body>

<!--内容-->

<!--body结束标签前引用-->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
</body>
</html>

2）根据数据模板生成模拟数据。（一般场景配置两个参数够用了Mock.mock( rurl, template )）

Mock.mock( rurl?, rtype?, template|function( options ) )
rurl（可选）。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
rtype（可选）。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template （可选）。表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)（可选）。表示用于生成响应数据的函数。
options 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- （必选）加载 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
    $(function () {

     /*
    * Mock.mock( rurl, template )
    * rurl:表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
    * template：表示数据模板，可以是对象或字符串
    * */

//         mock拦截ajax请求并返回数据
        Mock.mock(/\.json/, {
            'code':'000',
            'message':'message信息',
            'list|1-10': [{
                'id|+1': 1,
                'email': '@EMAIL',
                'name': '@name'
            }]
        })


        $.ajax({
            url:'list.json',
            contentType: 'application/json',
            type: 'POST',
            timeout: 5000,
            dataType:'JSON',
            data: JSON.stringify({schoolId: 123}),
            success: function (res) {
                if(res.code == 000){
                    console.log(res);
                    $('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
                }else{
                    alert(res.message);
                }
            },
            Error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                console.log(type);
                console.log(errorThrown);
            }
        });
    })
</script>

把html文件在浏览器里打开，出现以下格式的json数据；
==注意：每次打开页面或刷新一次页面数据会随机改变==；

{
   "code": "000",
   "message": "message信息",
   "list": [
       {
           "id": 1,
           "email": "u.skubdwsbs@nfuzlwgd.et",
           "name": "Michael Clark"
       },
       {
           "id": 2,
           "email": "u.sokjrkoja@lnmxlkx.kp",
           "name": "Brian Davis"
       },
       {
           "id": 3,
           "email": "t.chpjw@jnidn.se",
           "name": "Margaret Allen"
       }
   ]
}

3）（可选）配置拦截ajax请求时的行为；

Mock.setup( settings )；
settings必选，支持的配置项有：timeout；
指定被拦截的 Ajax 请求的响应时间，单位是毫秒。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- （必选）加载 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
    $(function () {
//         mock拦截ajax请求并返回数据
        Mock.mock(/\.json/, {
            'code':'000',
            'message':'message信息',
            'list|1-10': [{
                'id|+1': 1,
                'email': '@EMAIL',
                'name': '@name'
            }]
        })
       /*
        * Mock.setup( settings )
        * 配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。
        * settings必选。配置项集合。timeout可选。指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。*/
        Mock.setup({
            timeout: 4000
        })

        $.ajax({
            url:'list.json',
            contentType: 'application/json',
            type: 'POST',
            timeout: 5000,
            dataType:'JSON',
            data: JSON.stringify({schoolId: 123}),
            success: function (res) {
                if(res.code == 000){
                    console.log(res);
                    $('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
                }else{
                    alert(res.message);
                }
            },
            Error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                console.log(type);
                console.log(errorThrown);
            }
        });
    })
</script>

配置Mock.setup({timeout: 4000})之后网页打开4000毫秒之后才会返回数据;

4） Mock.Random 是一个工具类，用于生成各种随机数据。（其实上面例子中已经有使用）

Mock.Random 提供的完整方法（占位符）如下：
基本：boolean, natural, integer, float, character, string, range,
时间：date, time, datetime, now；
图片：image, dataImage；
颜色：color，hex，rgb，rgba，hsl；
文本：paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle；
名字：first, last, name, cfirst, clast, cname；
web：url, domain, email, ip, tld；
地址：region，province，city，county，zip；
Helper：capitalize, upper, lower, pick, shuffle；
Miscellaneous：guid, id, increment;

使用方法：在模板数据中定义参数,值为@加上对应的占位符用引号引起来，比如'nowTime':'@now',请求返回的数据就是当前发送请求时的时间 "2017-09-02 11:42:06"；下面我使用了三个占位符，

Mock.mock(/\.json/, {
    'code':'000',
    'message':'message信息',
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL', //邮箱
        'name': '@name'， //名字
        'time':'@now'    //当前时间
    }]
})

页面显示：

{
    "code": "000",
    "message": "message信息",
    "list": [
        {
            "id": 1,
            "email": "z.urorqdo@prrfhjnly.mil",
            "name": "Joseph Taylor",
            "time": "2017-09-02 11:42:06"
        },
        {
            "id": 2,
            "email": "m.oshsxmd@ewcolhl.na",
            "name": "Mary Harris",
            "time": "2017-09-02 11:42:06"
        },
        {
            "id": 3,
            "email": "l.zcbunjphx@hvdgteo.ir",
            "name": "Susan Thomas",
            "time": "2017-09-02 11:42:06"
        }
    ]
}

这里简单介绍一下mockjs怎么使用的，想了解更详细的使用，请参考官方文档和官方示例，写的很详细，这里就不多说了还有Mock.valid( template, data )效验真实数据的方法，个人觉得用的不多，想了解的自行查看文档。

三、使用node搭建简单服务器接收请求返回数据

1) 首先安装node

可以参考菜鸟教程node.js安装配置，或者自行搜索安装教程，访问官网下载慢的这里提供node-v8.40.msi安装包下载，百度网盘地址链接: https://pan.baidu.com/s/1boWTBQn 密码: w32w；
安装node 会自动安装npm包管理工具；
检查是否有安装node和 npm包管理工具，打开cmd命令行工具，输入node -v 和npm -v，会输出对应的版本号，如下所示：

C:\Users\liuzk
$ node -v
v8.4.0

C:\Users\liuzk
$ npm -v
5.3.0

全局安装 npm ,最好同时安装cnpm 淘宝npm镜像，如果npm 安装依赖包的时候报错，有时候是网络不好，可以使用淘宝镜像cnpm来安装；

npm install -g npm

npm install -g cnpm

2）安装express应用程序生成器

官网

全局安装express-generator;

npm install -g express-generator

有安装Git Bash Here等第三方命令行工具，我们打开文件管理，进入到想要生成项目的位置后，右键打开Git Bash Here 就可以在当前位置启动命令行工具了；
如果没有安装git等第三方cmd命令行工具，我们打开文件管理，进入到想要生成项目的位置后，直接在地址栏输入cmd，会在当前目录打开cdm命令行工具；
在我们想要的位置打开命令行工具之后，就可以开始以下步骤：

创建一个名为myapp的express应用程序

express --view=pug myapp

成功后会自动在目标位置创建一个名为myapp的项目并生成很多文件，命令行显示效果如下：

E:\my_work
$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css

   install dependencies:
     > cd myapp && npm install

   run the app:
     > SET DEBUG=myapp:* & npm start

在命令行最下面有提示，install dependencies: cd myapp && npm install 然后 run the app: npm start,我们按照提示来；

进入myapp项目；

cd myapp

安装package.json文件中的依赖；

npm install

网络不好可以用cnpm安装

cnpm install

运行项目

E:\my_work\myapp
$ npm start

> myapp@0.0.0 start E:\my_work\myapp
> node ./bin/www

在浏览器输入localhost:3000，会打开一个页面显示Welcome to Express，说明已经成功启动服务了。

3）配置

打开myapp项目，可以看到目录是下面这样的；

.
├── app.js
├── bin
│   └── www
├── node_modules //安装的依赖
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

这个时候，浏览器打开localhost:3000/users,可以看到页面显示respond with a resource
打开routes 文件夹下的users看到以下代码：

// routes/users.js文件

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

可以看到页面显示的内容就是users.js文件中返回的内容，我们定义自己想要返回的内容。

// routes/users.js文件

var express = require('express');
var router = express.Router();
var data = {
    'code':'000',
    'message':'message消息',
    'lists':[
        {
          'naem':'小明',
            'age': '12',
            'sex':'男'
        },{
          'naem':'小红',
            'age': '12',
            'sex':'女'
        }
    ]

}

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send(data);
});

module.exports = router;

改了之后再请求没有改变，查看命令行信息，304发现我们的请求给我们缓存了；

GET /users 304 2.543 ms - -

我们重新启动一下试试，刷新页面返回：

{
    "code": "000",
    "message": "message消息",
    "lists": [
        {
            "naem": "小明",
            "age": "12",
            "sex": "男"
        },
        {
            "naem": "小红",
            "age": "12",
            "sex": "女"
        }
    ]
}

这样虽然可以请求，但是有缓存问题，而且接口多的话每次都得配置一个路径，太复杂，所以要封装一下，重复使用，每次请求重新请求不加载缓存。

在项目下新建一个config文件夹并新建一个api.js,配置一下：

// config/api.js

var fs = require('fs');

/**
 * 检查请求的路径是否存在
 * @param apiName 请求路径
 * @param method  请求方式
 * @param params   请求参数
 * @param res 返回请求
 */
function getDataFromPath (apiName,method,params,res){
    if(apiName){
        fs.access(
            // 提取请求路径中的js文件
            apiName.substring(1)+'.js',
            // 回调函数，检查请求的路径是否有效失败返回一个错误参数
            function(err){
                if(!err){
                    // 每次请求都清除模块缓存重新请求
                    delete require.cache[require.resolve('..'+apiName)];
                    try{
                        addApiResult(res,require('..'+apiName).getData(method,params));
                    }catch(e){
                        console.error(e.stack);
                        res.status(500).send(apiName+' has an error,please check the code.');
                    }
                }else{
                    addApiResult(res);
                }
            }
        );
    }else{
        addApiResult(res);
    }
};
/**
 *  响应头
 * @param res
 */
function addApiHead(res){
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    // 跨域
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    // 控制http缓存
    res.header("Cache-Control", "no-cache, no-store, must-revalidate");
    res.header("Pragma", "no-cache");
    res.header("Expires", 0);
}

/**
 * 返回参数，如无返回参数返回404
 * @param res
 * @param result
 */
function addApiResult(res,result){
    if(result){
        res.send(result);
    }else{
        res.status(404).send();
    }
}

/*请求方式*/
// get
exports.get = function(req, res){
    addApiHead(res);
    getDataFromPath(req.path,'GET',req.query,res);
};

// post
exports.post = function(req, res){
    addApiHead(res);
    getDataFromPath(req.path,'POST',req.body,res);
};

打开根目录下app.js，在上面引入刚刚新建的文件api.js;


//引入API
var api = require('./config/api');

替换请求配置

/*配置请求*/
app.get('/', function(req, res){
    res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);

app.js最终代码：

// app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();
/*引入api*/
var api = require('./config/api');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//配置请求
app.get('/', function(req, res){
    res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);

module.exports = app;

根目录新建api文件夹，新建demo.js;

// api/demo.js

var dataDemo={
    'code':'000',
    'message':'message消息',
    'lists':[
        {
            'naem':'小明',
            'age': '12',
            'sex':'男'
        },{
            'naem':'小红',
            'age': '12',
            'sex':'女'
        }
    ]
}
exports.getData = function(method,data){
    var backData={
        "code":'000',
        "msg":"",
        "data":dataDemo
    }
    if(method=='DELETE'){
        backData={
            "code":'999',
            "msg":"不支持DELETE方法"
        }
    }
    return JSON.stringify(backData);
}kData);
}

重新运行npm start，浏览器打开localhost:3000，此时应该显示的是hello world；
打开localhost:3000/api/demo,页面显示

{
    "code": "000",
    "msg": "",
    "data": {
        "code": "000",
        "message": "message消息",
        "lists": [
            {
                "naem": "小明",
                "age": "12",
                "sex": "男"
            },
            {
                "naem": "小红",
                "age": "12",
                "sex": "女"
            }
        ]
    }
}

以上都成功了，那就说明配置成功了，复制一个js文件命名为demo2.js,改动一下数据，浏览器访问localhost:3000/api/demo2应该也是可以的；

4) 使用

假如线上接口是 https://www.baidu.com/mydata/java/school/list,我们在api文件夹按照路径新建文件夹和文件即可:


├── api
│   └── mydata
│       └── java
│           └── school
│               └── list.js

开发的时候指向本地服务器器接口，联调测试上线的时候只需要把指向本地服务器地址替换成线上地址一下就可以了。

<script type="text/javascript">
    $(function () {
        // var baseUrl = 'https://www.baidu.com';   //线上地址
        var baseUrl = 'http://localhost:3000/api';  //本地服务器地址
        $.ajax({
            url: baseUrl+'/mydata/java/school/list',
            contentType: 'application/json',
            type: 'POST',
            timeout: 5000,
            dataType:'JSON',
            data: JSON.stringify({schoolId: 123}),
            success: function (res) {
                if(res.code == '000'){
                    console.log(res);
                    $('body').html(JSON.stringify(res));
                }else{
                    alert(res.message);
                }
            },
            Error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                console.log(type);
                console.log(errorThrown);
            }
        });
    })
</script>

前端模拟后端接口返回数据常用的三种方法
一、请求本地 json 文件，返回数据。 1）注意json格式； 2）==请求路径是相对路径==，相对于当前发送请...
Vue3-将流数据转换为文件并实现自动下载
具体需求：后端接口返回流数据，前端根据接口拿到的流数据转换为excel表格后端接口返回数据示例：注意：流数据可以...
前端虚拟接口mockJs的接入
标签（空格分隔）： mockjs 模拟接口数据前后端分离开发序前端模拟接口数据的方式，大概分为以下...
python中的ajax
前端与后端的数据交互，最常用的就是GET、POST，比较常用的用法是：提交表单数据到后端，后端返回json 前端的...
前端与后端的数据交互（jquery ajax+python fl
前端与后端的数据交互，最常用的就是GET、POST，比较常用的用法是：提交表单数据到后端，后端返回json 前端的...
Angular开发钉钉微应用
前端：Angular5.2 后端：用dgate模拟后端返回数据。（业务需要） Github地址:https://...
Angular开发钉钉微应用
前端：Angular5.2 后端：用dgate模拟后端返回数据。（业务需要） Github地址:https://...
前端mock数据
前后端并行开发时，前端页面需要接口数据动态渲染，此时后端接口未开发完成，这时前端可以模拟接口请求。本文主要介绍在不...
Vue示例之使用Mock模拟数据与Axios请求数据
简述由于后端与前端同时开发，而后端接口还未开发完成，前端又急需数据进行测试。那么mock模拟数据就是很好的选择，...
如何构建 Web 前端 Mock Server
简介：如何构建 Web 前端 Mock Server 前后端分离真实数据模拟接口测试前后端分离让前端攻城师独立于...

前端模拟后端接口返回数据常用的三种方法

一、请求本地 json 文件，返回数据。

1）注意json格式；

2）==请求路径是相对路径==，相对于当前发送请求的文件。

二、使用第三方框架（mockjs）,拦截ajax请求返回数据。

1）引入mockjs,可以是在线地址，或者是下载到本地引入，一般==在body结束标签前引入==。

2）根据数据模板生成模拟数据。（一般场景配置两个参数够用了Mock.mock( rurl, template )）

3）（可选）配置拦截ajax请求时的行为；

4） Mock.Random 是一个工具类，用于生成各种随机数据。（其实上面例子中已经有使用）

三、使用node搭建简单服务器接收请求返回数据

1) 首先安装node

2）安装express应用程序生成器

3）配置

4) 使用

相关文章

前端模拟后端接口返回数据常用的三种方法

Vue3-将流数据转换为文件并实现自动下载

前端虚拟接口mockJs的接入

python中的ajax

前端与后端的数据交互（jquery ajax+python fl

Angular开发钉钉微应用

Angular开发钉钉微应用

前端mock数据

Vue示例之使用Mock模拟数据与Axios请求数据

如何构建 Web 前端 Mock Server

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue element-ui echart