App-Link知识库

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
如果您是空降到这里直接看如果开发App的话，很抱歉，还是请你先看上一节[[primary:快速上手_制作第一个app|快速上手：制作第一个APP]]我们到底做了什么。

====== 快速上手：制作第一个App ======

上一节中，我们已经通过完整的工作流程介绍了如果通过App-Link创建一个新闻APP应用的数据服务。那么，本章，我们继续来继续完成前端代码的编写。

===== 前端编写说明 =====

App-Link平台为了减少你写代码的追求，我们自动帮你生成了各种语言的前端代码开发包，你只需要在**应用管理**的接口开发栏目中下载相关的源代码开发包，并引用到你的项目中，直接调用相关方法就可以获取数据。

{{:primary:接口开发.png?direct|}}

==== 纯HTML版本新闻网页应用 ====
----
首先，我们尝试使用AJAX方式的代码开发包，来完成网页前端的交互。首先我们在点击下载AJAX方式的源代码。下载后我们会看到到文件如一下：

{{:primary:ajax接口开发包代码.png?direct|}}

然后，我们在jquery.js的文件目录下，创建一个index.html文件，代码如下：


<code>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>API调用测试</title>
    <meta charset="utf-8" />
    <script src="jquery-2.2.3.min.js"></script>

    <!--引用App-Link的服务调用文件-->
    <script src="api/api.config.js"></script>
    <script src="api/news.js"></script>
</head>
<body>
    <div>
        <ul id="newslist">
            
        </ul>
    </div>
    <hr />
    <div id="news">
        <h3 class="title"></h3>
        <div class="content"></div>
        <p>发布日期：<span class="published_date"></span></p>
        <p>查看人数：<span class="viewed_count"></span></p>
    </div>
</body>
<script>
    $(document).ready(function () {
        var news = new NewsApi();
        news.list(null, function (data) {
            data = JSON.parse(data);
            for (var i = 0; i < data.length; i++) {
                var newsitem = data[i];
                $("#newslist").append("<li newsid='" + newsitem.id + "'>" + newsitem.title + " -- " + newsitem.published_date + "</li>")
            }
            $("#newslist li").click(function () {
                var id = $(this).attr("newsid");
                news.get(id, function (data) {
                    data = JSON.parse(data);
                    $("#news .title").html(data.title);
                    $("#news .content").html(HtmlUtil.htmlDecodeByRegExp(data.content));
                    $("#news .published_date").html(data.published_date);
                    $("#news .viewed_count").html(data.viewed_count);

                    news.updateviewcount({ "id": id });

                });
            });
        });
    });
</script>
</html>

</code>

这段代码很简单，显示新闻列表，点击其中一个后显示新闻内容并显示新闻详情，同时更新阅读数。详细代码不再解释，你看到的是，这个过程中，我们一句SQL语句或者和App-Link相关的代码都没有写，就直接完成了一个新闻网站了。

{{:primary:ajax新闻网站.png?direct|}}
App-Link知识库

用户工具

站点工具

页面工具
