如何使用 APICloud 的端 API 连接到自己的服务器数据库获取数据

方法/步骤

1

【首先】

1.如果想快速开发，没有自己的服务器，还是推荐使用云API的数据云。 2.不使用云API的数据云，可能是因为有web版且已经有商用数据。 3.不使用云API的数据云，需自己写数据接口，即客户端发送请求接收处理与生成json数据给客户端进行交互。 4.感谢APICloud提供新的APP开发方式。 其实也不难，使用api.ajax进行请求即可。PHPer，以下使用演示使用PHP，数据库使用Mysql，JAVA党或者.NET党请自行coding...

2

【连接做埋到数据库（文件放在服务器上），服务器端输出JSON】

<?php

/*

* 配置连接数据库信息

*/

$host='localhost'//源岩主机

$user='root'//数据库账号

$password=''//数据库密码

$database='test'//数据库名

//打开数据库连接

$db=mysqli_connect($host,$user,$password,$database)

//判断连接是否成功

if($db){

$db->query("set names utf8")//设置UTF-8编码(JSON的唯一编码)

}else{

echo 'DATABASE_CONNECTION_DIE'//数据库连接失败

exit

}

//sql查询语句

$sql="select id,name,sex,age from person"

$result=$db->query($sql)

while($row=$result->fetch_assoc()){

$person_info[]=$row//将取得的所有数据赋值给person_info数组

}

echo json_encode($person_info)//输出JSON

?>

复制代码

输出的JSON示例：

[{"id":"1","name":"\u54c8\u5c3c","sex":"\u7537","age":"22"},{"id":"2","name":"\u5c0f\u9648","sex":"\u5973","age":"21"},{"id":"3","name":"\u5c0f\u767d","sex":"\u672a\u77e5","age":"1"}]

复制代码

3

【测试用的数据库SQL语句】

--

-- Database: `test`

--

-- --------------------------------------------------------

--

-- 表的结构 `person`

--

CREATE TABLE IF NOT EXISTS `person` (

`id` int(11) NOT NULL,

`name` varchar(5) NOT NULL,

`sex` varchar(2) NOT NULL,

`age` int(3) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8

--

-- 转存表中的数据 `person`

--

INSERT INTO `person` (`id`, `name`, `sex`, `age`) VALUES

(1, '哈尼', '男', 22),

(2, '小陈', '女', 21),

(3, '小白', '未知', 1)

复制代码

搞定服务器端输出JSON后，重点来了...

4

【端API使用api.ajax读取接口数据】

点我获取数据

复制代码

5

OK，如果要POST方式，请自行参考官方文档。

思路就是纯裂蚂这样，其它的依此类推：

客户端发送请求，服务器端接收处理后返回数据。

用户登录和状态检查推荐使用token检验，不要直接post密码。

APP会默认加载或打一个Window窗口

Window窗口(1个Window可以加载1个Frame子窗口或多个FrameGroup子窗口组合)

Frame子窗口

FrameGroup子窗口组合

博主大神：网页链接

数据存储:

1、file 可以目睁辩闭录 *** 作,文件 *** 作,文件存储方式用于图片,文档的上传,下载,删除,管理。

2、db:本地SQLite数据库，用于离线数据的存储（没有网络时，直接读取数据库，减少流量）。

3、localStorage：HTML5的存储功能，用于一些变量的存储，传递。比如：用户登录状态（手机重启后，它保存了用户信息，可悉裂以不用再次登录了）。比如多个页面之间的变量传递。（手机中不能用cookle,session的方式传递变量,）。

例:

设置:$api.setStorage('Name',要设置的内容,或变量名)

获取:$api.getStorage('Name')

alert(Name)

结果:要设置的内容,或变量名

4、preference:偏好娄据存储模块，apecloud封装了setPrefs,getPrefs,removePrefs方法。如：皮肤，字体大小等个性设置。

例:

设置:api.setPrefs({

key:'user',

value:userName(要设置的内容,或变量名)

})

获取:api.getPrefs({

key: 'user'

}, function(ret, err){

if(ret.value){

alert(ret.value)

结果:userName(要设置的内容,或变量名)

}

})

删除:api.removePrefs({

key:'user'

})

5、页面与页传参：openWin有个pageParam参数，用这个传参数就可以了。新窗口中通过api.pageParam获取参数

设置参数：var pageParam = api.pageParam//比如: {"name" : "tans-con"}

获取参数：var wgtParam = api.wgtParam //比如: {"name": "API Demo"}

6、云、端一体，

api.showProgress()//显示加载时度框

api.hideProgress()//隐藏加载时度框

与自建服务器网络通信：

api.ajax方法，

//在指定窗口中执行脚本

api.execScript({

name:'root',

frameName:'frame2',//指定到frame2窗口中

script: 'mupiao()'//要执行的函数

})

//将任意一个自定义事件广播出去，该灶磨事件可在任意页面通过addEventListener监听收到。

api.sendEvent({

name: 'myEvent',

extra: {key1:'value1', key2:'value2'}

})

//html页面a：监听事件

api.addEventListener({

name: 'myEvent'

}, function(ret){

if(ret &&ret.value){

var value = ret.value

alert(value.key1 + ' , ' + value.key2)

}

})

html  么  在返回数据时候进行拼接，和 html 标签拼接在举辩一起后返回想显示的位置，这里举例一个下拉的。试着改一改弄一下，数据先拿到，在找定位。

<div class="layui-inline">

<label class="layui-form-label">商败答颂家类型<span class="require">*</span></label>

<div class="layui-input-inline">

<select name="seller_type" id="mc_add_seller_type" lay-verify="mc_add_mustselect" data-name="商家类型" lay-filter="" lay-search="">

</select>

</div>

</div>

<script>

$("select[name=seller_type]").empty()

$.ajax({

async: false,

type: "post",

url: APIHOST+"/seller/menuList",

dataType: "json",

data: {},

success: function (res) {

var opt = "<option value='' selected = \'selected\'>请选择察郑</option>"

$("select[name=seller_type]").append(opt)

for(var i=0i<res.data.lengthi++){

if(info.seller_type == res.data[i].menu_name){

var option="<option value=\""+res.data[i].menu_type+"\" selected = 'selected'"

option += ">"+res.data[i].menu_name+"</option>"//动态添加数据

$("select[name=seller_type]").append(option)

}else {

var option="<option value=\""+res.data[i].menu_type+"\""

option += ">"+res.data[i].menu_name+"</option>"//动态添加数据

$("select[name=seller_type]").append(option)

}

}

form.render('select')

}

})

</script>

---