背景
不知不觉的距离国庆已经两个月多一点了，这样算来已经坚持跑步两个月多一点啦。体重也少了十来斤了，效果还是不错的。
另外，每天在校内围着田径场跑十圈也是很开心的一件事，借此机会还能静静地思考这一天的生活。尤其是晚上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>今日打卡? <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);
}最终效果
最终效果自认为还算能看，(^__^) 嘻嘻……
先来看看在模拟器上的效果。
再来看看手机端的效果。
总结
最后再来反思一下。
通篇来看，编码风格不好，尤其是注释这块，还是懒得往上面加注释。作为以后慢慢改进的方向吧。
然后就是后端整体不够优雅，代码虽少，规矩可不能少。还记得之前调用人家的接口的时候，返回的数据以及描述一应俱全，而我自己的这个呢，就连一个返回的结果码都没有，这样的接口其实是没法用的，也就自己用一用算啦。
恩，大致就是这么多了。有则改之无则加勉吧。
