实时体重检测

  1. 云栖社区>
  2. 博客>
  3. 正文

实时体重检测

郭璞 2016-12-11 15:19:00 浏览503
展开阅读全文

镇楼图

背景

不知不觉的距离国庆已经两个月多一点了,这样算来已经坚持跑步两个月多一点啦。体重也少了十来斤了,效果还是不错的。

另外,每天在校内围着田径场跑十圈也是很开心的一件事,借此机会还能静静地思考这一天的生活。尤其是晚上8点多的时候,田径场上空无一人,没有了白天喧嚣的热闹,反而多了一股清幽宁静。

但是,每天晚上回去记录体重,却是比较烦扰的一件事,每次都是滑到最下面,手动设置为数字输入模式,比较痛苦。刚好,阿里云学生认证已经通过,趁此赶紧搭建好了环境。然后写了个网页,来帮我记录,展示近期的体重走势。

作此文,以记之。

后端

我其实还是比较偏重于后端的,一方面艺术细胞确实不怎么样,设计出来的东西,估计也就自己看着舒服。另一方面,后端开发省心。但不管怎么样,后端都是这里的核心。

数据库设计

由于这里只是自己的这一点点需求,所以数据库也是单表。字段也比较简单啦,建表的SQL语句如下所示:

mysql> create table weight(
    -> id int(100) not null primary key auto_increment,
    -> weight int(100) not null,
    -> date datetime not null
    -> );
Query OK, 0 rows affected (0.09 sec)

PHP编写

之所以会选择PHP来作为后端开发,最关键的就是省心了。PHP不像Java那样需要一个个的Servlet来配置,也能很好的直接工作在Apache服务器上,而Python这方面确实有点欠缺啦。

总的来说,后端需要的也就俩功能,一个是处理提交的数据,另一个就是从数据库中查询数据并返回。

处理提交数据

<?php

header('Content-Type:text/html;charset=UTF-8');

$weight = $_POST['todayweight'];

if($weight) {
    if(int($weight<100) || int($weight) > 150) {
        echo '体重越线';
    }else{
        $date = date("Y-m-d h:i:s");
        $conn = mysql_connect('localhost', 'root', 'mysql') or die('database connect failed!');
        mysql_query('set names utf8');
        mysql_select_db('test');
        mysql_query("insert into tbweight(weight, date) values($weight, '$date')");
        mysql_close($conn);
        echo "insert into tbweight(weight, date) values($weight, '$date')";
    }
}else{
    echo '未设置体重';
}

直接使用GET方式无法提交数据,表单那设置已为POST请求。

处理提交数据

请求结果集

<?php

header('Content-Type:text/json;charset=UTF-8');


$conn = mysql_connect('localhost', 'root', 'mysql') or die('database connect failed!');
mysql_query('set names utf8');

mysql_select_db('test');

$resultset = mysql_query('select weight, date from tbweight order by date');

while($row=mysql_fetch_array($resultset)) {
    $res[] = $row;
}

echo json_encode($res);

?>

后端将以JSON数据串的西瓜是返回结果集。
返回的结果集

前端

至此,后端所需功能已经齐全了,下面可以安心的开发前端这块了。考虑到自己还是手机端使用较多,于是也就专门对手机端这块进行了处理。
比如:

<meta name="viewport" content="width=640, user-scalable=yes" />

echarts使用

庆幸的是百度开发了一套完整的前端图表套件,使用起来也是非常的简单。之前我自己写过一篇入门级的介绍,就是关于如何使用的,有兴趣的话可以参考下面的这篇文章。
http://blog.csdn.net/marksinoberg/article/details/52875610

这里就不再啰嗦的重复造轮子了。最简单快捷的方式就是到echarts的官网上啦,这里我需要的是折线图,那么参考开发文档:
http://echarts.baidu.com/echarts2/doc/example/line1.html#macarons

折线图参考文档

所见即所得,左边进行编辑,右边实时的就可以看到效果,调试好了直接拿来用,既方便又简单。

我这边也按照自己的需求,简单的调试了一下,代码如下:

