步骤如下：

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. 关于linq to sql类线程同步问题

    例如,下面一段代码,当两个线程同时访问时会出现各种由于线程不同步而导致的问题,比如什么DataReader已打开未关闭啊,已经添加了重复的键啊等等. /// <summary> /// 当 ...

  2. entity framework 新手入门篇（3）-entity framework实现orderby，count，groupby，like，in，分页等

    前面我们已经学习了entityframework的基本的增删改查,今天,我们将在EF中实现一些更加贴近于实际功能的SQL方法. 承接上面的部分,我们有一个叫做House的数据库,其中包含house表和 ...

  3. 使用xib创建cell时 bug

    UITableView (<UITableView: 0x15799a800; frame = (0 4797; 375 733); clipsToBounds = YES; tag = 305 ...

  4. 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序

    这种错误的可能性有几种,比如: 1.没有安装数据访问组件,需要安装相应版本的数据访问组件: 2.没有安装相应版本的Office客户端,需要安装相应版本的Office客户端: 3.Microsoft.J ...

  5. 实时控制软件设计 第一次作业 Draw

    #include <iostream> #include <cstring> #include <math.h> #include <Eigen/Dense& ...

  6. 操作系统学习笔记（五）－－CPU调度

    由于第四章线程的介绍没有上传视频,故之后看书来补. 最近开始学习操作系统原理这门课程,特将学习笔记整理成技术博客的形式发表,希望能给大家的操作系统学习带来帮助.同时盼望大家能对文章评论,大家一起多多交 ...

  7. codeforces 651C（map、去重）

    题目链接:http://codeforces.com/contest/651/problem/C 思路:结果就是计算同一横坐标.纵坐标上有多少点,再减去可能重复的数量(用map,pair存一下就OK了 ...

  8. RoR简单的应用程序

    在dos环境下执行找到需要新建的项目路径 输入命令rails -v #查看版本号

  9. 使用C#程序处理PowerPoint文件中的字符串

    最近, 有同事偶然发现Microsoft  Office PowerPoint可以被看作是一个压缩包,然后通过WinRAR解压出来一组XML文件.解压出来的文件包括: 一个索引文件名称为:[Conte ...

  10. Linux mint 14输入法问题

    新安装了Linux mint 14,莫名其妙地没有了中文输入法,安装并设置IBUS为默认输入法,但怎么也没反应.点击输入法图标,上面显示“No input window”,其实这不关输入法自身程序和设 ...