gulp、MockJs、NodeJs、Mustache脱离后台环境，只通过模拟数据运行项目

来源：互联网发布：qq音乐 for ubuntu 编辑：程序博客网时间：2024/06/06 00:54

项目需求：在node环境下开发的项目，发布后不依靠后台数据，只通过模拟数据能正常运行（做项目demo）；
用到的主要技术：gulp（构建工具），MockJs（模拟数据），NodeJs（文件读写流），Mustache（拿到数据后页面渲染）；
开发中遇到的问题说明：模拟数据采用MockJs，之前的思路是将数据用json文件的形式写成，然后用Mock拦截url返回从json文件中读取出数据作为template返回，就是上一篇文章中的形式，但这样写就存在着无法根据参数返回数据，参数基本都用不上了，这种方式生成的MockData.js文件如下：
这里写图片描述
为了能根据参数返回不同的结果，因此将模拟数据文件用js文件写成，也就是将Mock函数url对应的结果用function函数来解析参数，并根据参数返回，生成的MockData.js文件结构如下：

1、创建一个gulp项目（之前的博客中有写到，不懂的可以往前翻阅），命名为gulpDemo；

项目结构入下：
这里写图片描述

2、创建page2.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="/css/page2.css"></head><body><div class="tableBox">    <h2>电站信息</h2>    <table id="plantMsg" cellspacing="0">        <thead>            <tr>                <th>电站状态</th>                <th>电站名称</th>                <th>电站地址</th>                <th>联系人</th>                <th>联系电话</th>                <th>装机容量(kW)</th>            </tr>        </thead>        <tbody></tbody>    </table></div><script type="text/javascript" src="/js/require.js" data-main="/js/partial/page2.js" defer async></script></body></html>

3、创建page2.less

