您的第一个小应用

我们通过一个小例子快速熟悉如何用后端云做出一个小应用。

这个小例子很简单。首先我们创建一个名叫NBA的应用,然后在云数据库创建一个球星的表,录入5条数据,然后前端通过API访问取出数据,用列表展现出来。

下面让我们开始分步骤去实现这个小应用。

  • 首先,我们访问后端云注册页面进行注册。

  • 注册完成后,进入登录页面登录。

  • 登录以后进入应用界面,点击添加创建应用按钮,创建一个名叫NBA的应用。

  • 点击NBA应用,进入该应用的控制面板。

  • 点击左侧的我的模型,点击创建新模型,创建球星表。

  • 在模型列表中点击“球星”,右侧会出来字段管理界面,点击“添加新的字段”按钮,弹出添加字段界面。

  • 第一次不熟悉的情况下,请点击底部的"打开帮助"按钮,按提示进行操作。

  • 我们创建几个主要字段:id、球星名称、球队名称、场均得分、录入时间。

  • 点击右上角的"数据管理"按钮,我们录入5条数据。

  • 点击右上角的"API调试"按钮,调试列表API是否正确返回。

  • 然后我们编写前端程序,调用列表API。
<!DOCTYPE html>
<html>
<head>
    <title>mashupcloud demo</title>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta charset="UTF-8">
    <meta name="description" content="mashupcloud Template"/>
    <meta name="keywords" content="mashupcloud"/>
    <meta name="author" content="helingyun"/>
    <!--从NBA应用控制面板的我的应用-SDK下载去下载SDK-->
    <script src="js/mashup_sdk.js"></script>
</head>
<body>
<div id="result"></div>
</body>
<script type="text/javascript">
    var appid = '';
    var token = '';
    $(document).ready(function () {
        //把要执行的方法加入队列
        ajax_queue_add(auth);
        ajax_queue_add(listStar);
        //顺序执行队列里的方法
        ajax_queue_run();
    });
 
    function auth() {
        mashup_sdk.auth({
            params: {
                //用自己应用的appid,appsecret替换
                appkey: 'dLjYnwciPdTPmrOCUYIMDWYsTbtgLmQN',
                appsecret: 'mVHHDUndtlxPdoRURKQXYbjgQnzpJIDx'
            },
            onOK: function (json) {
                appid = json[2];
                token = json[1];
                //继续执行队列
                ajax_queue_run();
            },
            onERR: function (json) {
                alert("error=" + json)
                //继续执行队列
                ajax_queue_run();
            }
        });
    }
 
    function listStar() {
        mashup_sdk.listStar({
            params: {
                appid: appid,
                token: token
            },
            onOK: function (json) {
                var starList = json[2];
                for (var key in starList) {
                    var star = starList[key];
                    $("#result").append("<ul>");
                    $("#result").append("<li>球星:" + star.name + "</li>");
                    $("#result").append("<li>球队:" + star.team + "</li>");
                    $("#result").append("<li>场均得分:" + star.score + "</li>");
                    $("#result").append("<li>录入时间:" + star.createAt + "</li>");
                    $("#result").append("</ul>");
                    $("#result").text();
                }
            },
            onERR: function (json) {
                alert("error=" + json)
            }
        });
    }
</script>
 
</html>
  • 最后,显示结果如下:

到这里,我们第一个演示小应用就完成了,快来试试您的第一小应用吧。