Generator-java-webapp NPM

generator-java-webapp

快速构建 java web 项目的后台前端脚手架（bootstrap+seajs+fed）

发现平时子生成器并用不上，已改用 tomato-cli，能更方便的更新模板

注：此脚手脚只适用 17173 内部使用, 外部人员慎用

构建成功后的工程目录结构说明：

|- src/
  |- app                     #seajs模块化文件
    | - common               # 公共模块
    | - mod1
    | - ...
  |- css                     #样式文件
  |- font                    #字体
  |- img                     #图片
  |- less                    # 存放less文件
    | - app                  # 业务样式
      | - base               
      | - component
      | - layout
      | - page
      | - app.less
      | - login.less
    | - awesome              # font-awesome
    | - bootstrap            # bootstrap
  |- js                      #脚本文件，存放所有非模块化文件
    |- sea-config.js         #seajs配置文件
  |- mov                     #视频，音频文件
|- mock                      #mock文件
  | - _globals.json # 全局配置文件
  | - _map  # mock mapping file
  | - permission.js 权限 mock file
|- node_modules
|- spm_modules
|- Gulpfile.js
|- server.js
|- .jshintrc
|- .editorconfig
|- package.json
|- README.md
|- dist/                     #部署文件
|- WEB-INF/                  #java 模板文件

Usage

安装 generator-java-webapp:

npm install -g generator-java-webapp

如已有安装过, 请执行 update

npm update generator-java-webapp -g

创建一个 java web 项目目录，cd到目录下:

mkdir my-new-project && cd $_

运行 yo java-webapp，可选择性的输入你的工程名，如无输入即你的工程目录名

yo java-webapp [app-name]

Generators

可用的生成器：

java-webapp

按 java web 的目录规范，创建前端工程目录文件

举例：

yo java-webapp

page

自定义一个业务模块，最终生成3个文件, 用”/“，生成带目录的文件

举例：

yo java-webapp:page login

生成 src/app/login/index.js

'use strict';

//code

生成 WEB-INF/template/ftl/admin/login/index.ftl

<#import '/WEB-INF/template/ftl/inc/inc.ftl' as inc />

<@inc.header '页面标题'>

</@inc.header>
<@inc.body '页面菜单名'>
    <p>这是页面内容</p>
</@inc.body>
<@inc.footer>
    <script>
        seajs.use('login/index');
    </script>
</@inc.footer>

生成 mock/login.html.js

var permission = require('./permission');

module.exports = function(req, res, next) {
  res.render('template/ftl/admin/login/index.ftl', { menuList: permission.menuList, menuListJson: permission.menuListJson });
};

Mock

创建 mock 文件，采用 fed 模拟的接口数据文件

举例：

yo java-webapp:mock mypage

生成 mock/mypage.js, mockjs 规则见 http://mockjs.com/

var Mock = require('mockjs');

module.exports = function(req, res, next) {
  var data = {
    result: 'success',
    messages: [],
    data: {
      id: '@id',
      name: '@name'
      'sex|0-1': 0
    }
  };
  data = JSON.stringify(Mock.mock(data));
  res.end(data);
};

js

创建一个 js 文件

举例：

yo java-webapp:js myapp

生成 myapp.js

'use strict';

// code

ftl

创建一个 ftl 文件

举例：

yo java-webapp:ftl myapp

生成 myapp.ftl

<#import '../inc/inc.ftl' as inc />

<@inc.header '页面标题'>

</@inc.header>
<@inc.body ''>
    <p>这是页面内容</p>
</@inc.body>
<@inc.footer>
    
</@inc.footer>