跳转至

PC前端开发Demo

新建模块文件目录

** 新建的模块文件目录要在项目工程scripts/app的下级，也可以是project/scripts/app/**

新建sleet文件

  • 创建 template.sleet front-end/scripts/app/demo/role/template.sleet

（参考sleet），编译过后变成了.hbs文件（handlebarsjs）

view('search')
    div.title 查询列表
    div.form#searchForm > form(onsubmit='return false;')
        input.textbtn(type='text' placeholder='请输入名称' name='name' value=searchRole.name)
        a.btn.btn-blue.dib(id='search-role' href='javascript:;') 查询

view('main')
    div.table
        table.w100.text2 > form(action)
            thead
                tr
                    th(style='width:20%') > setting('role.no')
                    th(style='width:30%') > setting('role.name')
            tbody > each(roles) > tr
                td > echo(i)
                td > echo(name)

编译后 template.hbs front-end/scripts/app/demo/role/template.hbs

{{#view "search"}}
    <div class="title">查询列表</div>
    <div id="searchForm" class="form"><form onsubmit="return false;">
        <input class="textbtn" type="text" placeholder="请输入名称" name="name" value="{{searchRole.name}}"/>
        <a class="btn btn-blue dib" id="search-role" href="javascript:;">查询</a>
    </form></div>
{{/view}}
{{#view "main"}}
    <div class="table">
        <table class="w100 text2"><form action="action">
            <thead>
                <tr>
                    <th style="width:20%">{{setting "role.no"}}</th>
                    <th style="width:30%">{{setting "role.name"}}</th>
                </tr>
            </thead>
            <tbody>{{#each permissions}}<tr>
                <td>{{i}}</td>
                <td>{{name}}</td>
            </tr>{{/each}}</tbody>
        </form></table>
    </div>
{{/view}}

以上代码编写了两个view search main , 列表的表头字段要使用setting

新建 index.js

front-end/scripts/app/demo/role/index.js

      //创建items
      exports.items = {
          'main': 'main',
          'search': 'search'

      }

     //创建models
     exports.store = {
         models = {
             roles = {url: '../role/page', root: 'items', type: 'pageable'}, //分页使用的model
         }
      }

新建 view-xxx.js

  • 创建view-main.js front-end/scripts/app/demo/role/view-main.js template.sleet里有多少个view,就应该对应有多少个view-xxx.js文件
      //加载需要用到的其他模块
      var validate, _, $;
      _ = require('lodash/collection');
      validate = require('./app/util/validate').validate;
      $ = require('jquery');
      //创建bindings,定义main-view所绑定的models
      exports.bindings = {
          roles: true
      }

      //创建 dataForActions ,  定义在前端提交数据到后台前的数据检验
      //例如：分页
      exports.dataForActions = {
          turnPage: function(data, e) {
              var page;
              if (e.type === 'click') {
                  return {dir: data.dir};
              }
              if (e.keyCode !== 13) {
                  return false;
              }
              page = $(e.currentTarget).val();
              if (!validate(this.app, page, '页码', 'required', 'digits')) {
                  page = 1;
              }
              return {page: page};
          }
       }

     //创建 actions ，绑定页面点击事件的一些动作，动作会调用index.js 对应的this.store.callbacks.XX
     exports.action = {
         'click page-*': 'turnPage',// 绑定页面ID= page-* 的元素，触发  index.js 的 this.store.callbacks.turnPage
     }

    //创建dataForTemplates,定义渲染页面前对数据的处理
    exports.dataForTemplate = {
        roles: function(data) {
        var pageNum = this.bindings.roles._p.page, me = this;
        _.map(data.roles || [], function(role, i) {
            role.i = i + 1 + (pageNum - 1) * 1;
        });
        return data.roles;
        },
        page: function() {
            return this.bindings.roles._p.page;
        },
        pageCount: function() {
            return this.bindings.roles._p.pageCount;
        }
};
  • 创建 view-search.js front-end/scripts/app/demo/role/view-search.js
  exports.actions = {
      'click search-role': 'searchRole'  //绑定点击查询按钮的actons
  };

  exports.dataForActions = {
      //请求后台前面对于页面参数的检验
      searchRole: function(data) {
          if (data.role.name == '') {
              this.app.message.alert('名称必须填写');
              return false;
          }
          return data;
      }
    };

index.js 增加callbacks

front-end/scripts/app/demo/role/index.js 

    exports.store = {
        callbacks = {
            searchRole: function(payload) {
                this.models.roles.params = payload;
                this.get(this.models.roles);
            },
            turnPage: function(payload) {
                var model = this.models.roles;
                if (payload.dir) {
                    model[payload.dir + 'Page']();
                } else {
                    model.turnToPage(payload.page);
                }
                this.get(model);
            },
        }
    }

配置路由 router.js

front-end/scripts/app/router.js

    //配置路由
    exports.routes = {
        'demo/role': 'showRole'
    }
    //在content的region 展示
    exports.showRole = function() {
        return this.app.show('content', 'demo/role');
    };

开发的基本路线

index.js view-item.js template.sleet router.js

    文件中的基本定义项
    index.js : 
            exports.items,
            exports.store.models,
            exports.store.callbacks

    view-item.js :
             exports.bindings,
             exports.actons,
             exports.dataForActions,
             exports.dataForTemplate
  • 按照以上思路，开发添加功能

template.sleet 增加 添加按钮

view('search')
    div.title 查询列表
    div.form#searchForm > form(onsubmit='return false;')
        input.textbtn(type='text' placeholder='请输入名称' name='name' value=searchRole.name)
        a.btn.btn-blue.dib(id='search-role' href='javascript:;') 查询
        a.btn.btn-blue.dib(id='add-role' href='javascript:;') 新增

添加 detail view 

view('detail')
    div.textc
        div.form.dib.textl > form
            div.row
                div.text 角色名称
                div.input
                    input.textbtn(type='text' placeholder='请输入名称' name='name' value=role.name)
                    input.textbtn(type='hidden' name='id' value=role.id)
            div.row
                div.text 备注
                div.input
                    input.textbtn(type='text' placeholder='请输入备注' name='remark' value=role.remark)
            div.row
                div.text
                div.input
                    button#submit-save-role.btn.btn-green(type='button' value) 提交

编译后

{{#view "search"}}
    <div class="title">查询列表</div>
    <div id="searchForm" class="form"><form onsubmit="return false;">
        <input class="textbtn" type="text" placeholder="请输入名称" name="name" value="{{searchRole.name}}"/>
        <a class="btn btn-blue dib" id="search-role" href="javascript:;">查询</a>
        <a id="add-role" href="javascript:;" class="btn btn-blue dib">新增</a>
    </form></div>
{{/view}}

{{#view "detail"}}
    <div class="textc">
        <div class="form dib textl"><form>
            <div class="row">
                <div class="text">角色名称</div>
                <div class="input">
                    <input class="textbtn" type="text" placeholder="请输入名称" name="name" value="{{role.name}}"/>
                    <input class="textbtn" type="hidden" name="id" value="{{role.id}}"/>
                </div>
            </div>
            <div class="row">
                <div class="text">备注</div>
                <div class="input">
                    <input class="textbtn" type="text" placeholder="请输入备注" name="remark" value="{{role.remark}}"/>
                </div>
            </div>
            <div class="row">
                <div class="text"></div>
                <div class="input">
                    <button id="submit-save-role" class="btn btn-green" type="button" value="value">提交</button>
                </div>
            </div>
        </form></div>
    </div>
{{/view}}

view-search.js 定义 add-role事件

    exports.actions = {
        'click add-role': 'showRole'
    }

index.js 增加 items 和 编写 showRole方法

    exports.items = {
        'main': 'main',
        'search': 'search',
        'detail': 'detail'//add here
    };
    exports.store = {
        callbacks = {
            showRole: function(payload) {
              if (payload) {
                  role.set(payload);
                  me.get(role).then(function() {
                      me.app.showDialog(me.module.items.detail);
                  });
              } else {
                  role.clear();
                  me.app.showDialog(me.module.items.detail);
              }
            }
        }
    }

编写 view-detail.js front-end/scripts/app/demo/role/view-detail.js 定义保存事件

exports.bindings = {
    role: false,
};

exports.actions = {
    'click submit-save-role': 'saveRole'
};

exports.title = '编辑角色';

index.js 在 callbacks 增加 saveRole方法

    exports.store = {
        callbacks = {
            saveRole: function(payload) {
              var role = this.models.role, me = this, roles = me.models.roles;
              //id为空执行添加，非空执行更新
              if (payload.id == '') {
                  role.set(payload);
                  me.post(role).then(function() {
                      me.app.message.success('保存成功');
                      me.get(me.models.roles);
                      me.app.closeDialog();
                  });
              } else {
                  role.set(payload);
                  me.put(role).then(function() {
                      me.app.message.success('保存成功');
                      me.get(roles);
                  });
              }
            }
        }
    }

gulp

命令行在当前项目目录下，执行gulp (参考文档gulp)