Skip to content

示例演示

Jump to bottom Edit New page
zhangyunlong edited this page Sep 16, 2013 · 1 revision

示例安装

F.I.S的官网就是使用fis系统进行开发的，现在我们使用FIS-PC解决方案重新开发了官网，用户可直接下载安装示例来直观的观察体验FIS-PC解决方案的开发模式：

$ fis-pc install pc-demo-common
$ fis-pc install pc-demo-home

或者你可以直接安装整个demo示例

$ fis-pc install pc-demo

由于FIS官网使用了markdown语法，还需要安装FIS插件 fis-parser-marked

$ npm install -g fis-parser-marked

目录结构

在你执行命令下的目录下会下载安装common和home两个模块，具体目录如下：

├── common   //公用资源模块
│   ├── fis-conf.js  //配置文件
│   ├── page     //页面模板目录
│   ├── plugin   //smarty plugin目录
│   ├── static   //静态资源目录
│   └── widget   //模块化组件目录
└── home    //业务模块
    ├── fis-conf.js
    ├── page
    ├── static
    ├── test    //测试数据目录
    └── widget

用户根据目录规范，将代码进行分类归置，具体的开发规范可查看解决方案规范。接下来我们将模块进行发布，在本地环境中预览页面：

//启动本地server服务
fis-pc server start
//在common模块路径下发布common模块
fis-pc release -c
//在home模块路径下发布home模块
fis-pc release -c
//在浏览器中访问页面，可预览FIS官网
http://localhost:8080/home/page/index

发布完模块后，用户则可以在浏览器中访问编译后的页面，回到模板源码，用户可以了解到页面是如何进行开发的.

示例解析

在模板框架中提供了很多模板插件，为模板开发提供使用。

  • 通过html插件控制整体页面的输出，以及注册前端组件化框架。
  • 通过head插件在模板解析运行时，控制加载同步静态资源使用。
  • 通过body插件可在页面底部集中输出JS静态资源。

common模块中的layout.tpl，通过后端框架开发，组织整个页面:

<!DOCTYPE html>
{%* 使用html插件替换普通html标签，同时注册JS组件化库 *%}
{%html framework="common:static/mod.js" class="expanded"%}
    {%* 使用head插件替换head标签，主要为控制加载同步静态资源使用 *%}
    {%head%}
	<meta charset="utf-8"/>
    	<meta content="{%$description%}" name="description">
    	<title>{%$title%}</title>
    	{%block name="block_head_static"%}{%/block%}
    {%/head%}
    {%* 使用body插件替换body标签，主要为可控制加载JS资源 *%}
    {%body%}
	{%block name="content"%}{%/block%}
    {%/body%}
{%/html%}
  • 通过require插件加载静态资源，便于静态资源管理。
  • 通过script插件管理JS片段，集中在页面底部加载。
  • 通过widget插件调用模板组件组织页面，处理对应的静态资源。

home模块中的index.tpl，加载页面模板对应的静态资源，通过模板组件组织页面:

{%extends file="common/page/layout.tpl"%}
{%block name="block_head_static"%}
    <!--[if lt IE 9]>
        <script src="/lib/js/html5.js"></script>
    <![endif]-->
    {%* 模板中加载静态资源 *%}
    {%require name="home:static/lib/css/bootstrap.css"%}
    {%require name="home:static/lib/css/bootstrap-responsive.css"%}
    {%require name="home:static/lib/js/jquery-1.10.1.js"%}
{%/block%}
{%block name="content"%}
    <div id="wrapper">
        <div id="sidebar">
            {%* 通过widget插件加载模块化页面片段，name属性对应文件路径,模块名:文件目录路径 *%}
            {%widget
                name="common:widget/sidebar/sidebar.tpl"
                data=$docs
            %}
        </div>
        <div id="container">
            {%widget name="home:widget/slogan/slogan.tpl"%}
            {%foreach $docs as $index=>$doc%}
                {%widget
                    name="home:widget/section/section.tpl"
                    call="section"
                    data=$doc index=$index
                %}
            {%/foreach%}
        </div>
    </div>
    {%require name="home:static/index/index.css"%}
    {%* 通过script插件收集JS片段 *%}
    {%script%}var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F70b541fe48dd916f7163051b0ce5a0e3' type='text/javascript'%3E%3C/script%3E"));{%/script%}
{%/block%}

模块中的widget目录为组件的资源目录，包括模板组件、JS组件、CSS组件：

  • 模板组件的调用方式为通过widget插件。
  • JS组件可通过前端组件化框架中的require方法进行同步加载以及require.async方法进行异步加载。

common模块中的sidebar模板组件：

<a id="btn-navbar" class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</a>
{%widget name="common:widget/nav/nav.tpl"%}
{%script%} require('./sidebar.js'); {%/script%}

为了在本地开发中可以看到相应的数据展示，在模块test目录中可配置页面模板对应的测试数据，用户可以根据本地测试功能进行本地开发调试。在home模块中已经配置了对应测试数据，用户可修改数据进行页面调试。

通过后端模板框架进行页面模板开发，同时由FIS-PC解决方案为你解决静态资源的管理和组织页面，为您解决很多很多问题，除了具体业务开发，其他的就都交给FIS吧！

Add a custom footer
Add a custom sidebar
Clone this wiki locally