Node-web-dev NPM

node-web-dev

一、简介

一个用于在开发时前后端分离的工具，不需要启动后端网站服务，使用nodejs服务来mock请求，

进行视图渲染，ajax接口代理等，从而实现，整站mock。

举个栗子：

后端：java springmvc + (动态视图: freemarker） ----名称： websites

前端：javascript

前后端在合作时，通常有以下场景

前端项目单独分开，在开发时使用.html静态文件 + js开发功能，开发完毕后，将视图前端资源等丢给后端开发人员转换成动态视图

以上场景会有以下问题

1.视图存在两份一份前端.html 另一份xx.动态视图,在调试样式时有时候难免会两边都需要顾全到，有时候容易造成不一致。
2.有些情况下，前端需要启动后端服务，来进行本地调试，这样对后端项目依赖性比较大。
3.如果要把视图分离出来，前端需要构建自己的站点，旧的模式迁到新的模式下，工作量比较大。

那么如果不想改变现有的框架模式，可以使用本模块进行mock

使用本模块的mock服务有以下优点

1.不需要调整现有框架，前端只需要把后端项目拉取到本地，通过配置就能实现mock方式浏览整站，并且独立开发
2.前后端可以并行开发，前端无需等待后端接口开发完毕，才能调试。
3.支持调用ajax接口时，代理到其他环境，例如：开发环境，测试环境等。
4.视图交给前端维护，便于管理 (不过部分后端动态视图前端学起来会有些成本，当然仅仅是针对这些特定场景定制，而不是通用所有人群)

二、安装

npm install node-web-dev --save-dev

三、环境要求

nodejs v6.2+ (目前使用es6语法所写，暂时不打算转换成es5)
jdk (在使用freemakre 需要依赖于jdk) 安装代价不大

四、都支持哪些动态视图编译?

目前仅支持freemarker的视图编译，后续部分会实现其他较为纯粹的动态视图

五、用例

var DynamicViewProjectDev = require('node-web-dev').DynamicViewProjectDev;	

var options = {
server: {
    "server": "../webapp/", 
    "files": ['../webapp/**/*.css', '../webapp/**/*.js'], 
    "index": "/", 
},
proxy: {
    target: 'http://10.21.11.161:8010',
    viewTarget:'http://10.21.11.161:8020'
},
local: {
    local: 'auto', 
    record:true,
    localDir: path.join(__dirname, '../../../mock/') 
},
projects: [
    path.join(grunt.projectPath, '../account/src/main/webapp/WEB-INF/views/**/*.ftl'),
    path.join(grunt.projectPath, '../search/src/main/resources/ftl/**/*.ftl'),
],
route: path.join(__dirname, '../../../routes/pc.route.js')
}

var dev = new DynamicViewProjectDev(options);

dev.on('dataWrap', (context) =>context.data.user={name:'ss',age:xxxx});

dev.startup();

六、参数解释

server 使用的是browser-sync服务
- server.server 前段静态资源网站服务器根目录例如 "../webapp/"。
- server.files 要监听的文件或者目录，文件改变时，会自动同步通常用于css或者js 例如:'../webapp//*.css', '../webapp//*.js'。
- server.indexReplace 当进行代理访问时，默认将 "/" 使用indexReplace值访问代理服务器，不影响本地路由匹配
proxy
- proxy.target mock接口服务器地址，详细设置参照: http-proxy
- proxy.viewTarget 本地视图route( {view:'xxx'})的代理接口地址，默认可以不填写，不填写情况统一使用target(为什么会有此参数？有时候我们可能希望本地的视图使用mock的，其他接口数据使用的不同环境的，例如：开发，测试等)
local
- local.mode 本地mock模式 'online'--> 所有接口使用在线数据，'auto'-->优先从代理获取数据,当获取失败，使用本地路由定义的数据,'local'--> 所有接口都使用本地, 'existsLocal'--> 当在本地置有路由则使用本地的，否则使用在线的
- local.localDir 本地mock数据的存放目录
- local.record 是否自动同步mock数据到本地
projects 要监听的后端项目，通常用于指定在后端项目中视图改变时，自动刷新浏览器例如:'./websites/src/main/web-inf/views/*/.ftl'
route 本地mock使用的路由装载js或者json 例如: './routes/route.js'

module.exports =[
    {
	"url":"/",
	"view": "site/home.ftl",
	"dir": "websites",
	"method":"GET",
	"viewsDir": "./websites/src/main/web-inf/views"
    },
    {
	"url":"/item/\\d+",
	"view": "item/item-info.ftl",
	"method":"GET",
	"dir": "websites",
	"viewsDir": "...."
    },
    {
	"url":"/news/list",
	"mock":"./mock/new-list.js",
	"method":"POST",
	"dir":"websites"
    },
    {
	"url":"/do",
	"method":"POST",
	"view": "redirect:/item/999"
    }]

七、事件

onReady 当mock服务启动后触发

onProxy 当mock请求代理服务器数据返回后触发

proxyHost: 代理host地址 req: 当前http请求对象 ClientRequest res: 当前http请求对应的返回对象 IncomingMessage (proxyHost, req, res)=>{
...... }

onResponse 当mock请求代理服务器数据返回后触发

content: 返回的内容string proxyRes 代理response req: 当前http请求对象 ClientRequest res: 当前http请求对应的返回对象 IncomingMessage (content,proxyRes, req, res)=>{
...... }

match 用于自定义匹配请求对应的路由，如果不指定，则默认根据route.js注册路由的url匹配

context: { route:默认匹配的路由,routeContainer: 路由容器}
pathname: 当前请求pathname
req: 当前http请求对象 ClientRequest
res: 当前http请求对应的返回对象 IncomingMessage
(context, pathname, req, res)=>{
	//通过复写context.route来重新定义当前匹配到的路由
	context.route  ={
	    view:'sss.ftl',
	    dir:'xxx',
	    ....

	}
}

error 当mock请求代理服务器出现异常时触发

error: 错误消息
req: 当前http请求对象 ClientRequest
res: 当前http请求对应的返回对象 IncomingMessage
(error, req, res)=>{

}

dataWrap 用于自定义mock数据处理，当需要对mock接口返回的数据进行额外处理可以使用此事件

context: {data:...}
(context)=>{
	context.data.other  ={.....};
}

八、定制编译器

ES6:

 var Compiler = require('node-web-dev').Compiler;

 class JspCompiler extends Compiler{

	constructor(){
	    super('.jsp');
	}

	compile(file,data,callback){
		......
		callback(error,results);
	}
 }

 //注册到编译容器
 Compiler.register(new JspCompiler());