基于fis3+ express + swig + react + mysql的前端和后端集成解决方案工程示例。在阅读此文档之前，希望你最好对fis、swig、express 、mysql有一定的了解。
- 基于原生fis前端集成方案对前端资源进行打包，相比自定义fis扩展，方便fis组件升级和维护。
- 整合前端和后端，提供一套骨架，并提供基于mysql的运行示例，拿来即可使用，扩展也很方便。
- 模板引擎采用 swig ，提供易用的
html、head、body、widget、script、style等扩展标签。基于这些标签后端可以自动完成对页面的性能优化。 - 基于
widget标签，可以轻松实现组件化，同名tpl、 css、js自动关联加载。
# 安装 fis 到全局
npm install -g fis3
# 下载工程.
git clone https://github.com/hubcarl/fis3-react-app.git
# 进入 fis3-react-app 目录， release 后就可以预览了。
cd fis3-react-app
#工程运行
fis3 release -w 文件修改监控
fis3 server start --timeout 10000 --port 9000 --type node所有页面级别的模板文件，放在此目录。此tpl 可以直接在浏览器中预览。比如 page/index.tpl 可以通过 http://127.0.0.1:9000 访问。 需要强调的的是，模板引擎采用的是 swig, 可以采用模板继承机制来实现模板复用。
layout.tpl
<!doctype html>
{% html lang="en" framework="public/static/js/mod.js" %}
{% head %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/static/favicon.ico">
<title>{{ title }}</title>
{% require "public/static/css/normalize.css" %}
{% require "public/static/css/bootstrap.css" %}
{% require "public/static/css/app.css" %}
{% endhead %}
{% body %}
{% widget "widget/menu/menu.tpl" %}
{% block beforecontent %}
{% endblock %}
<div class="container">
{% block content %}
{% endblock %}
</div>
{% block aftercontent %}
{% endblock %}
{% endbody %}
{% endhtml %}
news/index/index.tpl
{% extends 'page/layout.tpl' %}
{% block content %}
<div class="container smart-container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<ul class="smart-artiles" id="articleList">
{% for item in list %}
<li>
<div class="point">+{{item.hits}}</div>
<div class="card">
<h2><a href="/detail/{{item.id}}" target="_blank">{{item.title}}</a></h2>
<div>
<ul class="actions">
<li>
<time class="timeago">{{item.createDate}}</time>
</li>
<li class="tauthor">
<a href="#" target="_blank" class="get">Sky</a>
</li>
<li><a href="#" class="kblink-8007">+收藏</a></li>
</ul>
</div>
</div>
</li>
{% endfor %}
</ul>
<div id="pagerBottom" class="smart-pager"></div>
</div>
</div>
</div>
{% require "client/views/page/news/index/index.js" %}
{% script %}
console.log('>>>>test>>>>>');
require('client/views/page/news/index/index.js');
{% endscript %}
{% endblock %}
用来存放所有静态资源文件，css, js, images ,组件等等。如：
├── css
│ ├── bootstrap-theme.css
│ ├── bootstrap.css
│ └── style.css
└── js
├── bootstrap.js
└── mod.js
用来存放各类组件代码。组件分成3类。
- 模板类：包含 tpl, 可以选择性的添加 js 和 css 文件，同名的 js 和 css 会被自动加载。
模板类文件，可以在模板中通过 widget 标签引用。如
{% widget "widget/menu/menu.tpl" %}- js 类： 主要包含 js 文件，放在此目录下的文件一般都会自动被 amd define 包裹，可选择性的添加同名 css 文件，会自动被引用。
此类组件，可以在 tpl 或者 js 中通过 require 标签引用。
{% require "client/views/page/news/index/index.js" %}
{% script %}
console.log('>>>>test>>>>>');
require('client/views/page/news/index/index.js');
{% endscript %}
- 纯 css 类：只是包含 css 文件。比如 compass. 同样也是可以通过 require 标签引用。
编译配置文件，详情请查看配置 API。
https://segmentfault.com/a/1190000004120539
http://7demo.github.io/fis3%E5%9F%BA%E6%9C%AC%E7%9F%A5%E8%AF%86%E7%82%B9/