gulp +mockjs模拟前端数据

一.强烈推荐这个静态服务器browser-sync

1.browser-sync的使用

browser-sync的文档真的是超级强大一定要看

现在来讲具体的使用方法，下面的代码是写在gulpfile.js中的

ps：这里也要注意middleWare这个参数能够在请求中转到你想去的地方

        //开启静态服务器
        var gulp        = require('gulp');
        var browserSync = require('browser-sync');//静态服务器的插件
        var mock        = require('./mock.js');//自己将拦截，生成随机数据这一模块提取出去了
      
        
       
        gulp.task('browser-sync', function () {
           
            var files = [
                    '**/*.html',
                    './img/*',
                    './css/*.css',
                    './js/*.js'
                ];
                //files是一个数组，在开启静态服务器的时候讲数据传进去能够监控文件的变化，就不用在写gulp.watch任务了,如果文件改动了，浏览器将自动刷新
            browserSync.init(files  //这里将数组传入，复制的时候应去掉,{
                server: {
                    baseDir: './release',
                    port: 3000,
                    middleware:mock.data() 
                },
                startPath:'page/'
            });
        });

二.mock.js的使用

1.这里是mock.js的模块，不做mock.js的使用，因为文档写的是真好,我用的比较浅，没有用到请求头的验证，这个插件能够模拟到与后台一样的环境，只要你愿意尝试

PS:这里几点是对代码中需要注意的点的讲解

1.在模块中return的是一个对象这是为了满足middleWare的写法要求

2.这里要注意数据中间的 处理，数的res 的参数这是代表返回数据的的内容创建的时候必须模拟后台的数据返回才能被浏览器识别，即有返回头，返回数据，返回结束正如代码中写到的res.writeHead，res.write(JSON.stringfy(data))，res.end() 的写法，其中少一个都出不来数据。

3.return回的对象中的路由是拦截页面中js的请求，他是根据字符串进行匹配的，必须是以路径的形式（必须有一个 '/'）,拦截到会将你写的数据返回到js中

/**
 * Created by Administrator on 2017/3/13.
 */
var Mock = require('mockjs');

//node.js的写法
exports.data = function(){
    return [
        {
            route:'/sidemenu',
            handle:function (req,res,next) {
                //req   请求头
                //res   响应的数据
                // res请求头是模拟的后台数据返回告诉浏览器返回数据头，没有头的话数据出不来的
                res.writeHead(200,{
                    "Content-type":"application/json;charset=UTF-8"
                });
                var Random = Mock.Random;
                Random.integer();
                Random.string('lower',4);
                Random.date('yyyy-MM-dd');
                var data = Mock.mock({
                    "menuList|6":[{
                        'menuNav':'@string()',
                        "menuNavContent|1-5":[{
                            'url':"index.html",
                            'name':"@string('lower',4)",
                            'id':"@integer(0,10)"
                        }]
                    }]
                });
                res.write(JSON.stringify(data));
                res.end();//有开头有结尾不然数据依然无返回
            }
        }
    ]
};

三.测试数据

在页面中直接写ajax，根据路由进行匹配拦截返回相应数据

  这里是上面代码返回的数据

        {
          "menuList": [
            {
              "menuNav": "AxcG5k#",
              "menuNavContent": [
                {
                  "url": "index.html",
                  "name": "vdko",
                  "id": 1
                },
                {
                  "url": "index.html",
                  "name": "nutj",
                  "id": 0
                },
                {
                  "url": "index.html",
                  "name": "pfhx",
                  "id": 2
                },
                {
                  "url": "index.html",
                  "name": "wcfv",
                  "id": 8
                },
                {
                  "url": "index.html",
                  "name": "ubwf",
                  "id": 9
                }
              ]
            },
            {
              "menuNav": "7bGS)e",
              "menuNavContent": [
                {
                  "url": "index.html",
                  "name": "hufk",
                  "id": 8
                }
              ]
            },
            {
              "menuNav": "Jpg3e",
              "menuNavContent": [
                {
                  "url": "index.html",
                  "name": "agyd",
                  "id": 3
                },
                {
                  "url": "index.html",
                  "name": "rwok",
                  "id": 3
                },
                {
                  "url": "index.html",
                  "name": "vipk",
                  "id": 6
                },
                {
                  "url": "index.html",
                  "name": "nouv",
                  "id": 5
                },
                {
                  "url": "index.html",
                  "name": "bysh",
                  "id": 2
                }
              ]
            },
            {
              "menuNav": "Ic7j",
              "menuNavContent": [
                {
                  "url": "index.html",
                  "name": "qdwd",
                  "id": 0
                },
                {
                  "url": "index.html",
                  "name": "kgiu",
                  "id": 5
                }
              ]
            },
            {
              "menuNav": "[S6",
              "menuNavContent": [
                {
                  "url": "index.html",
                  "name": "wtzk",
                  "id": 9
                },
                {
                  "url": "index.html",
                  "name": "czmk",
                  "id": 4
                }
              ]
            },
            {
              "menuNav": "BKW3!5",
              "menuNavContent": [
                {
                  "url": "index.html",
                  "name": "jubd",
                  "id": 2
                },
                {
                  "url": "index.html",
                  "name": "lzpv",
                  "id": 8
                }
              ]
            }
          ]
        }

四.小结

这里利用mockjs生成随机数据的，路由拦截的特点，结合 browser-sync中间件的处理函数将返回数据返回给ajax，可以做到完全的前后端分离开发，只要前期数据格式定好，最后在对接的时候可以迅速完成。