使用 apicloud 连接自己的服务器

其他 2018-08-14 05:19:25 阅读次数: 0

apicloud 实现的是前后端的分离，前端主要通过ajax和后台进行数据操作。
文件结构：apiDemo(前端)+db.php+index.php
[index.php]

<?php 

    include 'db.php';
    $result = $_POST;

    $code = $result['code'];//1注册 0登陆
    $username = $result['username'];
    $password = $result['password'];    


    $insert_sql = "INSERT INTO `api_cloud_member`(`username`,`passwords`) values('".$username."','".$password."') ";
    $find_sql = "SELECT * FROM `api_cloud_member` WHERE `username` = '".$username."'";
    $ref = mysqli_query($conn,$find_sql);
    $row = mysqli_fetch_assoc($ref);

    $data0 = array('status'=> 0);//0注册完成  登陆成功
    $data2 = array('status'=> 2);//2已存在
    $err = array('status' => 1);//1注册失败


    if($code == 1){
        if($result != null){
            if($row){
                //用户名已存在
                echo json_encode($data2);
            }else{
                $res = mysqli_query($conn,$insert_sql);
                echo json_encode($data0);
            }       
        }
        else{           
            echo json_encode($err);
        }
    }elseif($code == 0){
        if($row){
            session_start();
            // 存储 session 数据
            $_SESSION['username'] = $username;
            echo json_encode($data0);
        }else{
            echo json_encode($err);
        }
    }