<script>
    // echarts容器初始化
    $(document).ready(function(){
        // 设置ajax请求,用于准备数据
        var weights = [], dates = [];
        function getdata() {
            $.ajax({
                type: 'post',
                async: false,
                url: './getdata.php',
                dateType: 'json',
                success: function(result){
                    if(result) {
                        for(var i = 0; i < result.length; i++) {
                            weights.push(result[i].weight);
                            dates.push(result[i].date);
                        }
                    }
                },
                error: function(message) {
                    alert('服务器出故障了,数据未能请求成功!');
                }
            });

            return weights, dates
        }


        var mychart = echarts.init(document.getElementById('container'));

        //调用上面的ajax函数,获取数据
        getdata();

        // 设置option
        option = {
            title : {
                text: '我的体重走势图',
                subtext: '属实记录'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最近一周详情']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : dates
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale: true, 
                    precision: 2, 
                    splitNumber: 9, 
                    axisLabel : {
                        formatter: '{value} 市斤'
                    }
                }
            ],
            series : [
                {
                    name:'近期体重',
                    type:'line',
                    data: weights,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },

            ]
        };

        mychart.setOption(option);
</script>

侦测是否打卡

为了更好的监督自己,还需要一个打卡提醒,如果今天打卡了,那就使用绿色字体进行提示,否则使用红色字体提示。

实现原理就是获取到服务器那块最新的日期与当前日期作比较。这一点可以方便的通过原生的JavaScript实现。

<script>
function check(){
            // 判断今天是否已经打卡完毕
            var ymd = dates[dates.length-1].split(' ')[0];
            var month = ymd.split('-')[1];
            var day = ymd.split('-')[2];
            var localmonth = parseInt(new Date().getMonth())+1;
            var localday = new Date().getUTCDate();
            var message = '<font color="red">今日未打卡呢 ╭(╯^╰)╮</font>';

            console.log(month + '--' + day+'\n' + localmonth+'-- ' + localday);

            if(localday==day && localmonth==month) {

                message = '<font color="green">今日已打卡</font>';
            }

            document.getElementById('isSubmitted').innerHTML = message;
        }

        setInterval(check, 5000);

</script>

这样就可以给自己一个“还算不错”的用户体验吧。╭(╯^╰)╮

整合

最后还是给出完整的前端代码吧,这样更有助于把握整体。

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>体重走势图</title>
    <meta name="viewport" content="width=640, user-scalable=yes" />
    <link rel="stylesheet" type="text/css" href="css/weight.css">
</head>
<body>

    <div class="wp">
        <h1 class="logo">
            <marquee>我的体重走势图</marquee>
        </h1>
        <div id="container" style="width:680px;height:400px;"></div>
        <br>
        <div>
            <h3>今日打卡?&nbsp;&nbsp;<sub><div style="display: inline;" id="isSubmitted"></div></sub></h3>
            <form action="./submit.php" method="post">
            <div class="daka">
                <input style='width: 340px;' type="number" default='127.0' name="todayweight" placeholder="今日体重,如‘127.6’" required="true" min='120' max="140">
                <input id='submit' type="submit" value="打卡">
            </div>
            </form>
        </div>
    </div>

    <script src="js/jquery-2.2.4.min.js"></script>
    <script src="js/echarts.js"></script>
</body>
</html>
<script>
    // echarts容器初始化
    $(document).ready(function(){
        // 设置ajax请求,用于准备数据
        var weights = [], dates = [];
        function getdata() {
            $.ajax({
                type: 'post',
                async: false,
                url: './getdata.php',
                dateType: 'json',
                success: function(result){
                    if(result) {
                        for(var i = 0; i < result.length; i++) {
                            weights.push(result[i].weight);
                            dates.push(result[i].date);
                        }
                    }
                },
                error: function(message) {
                    alert('服务器出故障了,数据未能请求成功!');
                }
            });

            return weights, dates
        }


        var mychart = echarts.init(document.getElementById('container'));

        //调用上面的ajax函数,获取数据
        getdata();

        // 设置option
        option = {
            title : {
                text: '我的体重走势图',
                subtext: '属实记录'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最近一周详情']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : dates
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale: true, 
                    precision: 2, 
                    splitNumber: 9, 
                    axisLabel : {
                        formatter: '{value} 市斤'
                    }
                }
            ],
            series : [
                {
                    name:'近期体重',
                    type:'line',
                    data: weights,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },

            ]
        };

        mychart.setOption(option);

        function check(){
            // 判断今天是否已经打卡完毕
            var ymd = dates[dates.length-1].split(' ')[0];
            var month = ymd.split('-')[1];
            var day = ymd.split('-')[2];
            var localmonth = parseInt(new Date().getMonth())+1;
            var localday = new Date().getUTCDate();
            var message = '<font color="red">今日未打卡呢 ╭(╯^╰)╮</font>';

            console.log(month + '--' + day+'\n' + localmonth+'-- ' + localday);

            if(localday==day && localmonth==month) {

                message = '<font color="green">今日已打卡</font>';
            }

            document.getElementById('isSubmitted').innerHTML = message;
        }

        setInterval(check, 5000);
    });


</script>

里面有个自定义的外部weight.css,内容如下:

.daka {
    width: 600px;
    height: auto;
    position: relative;
    left: 10%;
}

.daka input {
    height: auto;
    font-size: 28px;
    border-radius: 19%;
    box-shadow: 1px 1.5px 1px;
}

#submit {
    width: 12%;
    background-color: rgba(78, 225, 94, 0.5);
}

最终效果

最终效果自认为还算能看,(^__^) 嘻嘻……

先来看看在模拟器上的效果。

模拟器上效果如下

再来看看手机端的效果。

手机端真实效果

总结

最后再来反思一下。

通篇来看,编码风格不好,尤其是注释这块,还是懒得往上面加注释。作为以后慢慢改进的方向吧。

然后就是后端整体不够优雅,代码虽少,规矩可不能少。还记得之前调用人家的接口的时候,返回的数据以及描述一应俱全,而我自己的这个呢,就连一个返回的结果码都没有,这样的接口其实是没法用的,也就自己用一用算啦。

恩,大致就是这么多了。有则改之无则加勉吧。

网友评论

登录后评论
0/500
评论
郭璞
+ 关注