步骤如下：

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. iOS开发：正则表达式

    语法/字符说明表 值表达 .      匹配除换行符外的任意字符 \w   匹配字母或者数字的字符 \W   匹配任意不是字母或数字的字符 \s    匹配任意的空白符(空格.制表符.换行符) \S ...

  2. how-to-add-global-asp-net-web-api-filters

    要实现给mvc 和api 接口全局添加日志统计,web api添加的方式有些不同 FilterConfig.cs 页面 public class FilterConfig { public stati ...

  3. 如何注册OCX控件

    32位系统: 将文件放到c:\windows\system目录 注册 运行:Regsvr32 c:\windows\system\xxx.ocx 取消注册运行:Regsvr32.exe /u c:\w ...

  4. MainWindow、QWidget和QDialog的区别和选择（转载）

    QApplication类用于管理应用程序范围内的资源,其构造函数需要main函数的argc和argv作为参数. Widget被创建时都是不可见的,widget中可容纳其他的widget. Qt中的w ...

  5. 禁用 baloo_file_extractor 加速 ubuntu 14.04 (KDE)

    在复制了一堆零散文件后,系统同然变得奇卡,看看cpu和ram都占用不高,但看到这个进程 baloo_file_extractor 时不时地冒一下泡,怀疑是它在频繁访问硬盘.禁止它自动启动的方式: $ ...

  6. linux tar 解压文件时指定文件名

      linux解压文件时指定文件夹名称   wget -O mysql-5.6.15.tar.gz  http://oss.aliyuncs.com/aliyunecs/onekey/mysql/my ...

  7. 推荐一个自动抽取pdf高亮笔记的web应用

    很多人可能像我一样,喜欢用电脑或平板阅读pdf格式的论文或电子书,阅读过程中难免会使用highlight(高亮)工具标记出重要的文字和段落.有没有办法将所有高亮的部分抽取出来,形成一篇单独的笔记呢?下 ...

  8. Java(一)

    这个学期要学习七章的东西,目前我对第一章的内容掌握的还算良好,我学会了布局管理器,菜单栏,面板等一些组件的使用,但是对于事件监听器的使用还是有所欠缺.另外对于其他六章的内容都一无所知,之前也没有浏览过 ...

  9. 折腾Ubuntu下的android studio

    ps:网速很慢,耗时一天多.先吐槽一下搭建很麻烦,毕竟现在在ubuntu上用as的人还不太多,很多步骤最好先自备梯子. 测试环境: ubuntu 14.04 LTS 64bit 安装的东西无非就是an ...

  10. 线上mongodb数据库mLab使用总结

    最近在CNode社区看到有人分享了免费的线上mongodb数据库(容量500M),今天去注册了一下,成功的将线下数据库替换掉了,现在就说一下它的使用和配置需要注意的地方: mLab是一款免费的在线mo ...