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

步骤如下:

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>

请求结果:

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

时间: 2024-10-18 02:42:24

利用SPM工具运行自己创建的小组件(使用common-model向后台接口请求数据)的相关文章

ETL工具kettle的几个小组件(剪切字符串,增加常量,计算器)

接下来几天给大家介绍下几个常用的kettle组件1.剪切字符串所谓的剪切字符串,就类似于Oracle的substr函数,具体位置在某个转换的核心对象-转换中,如图使用方法为--双击打开组件,选择你要裁剪的流字段(必须),输出字段(选填),输入初始和结束位置,这样就好了:2.增加常量所谓的增加常量就是增加x个字段,而这每个字段的值都是常量(这里的x是个大于等于0的自然数),具体位置在某个转换的核心对象-转换中,如图使用方法是双击组件,按自己的需要填写参数,如图我们经常需要填写的有名称,类型,格式,

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

相信动态列的实现困扰了很多人,大数据量,多字段的加载将会非常耗时,数据又做不到真正的动态灵活.现有的方式都是通过变向的隐藏等方式来实现. 那该如何解决呢?这里分享帆软报表设计器FineReport的实现方案,结合实际工作中遇到的的相关内容. 我本地常用数据库是MYSQL,所以比较了解一点,所以实现方式也是基于mysql的.首先了解一下MySQL自带的information_schema数据库使用. 大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_s

js 创建书签小工具之理论

我们一直在寻找增加浏览体验的方法,有的方法众所周知,有的则鲜为人知.我原本认为书签小工具属于后者,非常令人讨厌的东西.令我非常懊恼的是我发现在这个问题上我完全是错误的.它并不是令人厌烦的,而是以用户为中心的,能实现很多出色的功能,而且就像人们所预期的一样,它成为了我与浏览者以及网络交互的核心部分. 这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程.是的,书签,我们将创建不只一个书签,即使是非常小的书签.很好奇吗?我们开始吧! 究竟什么是书签小工具呢? 引用前文的话: 书签小工具是一个非

利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

创建超小的Golang docker 镜像

原文: http://colobu.com/2015/10/12/create-minimal-golang-docker-images/ 本文对于创建超小的镜像非常有用 Docker是PaaS供应商dotCloud开源的一个基于LXC 的高级容器引擎,源代码托管在 GitHub 上, 基于Go语言开发并遵从Apache 2.0协议开源.正如DockerPool在免费Docker电子书Docker -- 从入门到实践中这样提到的: 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具

Linux下利用Valgrind工具进行内存泄露检测和性能分析

from http://www.linuxidc.com/Linux/2012-06/63754.htm Valgrind通常用来成分析程序性能及程序中的内存泄露错误 一 Valgrind工具集简绍 Valgrind包含下列工具: 1.memcheck:检查程序中的内存问题,如泄漏.越界.非法指针等. 2.callgrind:检测程序代码的运行时间和调用过程,以及分析程序性能. 3.cachegrind:分析CPU的cache命中率.丢失率,用于进行代码优化. 4.helgrind:用于检查多线

Android中利用icodetools工具快速定位App破解中关键点方法

icodetools工具地址:https://github.com/fourbrother/icodetools 一.前言 在前面已经介绍了icodetools工具的实现原理和具体使用规则,关于这部分的知识点还不了解的同学可以去下面两篇文章详细查看:Android中注入代码工具icodetools原理篇,Android中注入代码工具icodetools完善篇.同时这个工具已经放到github上了,感兴趣的同学可以下载尝试各种app的代码注入功能. 那么有了这两篇文章之后,现在我得实际操作了,要动

SDNLAB技术分享(四):利用ODL下发流表创建VxLAN网络

邓晓涛,当前就职于江苏省未来网络创新研究院,是CDN团队的一名研发人员,主要从事SDN相关的研发相关工作.曾就职于三星电子于先行解决方案研发组任高级工程师.思科系统于云协作应用技术部(CCATG)任工程师.-----------------------------------------------------------------------------------------------------[分享正文]今天想跟大家分享如何通过ODL控制器下发流表来创建VxLAN网络.ODL作为当前

如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目

引言: create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目. 通常我们开始做一个react web或者 app 项目的时候,都会自己利用 npm 或者 yarn 安装项目所需要的一些依赖,再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码. 现在,如果你想要搭建一个完整的 react 项目环境,已经不需要自己动手布置许许多多的东西,利用 create-react-app 工具,就能轻松帮你配置好一个 reac