利用SPM工具运行自己创建的小组件（使用common-model向后台接口请求数据）

步骤如下：

1、安装依赖：spm install -e

2、编译：spm build

（编译好的东西会放在trunk-dist里面）

3、发布：spm app -d

（会出来一个export端口，一般是：4745）

4、在浏览器中输入：http://localhost:4745/examples/index.html 即可运行

如果出错了，出bug了，修改完，重新操作2、3、4、三个步骤。

for example:

1、组件架构如下：

2、代码：package.jon 配置信息（一些依赖）：

 "dependencies": {

        "jquery": "<=1.9",

        "backbone": "~1",

        "moment": "~2",

        "observer": "~0",

        "water-model": "~1",

        "lodash": "~3",

        "data-list-panel": "~0",

        "water-setting-panel": "~0",

        "base-conditions-filter": "~1",

        "moment": "~2",

        "jquery-magic-tabs": "~0",

        "common-model": "~0",

        "nunjucks-slim": "~1",

        "jquery-jmp3Player":"~0",

        "jquery-cookie":"~1",

        "excel-export":"~0",

        "store":"~1",

        "grid-table-package":"~0",

        "layer":"~2"

    },

3、src - sxlcom.js:

//require('../css/sxlcom-theme-base.css');

var $ = require('jquery');

var backbone=require('backbone');

var _ = require('lodash');

var CommonModel = require('common-model')

module.exports = backbone.View.extend({

    initialize:function(options){

        this.options=options || {};

        this._initOptions();

    },

    _initOptions:function(){

                  //common-model实例化

                  //这是interface_common_model.json里面的接口。

                  var commonModel= new CommonModel('basic.data');

                  //发起请求

                  commonModel.fetch({

                      waterDetails:{

                           params:{

                               key: 'select_rain_nodata_list_hn'

                           }

                      }

                  },function(data){

                      console.log(data);

                  })

// 日期格式：

// [YYYY-MM-DDTHH:mm:ss,YYYY-MM-DDTHH:mm:ss]

// ['2016-12-01T08:00:00,2016-12-01T22:00:00']

             },

    //var commonModel = new CommonModel('map.layers');

    // commonModel.fetch({

    //     mapLayers: {

    //         params: {

    //             id: area_code,

    //             type: 'area'

    //         }

    //     }

    // }, function(data) {

    //     if (!_.isEmpty(data[0].data)) {

    //         that.options.tileMap.setPolyByData(data[0].data[0].data, that._polyConfig || {});

    //     }

    // });

     render:function(){

     },

     dispose:function(){

     }

});

4、example - index.html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

<script id="seajsnode" src="../sea-modules/sea.js"></script>

<script src="../sea-modules/seajs-helper.js"></script>

<!-- TODO: 其他HTML标记 -->

<script>

    seajs.use(['../dist/sxlcom-debug'],function(sxlcom){

        //TODO 示例代码

        new sxlcom();

    });

</script>

</body>

</html>

请求结果：

控制台上打印出一系列接口的数据。

巴特西

利用SPM工具运行自己创建的小组件（使用common-model向后台接口请求数据）

最新文章

热门文章