本節(jié)的主要任務是：創(chuàng)建一個html頁面，為用戶提供一個可以控制Led燈開與關的按鈕岩饼，同時籍茧，能夠展示出實時的溫度曲線。也就是說寞冯，我們通過網(wǎng)頁與服務端進行交互吮龄，下發(fā)命令，獲取數(shù)據(jù)漓帚，實現(xiàn)前端尝抖、服務端、硬件端和數(shù)據(jù)庫整個物聯(lián)網(wǎng)系統(tǒng)中的雙向數(shù)據(jù)流牵署。
具體實現(xiàn)時奴迅，我們使用百度的Echarts進行數(shù)據(jù)可視化，展示溫度曲線取具，使用jade作為html框架暇检，建立html頁面。
關于Echarts 3
Echarts是基于Canvas的构蹬，純Javascript 的圖表庫，提供直觀庄敛，生動藻烤，可交互，可個性化定制的數(shù)據(jù)可視化圖表怖亭。創(chuàng)新的拖拽重計算兴猩、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗膘婶，賦予了用戶對數(shù)據(jù)進行挖掘蛀醉、整合的能力衅码。
關于jade
HTML頁面使用Jade模塊，它是Express官方默認的模板引擎垛玻，也是Node.js官方推薦的奶躯，它的寫法比較簡單和優(yōu)雅。
首先账嚎，我們安裝Jade模塊儡蔓，進入服務端的文件目錄中喂江，執(zhí)行下面的命令：
npm install jade --save
實現(xiàn)步驟
1.修改server.js服務端文件，添加以下內(nèi)容：
var path=require('path');
app.use(express.static(path.join(__dirname + '/', 'public')));
app.set('views',path.join(__dirname + '/','views'));
app.set('view engine','jade');
app.get('/',function(req,res){
'use strict';
res.render('index',{
title:'Home'
});
});
#####2.在server目錄中（和server.js同一目錄中）創(chuàng)建文件夾public/scripts涨岁，在scripts文件夾中放入需要引入的js庫文件，并且把自己寫的顯示曲線的js文件也放入其中蹬铺。至少應該包括：jquery-2.1.4.min.js沮尿、echarts.js、echarts-sensor.js（自己編寫的畜疾，調(diào)用數(shù)據(jù)啡捶，并顯示曲線）、led.js(用來控制led燈的開關)彤敛。
#####3.在server目錄中（和server.js同一目錄中）創(chuàng)建一個文件夾views了赌，在views文件夾中再創(chuàng)建一個文件index.jade，其內(nèi)容為：
doctype html
html
head
title=title
script(src='./scripts/jquery-2.1.4.min.js')
script(src='./scripts/echarts.js')
script(src='./scripts/echarts-sensor.js')
script(src='./scripts/led.js')
body
label 開關燈控制：
input(id="led",type="checkbox")
label(id="status_label")
div(id="container",style="min-width: 310px;height:400px;margin:0 auto")
#echarts-sensor.js的內(nèi)容
$(function(){
var myChart = echarts.init(document.getElementById("container"));
var temperatures=[];
var times=[];
var mydate="";
$.ajax({
type : "get",
async : true,
url : "/sensor",袄秩。
dataType : "json",
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
temperatures.push(result[i].temperature);
times.push(result[i].time);
}
mydate=result[result.length-1].date;
}
},
error : function(errorMsg) {
alert("圖表請求數(shù)據(jù)失敗!");
}
});
myChart.setOption({
title: {
left: 'center',//標題居中
text: '傳感器數(shù)據(jù)曲線'
},
tooltip: {},
dataZoom:[ //縮放
{
type: 'slider',//加入滑塊
start: 50,
end: 100
},
{
type: 'inside',
start: 50,
end: 100
}
],
xAxis: {
name:mydate,
nameGap:'55',
nameRotate:'-45',
data: times
},
yAxis: [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
},
splitLine : {show : true}
}
],
series: [{
type: 'line',
data: temperatures
}]
});
setInterval(function () {
$.ajax({
type : "get",
async : true,
url : "/sensor",
dataType : "json",
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
temperatures.shift();
temperatures.push(result[i].temperature);
times.shift();
times.push(result[i].time);
}
mydate=result[result.length-1].date;
myChart.setOption({
xAxis: {
name:mydate,
data: times
},
series: [{
data: temperatures
}]
});
}
},
error : function(errorMsg) {
alert("圖表請求數(shù)據(jù)失敗!");
}
});
}, 5000);
})
#led.js的內(nèi)容
$(function(){
$.ajax({
type : "GET",
async : true,
url:"/led",
success: function(status){
if(status){
$("#led").attr("checked",status[0].status);
if (status[0].status){
$("#status_label").html("<font color=#f00>(已開！)</font>");
}else{
$("#status_label").html("<font color=#0f0>(已關砍聊！)</font>");
}
}
}
});
$("#led").click(function() {
$.ajax({
type : "PUT",
async : true,
url:"/led",
data:{status:$('#led').is(':checked')},
success: function(status){
if (status[0].status){
$("#status_label").html("<font color=#f00>(已開玻蝌！)</font>");
}else{
$("#status_label").html("<font color=#0f0>(已關！)</font>");
}
}
});
});
}
其實疆前，最主要的是編寫兩個js文件聘萨，分別用來獲取并展示溫度數(shù)據(jù)以及下發(fā)控制命令，控制led的開與關胸完。
將服務器運行起來，執(zhí)行命令：
```node server.js```
然后爆惧，在瀏覽器中輸入：
```http://localhost:3000```
可以看到锨能，最終完成的頁面為：
