前后端分离工具之ftl-server

文章来源：https://www.npmjs.com/package/ftl-server

源代码可参考：https://github.com/szmtcjm/ftl-server/blob/master/lib/config.js

ftl-server 是一前端开发工具，支持解析freemarker模板，模拟后端接口，反向代理等功能。

特性

解析freemarker模板
静态资源服务
mock请求
代理请求
livereload
weinre

安装

1. npm install ftl-server -g

2. 在工程目录下新建配置文件，比如ftl.config.js，配置文件格式如下：

module.exports = {
  public: 'E:\somedir\public',         //静态文件目录
  port: '80',              //端口号，默认为80
  hot: true,          //布尔值，是否开启livereload；开启后修改css会自动更新页面的样式，修改ftl/js/图片等会自动刷新页面
  watch: [require.resolve('./page.ftl'), 'E:\ftlServerpage.mock'],     //需要监控的额外的配置文件，值为数组
  remoteDebug: {              //remoteDebug 针对weinre的配置
    browser: 'firefox'
  },
  ftl: {       //配置freemarker的解析
    base: 'E:\somedir\ftl',                //配置freemarker模板目录
    dataFiles: ['E:\somedir\data.ftl'],           //配置ftl模板需要的数据文件，也就是造假数据的文件
    global: {              //ftl共享的数据文件
 
    },
    'ftlfile.ftl': function(req, res) {           //key ftlfile.ftl表示要渲染的ftl文件， value表示该渲染该ftl的数据 
      return {
        saleActivityMap: {
          "000008": {
            activityStatus: 'actived'
          }
        }
      }
    }
 
  },
  mock: [{       //接口模拟，模拟请求
    path: '/request',        //请求名
    method: 'get',         //请求方法
    status: '200',        //请求状态
    header: {         //请求头
 
    },
    response: function(req, res) {        //请求的返回内容
      return {
        a: 1,
        B: 2
      }
    }
  }, 'E:\mock\mock.js'],     //文件格式见下面的源代码
  proxy: [{
    path: '/proxy1',       //表示需要反向代理的请求path
    target: 'http://localhost:3000'     //表示代理的目标地址
    }
  ]
}

E:\mock\mock.js格式如下：

// /dir/mock.js 
// 可以export一数组，或者直接一对象 
module.exports = [{
  path: '/mock',
  method: 'post',
  response: function(req, res) {
      return {
          result: true
      }
  }
}]

执行 fs -c ./ftl.config.js -p 1008 或 ftl-server -c ./ftl.config.js -p 1008 或 fs

3. 访问 http://localhost:1008/，即可直接浏览目录下的ftl页面。

项目实践

1. 项目根目录下新建 ftl.config.js

1.1默认配置文件名为 ftl.config.js，启动时bash命令执行 fs 或 ftl-server

1.2如果是自定义配置文件名称，比如 config.js，则每次配置文件改动，或者启动ftl server时，bash命令需执行 fs -c ./config.js 或 ftl-server -c ./config.js

需要重新设置配置文件的路径。

2. ftl.config.js 代码内容

module.exports = {
    public: '/Users/xx/Projects/bbb/src/main/webapp',
    port: '10080',
    hot: true,
    ftl: {
        base: '/Users/xx/Projects/bbb/src/main/webapp/WEB-INF/template',
    },
    mock: ['/Users/xx/Projects/bbb/src/main/webapp/WEB-INF/template/fakeData/ajax/cc.js'],
    proxy: [{
        path: '/proxy1',
        target: 'http://localhost:3000'
    }
    ]
}

一些不常用的配置项没加进去，ftl.dataFiles里不能配置ftl文件的目录，只能配名字，这点不是很方便。

如果页面需要假数据，直接在页面上assign假数据就可以了。或者将assign的假数据单独建个ftl文件，然后在需要假数据的ftl include进去就行。

3. mock数据请求

mock配置页面需要发的一些请求，数组表示。如下：

/Users/xx/Projects/bbb/src/main/webapp/WEB-INF/template/fakeData/ajax/cc.js

module.exports = [{
    path: '/ajax.html',
    method: 'get',
    status: 200,
    response: function(req, res) {        
        return {
            "code": "200",
            "msg": "操作成功"
        }
    }
}]

4.启动服务

bash命令执行 fs 或 ftl-server

可以使用 fs --help 查看其它的操作。