您的位置：首页 > 产品设计 > 产品经理

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

2016-12-02 18:47 627 查看

步骤如下：

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>

请求结果：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航