实时体重检测

最新推荐文章于 2020-08-05 08:00:00 发布

找到点头绪了

最新推荐文章于 2020-08-05 08:00:00 发布

阅读量419

点赞数

本文链接：https://blog.csdn.net/gfdfhjj/article/details/87896187

版权

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

镇楼图

背景

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

另外，每天在校内围着田径场跑十圈也是很开心的一件事，借此机会还能静静地思考这一天的生活。尤其是晚上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)
  
  1
2
3
4
5
6

PHP编写

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

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

处理提交数据

<?phpheader('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 '未设置体重';}
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

处理提交数据

请求结果集

<?phpheader('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);?>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

前端

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

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

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>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

侦测是否打卡

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

实现原理就是获取到服务器那块最新的日期与当前日期作比较。这一点可以方便的通过原生的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>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

整合

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

完整代码

<!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>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

里面有个自定义的外部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);}
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18