必赢亚洲手机app下载


不想外出

大学生专职骗术知多少

音讯短时存款和储蓄

功能

那是一个在线的接纳(那边是地点),用来长期存款和储蓄一些音信,以落实在不一致装备上共享这几个消息的功力。其实目标正是足以将手提式有线电话机上的部分消息相当慢的复制到电脑上,特别是在应用Linux系统的时候。上面是该使用的截图。在那之中阅后即焚是指消息被访问1遍之后就会被销毁。
366net必赢亚洲手机版 1

流程

先后首要的流水生产线正是第3在文本框中输入恐怕粘贴1些剧情,然后保留到服务器(使用的是搜狐sae),保存成功之后会回来给客户端三个号码,通过该号码就能够访问存款和储蓄的剧情。因为正是为了给手提式有线话机和处理器之间的复制粘贴提供三个介质,所以信息的可行时间近年来设为了二分钟,贰分钟之后就会去掉保存的信息。

前端实现

总体风格

先后行使的是bootstrap框架,要是您还并未有用过这一个前端框架,那么强烈推荐你试用一下,因为使用该框架能够大幅度的回落你的工作量,并且合营手提式有线电话机设备。上面是页面的要害html代码,当中css样式差不多1切为bootstrap定义的体制,那样我们就可以将越多的年月放在成效完成,而不是网页设计上。

<div class="container ">
    <div class="row ">
        <div style="padding:10px; ">
            <form class="bs-example bs-example-form" role="form">
                <div class="col-lg-12">
                    <div class="input-group input-group-lg">
                        编号
                        <input type="text" class="form-control" id="textId">

                                <button class="btn btn-default" type="button" id="msgGet">获取信息</button>

                    </div>

                    <br>

                    <div class="form-group ">
                        <textarea class="form-control custom-control change_font" style="resize:none" rows="8"
                                  placeholder="请输入信息" id="mainText"></textarea>

                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-primary button_width" id="msgClear">清空</button>
                        <button type="button" class="btn btn-primary button_width2 " id="msgSave">保存</button>
                        <div class="bootstrap-switch ">
                            <input type="checkbox" name="onlyOne" data-label-text="阅后即焚" data-on-text="是"
                                   data-off-text="否" onSwitchChange="changeOne">
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

bootstrap有自适应机制,页面内容的增加率会随浏览器窗口的大小改变而变更。可是在大家的页面中假设利用暗中同意的自适应机制,就恐怕会造成在较宽的荧屏上输入框的幅度过大,从而使的页面看起来不佳看。所以大家转移了弹指间其默许行为,当浏览器窗口宽度超越800px时,将网页内容的增长幅度固定为800px。实现格局很粗大略,加上下边包车型客车css代码即可。

@media screen and (min-width: 800px) {
    .container {
        width: 800px;
    }
}

再有壹些就是input的placeholder属性在较低的IE版本中不合作,使用上面包车型地铁js代码能够化解那几个标题