.tableBox{  table{    width: 50%;    border-top: 1px solid #ccc;    border-left: 1px solid #ccc;    th{      width: 10%;      text-align: center;      border-right: 1px solid #ccc;      border-bottom: 1px solid #ccc;    }    td{      text-align: center;      border-right: 1px solid #ccc;      border-bottom: 1px solid #ccc;    }  }}

4、创建page2.js

/** * Created by p00422 on 2017/6/21. */require.config({    paths: {        'jquery': '../plugin/jquery.min',        'mustache': '../plugin/mustache.min',        'MockData': '../plugin/mockData/MockData'    }})// 使用 Mockrequire(["jquery"],function($){    require(['mustache','MockData'],function(Mustache){        var params = {            type:2        }        $.ajax({            url:'/tableData/plantMsg',            method:'post',            dataType:'json',            mockData:false,            data:JSON.stringify(params),            success:function(data){                var result = {                    plantMsg:data                };                console.log(result);                var template = '{{#plantMsg}}<tr><td>{{status}}</td><td>{{name}}</td><td>{{addr}}</td>' +                    '<td>{{contact}}</td><td>{{contactPhone}}</td><td>{{capacity}}</td></tr>{{/plantMsg}}';                var appendHtml = Mustache.render(template,result);                console.log(appendHtml);                $('#plantMsg tbody').html(appendHtml);            },            error:function(e){                console.log(e);            }        })    });// 输出结果})();

5、创建gulpfile.js

/** * Created by p00422 on 2017/6/21. */var gulp = require('gulp'),    plugins = require("gulp-load-plugins")({        pattern: '*' //让gulp-load-plugins插件能匹配除了gulp插件之外的其他插件    }),    path = {        html: 'html/**/*.html',        htmlDir: 'dest/',        css: 'css/*.css',        cssDir: 'dest/css',        less: 'less/*.less',        js: 'js/**/*.js',        jsDir: 'dest/js',        images: 'images/*.+(jpg|png|gif|svg)',        imagesDir: 'dest/images'    },    isMock = true;//压缩css,压缩后的文件放入dest/cssgulp.task('minifycss', function () {    return gulp.src(path.css)        .pipe(plugins.cssmin()) //压缩        .pipe(gulp.dest(path.cssDir));//输出});//合并并压缩css，合并压缩后的文件放入dest/cssgulp.task('concatminifycss', function () {    return gulp.src(path.css)        .pipe(plugins.concat('main.css'))    //合并所有css到main.css        //.pipe(gulp.dest(path.cssDir))    //输出main.css到文件夹        //.pipe(plugins.rename({suffix: '.min'}))   //rename压缩后的文件名        .pipe(plugins.cssmin())//压缩        .pipe(gulp.dest(path.cssDir));//输出});//压缩js，压缩后的文件放入dest/jsgulp.task('minifyjs', function () {    return gulp.src(path.js)        .pipe(plugins.uglify())//压缩        .pipe(gulp.dest(path.jsDir));//输出});//合并并压缩js，合并压缩后的文件放入dest/jsgulp.task('concatminifyjs', function () {    return gulp.src(path.js)        .pipe(plugins.concat('main.js'))    //合并所有js到main.js        .pipe(gulp.dest(path.jsDir))    //输出main.js到文件夹        .pipe(plugins.rename({suffix: '.min'}))   //rename压缩后的文件名        .pipe(plugins.uglify())//压缩        .pipe(gulp.dest(path.jsDir));//输出});//合并并压缩html，合并压缩后的文件放入dest/gulp.task('html', function () {    gulp.src(path.html)        .pipe(plugins.replace('__VERSION', Date.now().toString(16)))        .pipe(plugins.htmlmin({            removeComments: true,//清除HTML注释            collapseWhitespace: true,//压缩HTML            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />            removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"            minifyJS: true,//压缩页面JS            minifyCSS: true//压缩页面CSS        }))        .pipe(gulp.dest(path.htmlDir))        .pipe(plugins.browserSync.stream());});//压缩图片，压缩后的文件放入dest/imagesgulp.task('image', function () {    gulp.src(path.images)        .pipe(plugins.imagemin({            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化        }))        .pipe(gulp.dest(path.imagesDir));//输出});//执行压缩前，先删除dest文件夹里的内容gulp.task('clean', function (cb) {    plugins.del(['dest/*'], cb)});//编译less到cssgulp.task("less", function () {    gulp.src(path.less)        .pipe(plugins.less())        .pipe(gulp.dest(path.cssDir));});//监视文件的变化gulp.task("watch", function () {    gulp.watch(path.less, ['less']);    gulp.watch(path.css, ['concatminifycss']);    gulp.watch(path.html, ['html']);    gulp.watch(path.js, ['minifyjs']);    gulp.watch(path.images, ['image']);});gulp.task("build", ["clean"], function (cb) {    plugins.runSequence(['concatminifycss', 'image', 'less', 'minifyjs', 'html', 'MockData', "watch"], cb);});//MockDatagulp.task('MockData',function(){    function extend() {        var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},            i = 1,            length = arguments.length,            deep = false,            toString = Object.prototype.toString,            hasOwn = Object.prototype.hasOwnProperty,            push = Array.prototype.push,            slice = Array.prototype.slice,            trim = String.prototype.trim,            indexOf = Array.prototype.indexOf,            class2type = {                "[object Boolean]": "boolean",                "[object Number]": "number",                "[object String]": "string",                "[object Function]": "function",                "[object Array]": "array",                "[object Date]": "date",                "[object RegExp]": "regexp",                "[object Object]": "object"            },            jQuery = {                isFunction: function (obj) {                    return jQuery.type(obj) === "function"                },                isArray: Array.isArray ||                function (obj) {                    return jQuery.type(obj) === "array"                },                isWindow: function (obj) {                    return obj != null && obj == obj.window                },                isNumeric: function (obj) {                    return !isNaN(parseFloat(obj)) && isFinite(obj)                },                type: function (obj) {                    return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"                },                isPlainObject: function (obj) {                    if (!obj || jQuery.type(obj) !== "object" || obj.nodeType) {                        return false                    }                    try {                        if (obj.constructor && !hasOwn.call(obj, "constructor") && !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {                            return false                        }                    } catch (e) {                        return false                    }                    var key;                    for (key in obj) {}                    return key === undefined || hasOwn.call(obj, key)                }            };        if (typeof target === "boolean") {            deep = target;            target = arguments[1] || {};            i = 2;        }        if (typeof target !== "object" && !jQuery.isFunction(target)) {            target = {}        }        if (length === i) {            target = this;            --i;        }        for (i; i < length; i++) {            if ((options = arguments[i]) != null) {                for (name in options) {                    src = target[name];                    copy = options[name];                    if (target === copy) {                        continue                    }                    if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {                        if (copyIsArray) {                            copyIsArray = false;                            clone = src && jQuery.isArray(src) ? src : []                        } else {                            clone = src && jQuery.isPlainObject(src) ? src : {};                        }                        // WARNING: RECURSION                        target[name] = extend(deep, clone, copy);                    } else if (copy !== undefined) {                        target[name] = copy;                    }                }            }        }        return target;    }    var fs = require('fs');    var baseUrl = 'dataJs';    var mockJsFile = './js/plugin/mockData/MockData.js';    var fileReadStream;    var files;    var appendData='';    //获取目录下的左右文档    if(fs.existsSync(baseUrl)){        files = fs.readdirSync(baseUrl);        createStreamFile();    }else {        console.log(baseUrl + "  Not Found!");    }    fs.writeFileSync(mockJsFile,'define(\'MockData\', [\'../plugin/mock-min\'], function (Mock) {\n','utf8'); //同步写入    function createStreamFile(){        if(!(files.length)){            console.log('copy end!');            fs.appendFileSync(mockJsFile,'\n});','utf8');            return;        }        var chunks = [];        var size = 0;        var _thisFile = files.shift();        var objName = _thisFile.replace('.js','');        console.log(_thisFile);        //console.log(_thisFile);        var currenFile = baseUrl + '/' + _thisFile;        fileReadStream = fs.createReadStream(currenFile, {highWaterMark:64 * 1024})        fileReadStream.setEncoding('UTF-8');        fileReadStream.on('data', (chunk) => {            if(typeof chunk != 'Buffer'){                chunk = new Buffer(chunk);            }            chunks.push(chunk)            size +=chunk.length;        })        fileReadStream.on('end', () => {            if(chunks.length){                var wholeData = Buffer.concat(chunks,size);                //extend(middleware,eval(wholeData.toString()));                eval(wholeData.toString());                //console.log(eval(objName));                var middleware = eval(objName);                //middleware();                //console.log(objName);               /* var stringObj = JSON.stringify(wholeData.toString());                var obj = JSON.parse(stringObj);*/                for(var item in middleware){                    appendData = 'Mock.mock("/'+_thisFile.replace('.js','')+'/'+item+'",'+middleware[item]+');\n';                    fs.appendFileSync(mockJsFile,appendData,'utf8');                }                //fs.appendFileSync(mockJsFile,wholeData+'\n','utf8');            }else {                console.log('文件为空！');            }            createStreamFile()        })    }});//同步刷新gulp.task("serve", ["build"], function () {    plugins.browserSync({        //files: '/build/**', //监听整个项目        open: 'local', // 'external' 打开外部URL, 'local' 打开本地主机URL//        https: true,        port: 80,        online: false,        notify: false,        logLevel: "info",        logPrefix: "test",        logConnections: true, //日志中记录连接        logFileChanges: true, //日志信息有关更改的文件        scrollProportionally: false, //视口同步到顶部位置        ghostMode: {            clicks: false,            forms: false,            scroll: false        },        server: {            baseDir: './dest'            //middleware: middleware        }    });});//默认命令，在cmd中输入gulp后，执行的就是这个命令gulp.task('default', ['serve']);

6、创建模拟数据文件

kpiData.js

var kpiData = {  plantMsg:function(params){    var templateA = [      {        "status":"正常",        "name":"龙岗电站",        "addr":"安微",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      },{        "status":"断连",        "name":"小河电站",        "addr":"安微",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      }];    var templateS = [      {        "status":"正常",        "name":"安正电站",        "addr":"泗县",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      },{        "status":"断连",        "name":"神山口电站",        "addr":"泗县",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      }];    params && params.body && params.body.type && defaultFunc(params.body.type);    function defaultFunc(param){      switch (param){        case 1:          return templateA;          break;        case 3:          return templateS;          break;        default:              return templateS;      }    }    return templateS;  },  curveMsg:function(params){    var templateA = [      {        "status":"正常",        "name":"龙岗电站",        "addr":"安微",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      },{        "status":"断连",        "name":"小河电站",        "addr":"安微",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      }];    var templateS = [      {        "status":"正常",        "name":"安正电站",        "addr":"泗县",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      },{        "status":"断连",        "name":"神山口电站",        "addr":"泗县",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      }];    params && params.body && params.body.type && defaultFunc(params.body.type);    function defaultFunc(param){      switch (param){        case 1:          return templateA;          break;        case 3:          return templateS;          break;        default:          return templateS;      }    }    return templateS;  }};

tableData.js

var tableData = {  plantMsg:function(params){    console.log(params);    var templateA = [      {        "status":"正常",        "name":"龙岗电站",        "addr":"安微",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      },{        "status":"断连",        "name":"小河电站",        "addr":"安微",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      }];    var templateS = [      {        "status":"正常",        "name":"安正电站",        "addr":"泗县",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      },{        "status":"断连",        "name":"神山口电站",        "addr":"泗县",        "contact":"张全蛋",        "contactPhone":"13548691285",        "capacity":"100"      }];    params && params.body && params.body.type && defaultFunc(params.body.type);    function defaultFunc(param) {      switch (param) {        case 1:          return templateA;          break;        case 3:          return templateS;          break;        default:          return templateS;      }    }    return templateS;  }};

页面运行结果：
这里写图片描述

阅读全文

0 0