步骤如下：

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. 数据导出到excel

    jsp页面: 数据table: <form action="/export.jsp" method="post" id="expform&quo ...

  2. final修饰的变量是引用不能改变，还是引用的对象不能改变？？？

    对于这个问题,我们不能只记结论,要拿实例说话,参看以下代码: public class Demo { public static void main(String[] args) { final St ...

  3. 转载--提高C++性能的编程技术

    读书笔记:提高C++性能的编程技术   第1章 跟踪范例 1.1 关注点 本章引入的实际问题为:定义一个简单的Trace类,将当前函数名输出到日志文件中.Trace对象会带来一定的开销,因此在默认情况 ...

  4. 第9章 硬件抽象层：HAL

    HAL(硬件抽象层)是建立在Linux驱动之上的一套程序库.这套程序库并不属于Linux内核,而是属于Linux内核层之上的应用层.在传统的Linux系统中Linux驱动一般有两种类型的代码:访问硬件 ...

  5. Unable to load native-hadoop library for your platform

    #HADOOP VARIABLES START export JAVA_HOME=/home/yang/jdk1.7.0_80export HADOOP_HOME=/home/hadoop/hadoo ...

  6. 阿里云弹性Web托管的URL重写问题

    今天将ThinkPHP写的网站搭到阿里云的弹性Web托管服务器上,出现路由问题 诸如访问 www.xxx.com/home/index.html会发生错误如下 页面报错: No input file ...

  7. BaseDao代码,用于连接数据库实行增删改查等操作

    在学习JavaWeb时会用到此代码,用于实行增删改查操作 1 package com.bdqn.dao; import java.sql.Connection; import java.sql.Dri ...

  8. 后缀名“.dll .obj .lib”和“ .so .o .a”文件的区别含义

    (1) .dll .obj .lib使用在windows平台下.        .dll:动态链接库,作为共享函数库的可执行文件.        .obj:目标文件,相当于源代码对应的二进制文件,未经 ...

  9. 内网公告牌获取天气信息解决方案(C# WebForm)

    需求:内网公告牌能够正确显示未来三天的天气信息 本文关键字:C#/WebForm/Web定时任务/Ajax跨域 规划: 1.天定时读取百度接口获取天气信息并存储至Txt文档: 2.示牌开启时请求Web ...

  10. dreamweaver快捷键

    ---恢复内容开始--- 件菜单 新建文档 Ctrl+N 打开一个 HTML文件 Ctrl+O或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开 Ctrl+Shift+O 关闭 ...