var JPlaceHolder = {
    //检测
    _check: function () {
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init: function () {
        if (!this._check()) {
            this.fix();
        }
    },
    //修复
    fix: function () {
        jQuery(':input[placeholder]').each(function (index, element) {
            var self = $(this), txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({position: 'relative', zoom: '1', border: 'none', background: 'none', padding: 'none', margin: 'none'}));
            var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
            var holder = $('').text(txt).css({position: 'absolute', left: pos.left, top: pos.top, height: h, lienHeight: h, paddingLeft: paddingleft, fontSize: '1.5em', color: '#aaa'}).appendTo(self.parent());
            self.focusin(function (e) {
                holder.hide();
            }).focusout(function (e) {
                if (!self.val()) {
                    holder.show();
                }
            });
            holder.click(function (e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function () {
    JPlaceHolder.init();
});

bootstrap开关心换插件

在采取”阅后即焚”功用的位置,大家接纳了二个开关注换的插件——bootstrap
switch,这里
是该插件的github地址,使用起来也要命简便,上面是二个简便的演示,越多的性质可以参见官方文书档案

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap switch demo</title>
    <link rel="stylesheet" href="css/bootstrap3/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap3/bootstrap-switch.min.css">

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-switch.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("[name='my-checkbox']").bootstrapSwitch();

            $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
                console.log(this); // DOM element
                console.log(event); // jQuery event
                console.log(state); // true | false
            });
        });
    </script>
</head>
<body>

<input type="checkbox" name="my-checkbox" data-on-text="是" data-off-text="否" checked>

</body>
</html>

效用图如下所示
366net必赢亚洲手机版 2

消息提醒

壹般的话使用alert就足以兑现弹窗提示的效劳,不过各样浏览器的弹窗样式都不雷同并且也欠美观,那里运用了jQuery
Toaster插件,效果如下图所示,这里366net必赢亚洲手机版,
是github地址。
366net必赢亚洲手机版 3

以此插件须求bootstrap
三.0+,不过使用起来更为有益,只供给引入2个jquery.toaster.js即可,上面是四个示范

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap toaster demo</title>
    <link rel="stylesheet" href="css/bootstrap3/bootstrap.min.css">

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.toaster.js"></script>

</head>
<body>
<div>
    <button id="open" class="btn btn-primary ">Click Me</button>
</div>

<script type="text/javascript">
    $("#open").click(function () {
       $.toaster({message: 'Your message here', title: 'Your Title', priority: 'danger'});
    })
</script>
</body>
</html>

在私下认可景况下,弹窗出现的地点是在右上角,大家能够修改一下css样式使其冒出在显示屏中间,不过要率先去jquery.toaster.js中,将下边包车型客车代码注释掉(差不多90行周围),

'css'       :
{
     'position' : 'fixed',
     'top'      : '10px',
     'right'    : '10px',
     'width'    : '300px',
     'zIndex'   : 50000
}

下边是修改后的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap toaster demo</title>
    <link rel="stylesheet" href="css/bootstrap3/bootstrap.min.css">

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.toaster.js"></script>
    <style type="text/css">
        @media screen and (min-width: 800px) {
            .center_toaster {
                right: 30%;
                width: 40%;
            }
        }

        @media screen and (min-width: 500px) and (max-width: 799px) {
            .center_toaster {
                right: 20%;
                width: 60%;
            }
        }

        @media screen and (min-width: 200px ) and (max-width: 499px) {
            .center_toaster {
                right: 5%;
                width: 90%;
            }
        }
    </style>
</head>
<body>
<div>
    <button id="open" class="btn btn-primary ">Click Me</button>
</div>

<script type="text/javascript">

    $.toaster({
        settings: {
            'toaster': {
                'class': 'center_toaster',
                'css': {
                    'position': 'fixed',
                    'top': '2px',
                    'zIndex': 50000
                }
            }
        }
    });
    $("#open").click(function () {
        $.toaster({message: 'Your222 message here', title: 'Your Title', priority: 'danger'});
    })
</script>
</body>
</html>

但是按下边修改今后在低于IE玖的浏览器吉林中华工程集团作并不出彩,大概是IE九以下对
@media
扶助不太好,所以在js的代码中加了2个论断,要是浏览器援救html5的局地特色(使用jquery判断)就动用toaster,不然使用alert。

if ($.support.leadingWhitespace) {
    $.toaster({ priority: 'warning', title: '警告', message: '编号不能为空'});
} else {
    alert("警告:编号不能为空");
}

Loading插件

当用户点完获取数据可能封存按钮时,会弹出二个正在加载的弹出层,制止出于互联网延迟等原因造成用户重复点击,下边是效益图
366net必赢亚洲手机版 4

这里
是github地址。下边是1个简易的演示:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap watingDialog demo</title>
    <link rel="stylesheet" href="css/bootstrap3/bootstrap.min.css">

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-waitingfor.js"></script>

</head>
<body>
<div>
    <button id="open" class="btn btn-primary ">Click Me</button>
</div>

<script type="text/javascript">
    $("#open").click(function () {
        waitingDialog.show();

        setTimeout(function() {
            waitingDialog.hide();
        },2000);
    })
</script>
</body>
</html>

底层固定

当页面内容的惊人小于显示屏的可观时,将footer固定在底层,当页面内容的冲天超过显示器中度时,footer会随着滚动条滚动,不会遮盖到正规的始末,上边1个消除方法,这里
是原著地址。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap fixed footer demo</title>
    <link rel="stylesheet" href="css/bootstrap3/bootstrap.min.css">

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <style type="text/css">
        * {
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -6em;
        }

        /*push和footer的高度不一样是因为加了一条hr*/
        .push {
            height: 6em;
        }

        .footer, {
            height: 4em;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <div class="container">
        <p>这里是内容</p>
    </div>
    <div class="push"></div>
</div>

<footer class="footer">
    <div class=" col-lg-12 text-center">
        <hr>
        <p>Copyright &copy; zhangjk 2015</p>
    </div>
</footer>

</body>
</html>

服务端实现

平台及语言

服务器使用的微博的sae,语言是利用的php。

php restful service

因为应用逻辑格外简单,正是1个存和取多少,所以不难的贯彻了多少个restful的接口,并未采纳专门的框架(首若是对php不熟悉)。接口的兑现参考自__那篇文章__,上边是该小说给出的代码:

<?php
/*
    API Demo

    This script provides a RESTful API interface for a web application

    Input:

        $_GET['format'] = [ json | html | xml ]
        $_GET['method'] = []

    Output: A formatted HTTP response

    Author: Mark Roland

    History:
        11/13/2012 - Created

*/

// --- Step 1: Initialize variables and functions

/**
 * Deliver HTTP Response
 * @param string $format The desired HTTP response content type: [json, html, xml]
 * @param string $api_response The desired HTTP response data
 * @return void
 **/
function deliver_response($format, $api_response){

    // Define HTTP responses
    $http_response_code = array(
        200 => 'OK',
        400 => 'Bad Request',
        401 => 'Unauthorized',
        403 => 'Forbidden',
        404 => 'Not Found'
    );

    // Set HTTP Response
    header('HTTP/1.1 '.$api_response['status'].' '.$http_response_code[ $api_response['status'] ]);

    // Process different content types
    if( strcasecmp($format,'json') == 0 ){

        // Set HTTP Response Content Type
        header('Content-Type: application/json; charset=utf-8');

        // Format data into a JSON response
        $json_response = json_encode($api_response);

        // Deliver formatted data
        echo $json_response;

    }elseif( strcasecmp($format,'xml') == 0 ){

        // Set HTTP Response Content Type
        header('Content-Type: application/xml; charset=utf-8');

        // Format data into an XML response (This is only good at handling string data, not arrays)
        $xml_response = '<?xml version="1.0" encoding="UTF-8"?>'."\n".
            '<response>'."\n".
            "\t".'<code>'.$api_response['code'].'</code>'."\n".
            "\t".'<data>'.$api_response['data'].'</data>'."\n".
            '</response>';

        // Deliver formatted data
        echo $xml_response;

    }else{

        // Set HTTP Response Content Type (This is only good at handling string data, not arrays)
        header('Content-Type: text/html; charset=utf-8');

        // Deliver formatted data
        echo $api_response['data'];

    }

    // End script process
    exit;

}

// Define whether an HTTPS connection is required
$HTTPS_required = FALSE;

// Define whether user authentication is required
$authentication_required = FALSE;

// Define API response codes and their related HTTP response
$api_response_code = array(
    0 => array('HTTP Response' => 400, 'Message' => 'Unknown Error'),
    1 => array('HTTP Response' => 200, 'Message' => 'Success'),
    2 => array('HTTP Response' => 403, 'Message' => 'HTTPS Required'),
    3 => array('HTTP Response' => 401, 'Message' => 'Authentication Required'),
    4 => array('HTTP Response' => 401, 'Message' => 'Authentication Failed'),
    5 => array('HTTP Response' => 404, 'Message' => 'Invalid Request'),
    6 => array('HTTP Response' => 400, 'Message' => 'Invalid Response Format')
);

// Set default HTTP response of 'ok'
$response['code'] = 0;
$response['status'] = 404;
$response['data'] = NULL;

// --- Step 2: Authorization

// Optionally require connections to be made via HTTPS
if( $HTTPS_required && $_SERVER['HTTPS'] != 'on' ){
    $response['code'] = 2;
    $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
    $response['data'] = $api_response_code[ $response['code'] ]['Message'];

    // Return Response to browser. This will exit the script.
    deliver_response($_GET['format'], $response);
}

// Optionally require user authentication
if( $authentication_required ){

    if( empty($_POST['username']) || empty($_POST['password']) ){
        $response['code'] = 3;
        $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
        $response['data'] = $api_response_code[ $response['code'] ]['Message'];

        // Return Response to browser
        deliver_response($_GET['format'], $response);

    }

    // Return an error response if user fails authentication. This is a very simplistic example
    // that should be modified for security in a production environment
    elseif( $_POST['username'] != 'foo' && $_POST['password'] != 'bar' ){
        $response['code'] = 4;
        $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
        $response['data'] = $api_response_code[ $response['code'] ]['Message'];

        // Return Response to browser
        deliver_response($_GET['format'], $response);

    }

}

// --- Step 3: Process Request

// Method A: Say Hello to the API
if( strcasecmp($_GET['method'],'hello') == 0){
    $response['code'] = 1;
    $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
    $response['data'] = 'Hello World';
}

// --- Step 4: Deliver Response

// Return Response to browser
deliver_response($_GET['format'], $response);

?>

对此apache服务器,供给修改一下.htaccess文件,该成下边的样式

# Turn on the rewrite engine
Options +FollowSymlinks
RewriteEngine on

# Request routing
RewriteRule ^([a-zA-Z_-]*)\.(html|json|xml)?$   index.php?method=$1&format=$2 [nc,qsa]

里头RewriteRule部分是指将[a-zA-Z_-]*相当到的字符串赋值到 $1
的位置,将(html|json|xml)?合营的字符串赋值到 $2 的位置,访问
hello.json 就约等于访问 index.php?method=hello&format=json
在sae中,使用的服务器也是apache,可是它不可能更改.htaccess文件,而是要求修改config.yaml文件,假使使用git格局管理代码,暗中认可是不会将该公文下载到本地的,所以推举使用svn方式管理代码,下边是有血有肉安排

name: appname
version: 1

handle:
  -rewrite: if(!is_dir() && !is_file() && path ~ "^([a-zA-Z_-]*).(html|json|xml)?$") goto "index.php?method=$1&format=$2"

音讯存储–memcache

此间存款和储蓄未有接纳数据库,而是接纳的memcache,主固然新闻只是短时间存储,并且数据量不会太大。官方对memcache的运用表明的并不是老大详细,那里关键参考了
那篇文章
,下边是有血有肉的代码:

<?php
    //连接
    $mem = memcache_init();

    //保存数据
    $mem->set('key1', 'This is first value', 0, 60);
    $val = $mem->get('key1');
    echo "Get key1 value: " . $val . "<br />";

    //替换数据
    $mem->replace('key1', 'This is replace value', 0, 60);
    $val = $mem->get('key1');
    echo "Get key1 value: " . $val . "<br />";

    //保存数组
    $arr = array('aaa', 'bbb', 'ccc', 'ddd');
    $mem->set('key2', $arr, 0, 60);
    $val2 = $mem->get('key2');
    echo "Get key2 value: ";
    print_r($val2);
    echo "<br />";

    //删除数据
    $mem->delete('key1');
    $val = $mem->get('key1');
    echo "Get key1 value: " . $val . "<br />";

    //清除所有数据
    $mem->flush();
    $val2 = $mem->get('key2');
    echo "Get key2 value: ";
    print_r($val2);
    echo "<br />";

    //关闭连接
    $mem->close();

其中$mem->set的第多个参数正是数据的有效期,单位是秒。

ajax跨域访问

为了使服务端允许客户端的ajax跨域请求,要求在php代码中添加下边包车型地铁代码。

header('Access-Control-Allow-Origin:*');

前者采取jquery 的 $.ajax
发送ajax请求,在IE10及以上的本子中,工作平常化,不过IE玖及以下的本子不可能正确访问,找了半天也尚未找到好的消除方法。索性就在sae上放了二个平等的运用首页,假使使用IE玖及以下的浏览器,能够访问非凡页面。

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图