步骤如下：

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向后台接口请求数据）的更多相关文章

  1. 小程序session_key失效解决方案、后台解密个人数据信息

    目录 一.登录会话密钥 session_key 有效性 二.解决登录session_key 的问题 案例:解决session_key 过期问题,发送个人信息后台解密 后端解密信息,存入数据库 mysq ...

  2. 利用Git工具将本地创建的项目上传到Github上

    前言 作为一个对前沿技术很看好的小青年,怎么能不会用Github呢?一年前我创建了Github,也知道git,但是尝试过用,但是就没弄明白,很多粉丝都问我Github的账号,想关注一波,无奈里面啥都没 ...

  3. 如何利用报表工具FineReport实现报表列的动态展示

    相信动态列的实现困扰了很多人,大数据量,多字段的加载将会非常耗时,数据又做不到真正的动态灵活.现有的方式都是通过变向的隐藏等方式来实现. 那该如何解决呢?这里分享帆软报表设计器FineReport的实 ...

  4. Android Widget小组件开发（一）——Android实现时钟Widget组件的步骤开发，这些知识也是必不可少的！

    Android Widget小组件开发(一)--Android实现时钟Widget组件的步骤开发,这些知识也是必不可少的! PS:学习自某网站(不打广告) 这个小组件相信大家都很熟悉吧,以前的墨迹天气 ...

  5. js 创建书签小工具之理论

    我们一直在寻找增加浏览体验的方法,有的方法众所周知,有的则鲜为人知.我原本认为书签小工具属于后者,非常令人讨厌的东西.令我非常懊恼的是我发现在这个问题上我完全是错误的.它并不是令人厌烦的,而是以用户为 ...

  6. 【翻译】利用Qt设计师窗体在运行时创建用户界面（Creating a user interface from a Qt Designer form at run-time）

    利用Qt设计师窗体在运行时创建用户界面 我们利用Calculator窗体例子中创建的窗体(Form)来展示当一个应用(application)已经生成后,是可以在其运行时产生与例子中相同的用户界面. ...

  7. 利用spm提供的MoAEpilot听觉数据学习预处理以及单被试glm分析与统计推断

    1.数据介绍 下载:http://www.fil.ion.ucl.ac.uk/spm/data/auditory/ SUBJECT:1 VOLUME: 64*64*64 TR:7s total acq ...

  8. MYSQL启用日志，查看日志，利用mysqlbinlog工具恢复MySQL数据库【转载】

    转自 MYSQL启用日志,查看日志,利用mysqlbinlog工具恢复MySQL数据库 - _安静 - 博客园http://www.cnblogs.com/xionghui/archive/2012/ ...

  9. 利用代码生成工具Database2Sharp设计数据编辑界面

    在Winform程序开发中,界面部分的开发工作量一般是比较大的,特别是表的字段数据比较多的情况下,数据编辑界面所需要的繁琐设计和后台逻辑处理工作量更是直线上升,而且稍不注意,可能很多处理有重复或者错误 ...

随机推荐

  1. 【转】一名大学生的PHP进阶之路

    我是一名河南某职业学院的学生,比较喜欢PHP开发 的 工作,自己也曾经自学过php,but如果没有老师教还真是难以坚持啊,在这里给大家说一下寒假在麦子的学习感受,首先说麦子每一堂课程都给了特别详细的 ...

  2. 静态变量static和extern外引用

    静态变量--加static关键字的变量,特点: (1)在全局数据区中分配内存,每次对其值得修改都会保留结果,直至程序结束. (2)若静态变量没显示初始化,那会被自动初始化为0,并且只能初始化一遍. 1 ...

  3. MFC中ClistCtrl的=NM_CUSTOMDRAW消息

    =NM_CUSTOMDRAW是你点击列表内部是的消息映射: 例如:我想在我删除一行列表的数据,但是删除后下一行数据继续保持高亮状态 void CChildView::OnDel() { int cou ...

  4. 没有为扩展名.htm注册的生成提供程序,没有为扩展名.html注册的生成提供程序

    在web.config中添加下面这段 代码如下 <buildProviders> <add extension=".html" type="System ...

  5. Ngui中Sprite，SlicedSprite，Tiled Sprite，FilledSprite的区别

    Sprite:标准Sprite控件,自适应图片大小. Sliced Sprite:一个含有9个切片的Sprite,创建固定边框的控件最佳选择,固定大小,不会随图片大小而改变,可做人物头像等. Tile ...

  6. UE4 VR GUI实现 参考(UMG AND VR)

    Note:4.13以后版本VR UI采用 WidgetComponent + WidgetInteractionComponent可轻松实现交互 Blueprint Demo: https://for ...

  7. MySQL知识树-支持的数据类型

    本篇学习笔记的主要内容: 介绍MySQL支持的各种数据类型(常用),并讲解其主要特点.   MySQL支持多种数据类型,主要包括数值类型.日期和时间类型.字符串类型. 数值类型 MySQL的数值类型包 ...

  8. vb小程序浅析

    系统 : Windows xp 程序 : BJCM10B 程序下载地址 :http://pan.baidu.com/s/1dFyXe29 要求 : 编写注册机 使用工具 : OD 可在看雪论坛中查找关 ...

  9. 01-04 Json和弹窗

    //JSON是一种数据格式//JSON比较像php里面的关联数组,它里面存的内容也是key和value成对存在的 </body><script type="text/jav ...

  10. nginx 之 grok 过滤

    简介   前面我们的nginx日志编码使用的json,logstash直接输入预定义好的 JSON 数据,这样就可以省略掉 filter/grok 配置,但是在我们的生产环境中,日志格式往往使用的是普 ...