gulp、MockJs、NodeJs、Mustache脱离后台环境，只通过模拟数据运行项目
2017-06-24 18:01
846 查看
项目需求：在node环境下开发的项目，发布后不依靠后台数据，只通过模拟数据能正常运行（做项目demo）；
用到的主要技术：gulp（构建工具），MockJs（模拟数据），NodeJs（文件读写流），Mustache（拿到数据后页面渲染）；
开发中遇到的问题说明：模拟数据采用MockJs，之前的思路是将数据用json文件的形式写成，然后用Mock拦截url返回从json文件中读取出数据作为template返回，就是上一篇文章中的形式，但这样写就存在着无法根据参数返回数据，参数基本都用不上了，这种方式生成的MockData.js文件如下：
为了能根据参数返回不同的结果，因此将模拟数据文件用js文件写成，也就是将Mock函数url对应的结果用function函数来解析参数，并根据参数返回，生成的MockData.js文件结构如下：
tableData.js
页面运行结果：
用到的主要技术：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'
}
})
// 使用 Mock
require(["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/css
gulp.task('minifycss', function () {
return gulp.src(path.css)
.pipe(plugins.cssmin()) //压缩
.pipe(gulp.dest(path.cssDir));//输出
});
//合并并压缩css，合并压缩后的文件放入dest/css
gulp.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/js
gulp.task('minifyjs', function () {
return gulp.src(path.js)
.pipe(plugins.uglify())//压缩
.pipe(gulp.dest(path.jsDir));//输出
});
//合并并压缩js，合并压缩后的文件放入dest/js
gulp.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/images
gulp.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到css
gulp.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);
});
//MockData
gulp.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.jsvar 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;
}
};页面运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 新项目开发及运行环境配置-nodejs前台+java后台+postgresql数据库+nginx+tomcat
- 模拟搭建Web项目的真实运行环境（一）
- 模拟搭建Web项目的真实运行环境（六）
- Jquery通过Ajax发送Json数据到后台验证模拟登陆操作demo
- ORACLE DBA工具收集（Oracle DUL/AUL/ODU 恢复工具，可以脱离Oracle运行环境，直接从数据文件中读取记录）
- 如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发
- vue项目模拟后台数据
- [libgdx]项目通过RoboVm编译到ios平台并运行的环境配置
- 模拟搭建Web项目的真实运行环境（四）
- 模拟搭建Web项目的真实运行环境（三）
- MockJs结合json-server模拟后台数据
- 模拟搭建Web项目的真实运行环境（五）
- 前端模拟后台返回数据之Mockjs
- 在vue-cli环境下模拟数据接口及如何应用mockjs
- HoloLens开发笔记（一）- 开发环境配置及通过Visual Studio运行项目
- vue2.0 如何通过本地json文件模拟后台数据接口
- 模拟搭建Web项目的真实运行环境（七）
- [置顶] linux服务器后台运行nodeJS项目
- vue项目中使用mockjs模拟接口返回数据
- Android与web服务器数据交互编程---3网络爬虫项目实现虚拟浏览器的jsp后台运行