[apiDemo]
login

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>推荐</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
    html {height: 100%;}
    body {height: 100%;background: #f0f0f0; display: -webkit-box;   display: -webkit-flex;  display: flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
    #bottomdivider{ -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1; }


    /* 头部导航样式 */
    .header {position: relative;height: 50px;line-height: 50px;background-color: #3993cf;}
    .header .left  {position: absolute;left: 0;height: 50px;}
    .header .left  .logoleft {height: 20px;vertical-align: top; margin-top: 15px;}
    .header .left  .logo {height: 46px; vertical-align: top; margin-top: 2px; margin-left: -10px;}
    .header .left  .title {font-size: 20px; color: #fff; margin-left: -10px;padding-right: 10px;}


    .header .right {position: absolute; right: 0; height: 50px; color: #fff; margin-right: 10px;}
    .header .right img {height: 30px;padding: 10px;}

    input {height: 50px;font-size: 18px;color: #8E8C8C;width: 80%;outline: none;}
    input::-webkit-input-placeholder {color: #ccc;}
    .divider {height: 15px;}
    .email,.passwd {/*margin-top: 3px;*/background: #fff;}
    .passwd img, .email img {vertical-align: top;}
    .item {background-color: #fff; border-bottom: 1px solid #e0e0e0;position: relative;padding-left: 10px;margin: 0 10px;}
    /*.email, .passwd, .btn {margin:3px 10px;}*/
    .btn {margin:3px 10px;}
    .btn {background: #4DC060;height: 40px; text-align: center; line-height: 40px; font-size: 20px;margin-top: 20px;border-radius: 5px;}
    .btn span {color: #fff;}
    .email img {width: 25px; margin-top: 15px; margin-left: 10px; margin-right: 9px;}
    .passwd img {height: 25px;margin-top: 10px; margin-left: 10px;margin-right: 10px;}
    .secretword img {height: 25px;margin-top: 10px; margin-left: 10px;margin-right: 10px;}

    /* 底部样式 */
    .bottom {/*position: absolute;bottom: 0;*/width: 100%; text-align: center;/*padding-bottom: 20px;*/font-size: 12px;}
    .bottom img {height: 50px;}
    .bottom .arrow {text-align: center;margin: 10px 0;}
    .bottom .arrow img {width: 40px;height: 20px;}
    #qqpic {margin-right: 10px; margin-left: 10px;}
    .thirdinfo {color: #666; font-size: 16px;}

    .secretword input {width: 50%;}
    .secretimg {position: absolute; right: 0; top: 0; height: 56px; margin-right: 10px; border-left: 1px solid #e0e0e0;}
    .secretimg img {height: 60%;}

    .thirdcompy .left {margin-right: 20px;}
    .thirdcompy .left , .thirdcompy .right {width: 40%; display: inline-block;background: #fff;border: 1px solid #e0e0e0;border-radius: 4px;vertical-align: top;text-align: left; font-size: 18px;}
    .thirdcompy .left img , .thirdcompy .right img {width: 30px;height: 30px;float: left;margin: 5px 10px;}
    .thirdcompy span {line-height: 40px;color: #666;}

    .loginmore {margin-top: 10px;}
    .loginmore span {color: #0078ff;font-size: 14px;}
    .loginmore .forget {margin-left: 10px;}
    .loginmore .phone {margin-right: 10px;float: right;}

    .share {margin-top: 10px;margin-bottom: 20px;}
    .share .shareab {display: inline-block;margin: 0 20px;}
    .share .shareab .sharelogo {width: 50px;height: 50px;border-radius: 5px;}
    .share .shareab .sharelogo img {width: 30px;height: 30px; margin-top: 10px;}
    .share .shareab .weixin {background-color: #42BD41;}
    .share .shareab .weibo {background-color: #FA4C3D;}
    .share .shareab .renren {background-color: #4CAAF4;}

    .btnhover {background: #dcdcdc;}
    .submit-hover {background-color: rgba(77, 192, 96, 0.6) !important;}
</style>
</head>
<body>
    <div class="header" id="topbar">
        <div class="left" tapmode onclick="goback()">
            <img src="../image/abc_ic_ab_back_holo_dark.png" alt="" class="logoleft"><img src="" alt="" class="logo">
            <span class="title">&nbsp;&nbsp;&nbsp;</span>
        </div>

    </div>

    <div class="divider"></div>
    <form action="">
        <div class="item username"><input type="text" placeholder="用户名" id="username"></div>
        <div class="item passwd"><input type="password" placeholder="密码" id="passwd"></div>

        <div class="btn" onclick="fnRegister()" tapmode="submit-hover"><span type="submit">登陆</span></div>

    </form>
    <div class="loginmore">
        <span><a href="register.html">注册</a></span>
        <span class="phone">其他登陆方式</span>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">

    function goback () {
        api.closeWin({name:'login'})
    }
    apiready = function() {
        $api.fixStatusBar( $api.dom('#topbar') );        
    };
    function fnRegister(){
        var username = $api.byId('username');
        var password = $api.byId('passwd');

        var usernameValue = username.value;
        var passwordvalue = password.value;


        api.ajax({
            url: 'http://www.xxx.top/apicloud/index.php',
            method: 'post',

            data: {
                values: { 
                    code : '0',
                    username: usernameValue,
                    password: passwordvalue,
                },

            }
        }, function(ret, err) {
            if (ret.status == 0) {
                alert("登陆成功");

                }
            else {
                alert(JSON.stringify(err));
                }
        });
    }
</script>
</html>

register

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="copyright" content="www.apicloud.com" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>推荐</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
    html {height: 100%;}
    body {height: 100%;background: #f0f0f0; display: -webkit-box;   display: -webkit-flex;  display: flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
    #bottomdivider{ -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1; }


    /* 头部导航样式 */
    .header {position: relative;height: 50px;line-height: 50px;background-color: #3993cf;}
    .header .left  {position: absolute;left: 0;height: 50px;}
    .header .left  .logoleft {height: 20px;vertical-align: top; margin-top: 15px;}
    .header .left  .logo {height: 46px; vertical-align: top; margin-top: 2px; margin-left: -10px;}
    .header .left  .title {font-size: 20px; color: #fff; margin-left: -10px;padding-right: 10px;}


    .header .right {position: absolute; right: 0; height: 50px; color: #fff; margin-right: 10px;}
    .header .right img {height: 30px;padding: 10px;}

    input {height: 50px;font-size: 18px;color: #8E8C8C;width: 80%;outline: none;}
    input::-webkit-input-placeholder {color: #ccc;}
    .divider {height: 15px;}
    .email,.passwd {/*margin-top: 3px;*/background: #fff;}
    .passwd img, .email img {vertical-align: top;}
    .item {background-color: #fff; border-bottom: 1px solid #e0e0e0;position: relative;padding-left: 10px;margin: 0 10px;}
    /*.email, .passwd, .btn {margin:3px 10px;}*/
    .btn {margin:3px 10px;}
    .btn {background: #4DC060;height: 40px; text-align: center; line-height: 40px; font-size: 20px;margin-top: 20px;border-radius: 5px;}
    .btn span {color: #fff;}
    .email img {width: 25px; margin-top: 15px; margin-left: 10px; margin-right: 9px;}
    .passwd img {height: 25px;margin-top: 10px; margin-left: 10px;margin-right: 10px;}
    .secretword img {height: 25px;margin-top: 10px; margin-left: 10px;margin-right: 10px;}

    /* 底部样式 */
    .bottom {/*position: absolute;bottom: 0;*/width: 100%; text-align: center;/*padding-bottom: 20px;*/font-size: 12px;}
    .bottom img {height: 50px;}
    .bottom .arrow {text-align: center;margin: 10px 0;}
    .bottom .arrow img {width: 40px;height: 20px;}
    #qqpic {margin-right: 10px; margin-left: 10px;}
    .thirdinfo {color: #666; font-size: 16px;}

    .secretword input {width: 50%;}
    .secretimg {position: absolute; right: 0; top: 0; height: 56px; margin-right: 10px; border-left: 1px solid #e0e0e0;}
    .secretimg img {height: 60%;}

    .thirdcompy .left {margin-right: 20px;}
    .thirdcompy .left , .thirdcompy .right {width: 40%; display: inline-block;background: #fff;border: 1px solid #e0e0e0;border-radius: 4px;vertical-align: top;text-align: left; font-size: 18px;}
    .thirdcompy .left img , .thirdcompy .right img {width: 30px;height: 30px;float: left;margin: 5px 10px;}
    .thirdcompy span {line-height: 40px;color: #666;}

    .loginmore {margin-top: 10px;}
    .loginmore span {color: #0078ff;font-size: 14px;}
    .loginmore .forget {margin-left: 10px;}
    .loginmore .phone {margin-right: 10px;float: right;}

    .share {margin-top: 10px;margin-bottom: 20px;}
    .share .shareab {display: inline-block;margin: 0 20px;}
    .share .shareab .sharelogo {width: 50px;height: 50px;border-radius: 5px;}
    .share .shareab .sharelogo img {width: 30px;height: 30px; margin-top: 10px;}
    .share .shareab .weixin {background-color: #42BD41;}
    .share .shareab .weibo {background-color: #FA4C3D;}
    .share .shareab .renren {background-color: #4CAAF4;}

    .btnhover {background: #dcdcdc;}
    .submit-hover {background-color: rgba(77, 192, 96, 0.6) !important;}
</style>
</head>
<body>
    <div class="header" id="topbar">
        <div class="left" tapmode onclick="goback()">
            <img src="../image/abc_ic_ab_back_holo_dark.png" alt="" class="logoleft"><img src="" alt="" class="logo">
            <span class="title">&nbsp;&nbsp;&nbsp;返回登陆</span>
        </div>

    </div>

    <div class="divider"></div>
    <form action="">
        <div class="item username"><input type="text" placeholder="用户名" id="username"></div>
        <div class="item passwd"><input type="password" placeholder="密码" id="passwd"></div>

        <div class="item passwd2"><input type="password" placeholder="再次输入密码" id="passwd2"></div>

        <div class="btn" onclick="fnRegister()" tapmode="submit-hover"><span type="submit">确认注册</span></div>

    </form>
    <div class="loginmore">
        <span><a href="login.html">登陆</a></span>
        <span class="phone">其他登陆方式</span>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">

    function goback () {
        api.closeWin({name:'register'})
    }
    apiready = function() {
        $api.fixStatusBar( $api.dom('#topbar') );        
    };
    function fnRegister(){
        var username = $api.byId('username');
        var password = $api.byId('passwd');
        var password2 = $api.byId('passwd2');
        if(username.value == null){
            alert('用户名不能为空');
        }
        else if(password.value.length < 6){
            alert('密码长度不能小于6位')
        }
        else if(password.value != password2.value){
            alert('两次输入的密码不一致')
        }else{
            var usernameValue = username.value;
            var passwordvalue = password.value;

            api.ajax({
            url: 'http://www.xxx.top/apicloud/index.php',
            method: 'post',

            datatype: 'JSON',
            data: {
                values: {
                    code : '1',
                    username: usernameValue,
                    password: passwordvalue,
                },                
            }
            }, function(ret, err) {
                if (ret.status == 0) {
                    alert("注册成功，可以开始登陆了");

                } else if(ret.status == 2)
                    alert("该用户名已存在,请选择其他用户名或登陆");
                else {
                    alert(JSON.stringify(err));
                }
            });
        }


    }
</script>
</html>

参考：Apicloud网络通信

猜你喜欢

转载自blog.csdn.net/seven_north/article/details/79816844
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022