分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!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>今日打卡? <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
最终效果
最终效果自认为还算能看,(^__^) 嘻嘻……
先来看看在模拟器上的效果。
再来看看手机端的效果。
总结
最后再来反思一下。
通篇来看,编码风格不好,尤其是注释这块,还是懒得往上面加注释。作为以后慢慢改进的方向吧。
然后就是后端整体不够优雅,代码虽少,规矩可不能少。还记得之前调用人家的接口的时候,返回的数据以及描述一应俱全,而我自己的这个呢,就连一个返回的结果码都没有,这样的接口其实是没法用的,也就自己用一用算啦。
恩,大致就是这么多了。有则改之无则加勉吧。
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow