文档章节

搭建简易的物联网服务端-Nodejs_express服务(六)

狂龙治中
 狂龙治中
发布于 2017/03/22 10:16
字数 750
阅读 14
收藏 0

昨天完成了将STM32采集到的温湿度数据传到服务端,存入Mysql数据库的操作。今天做的是通过express连接数据库,提供接口,让前端页面通过fetch获取数据。其中遇到了跨域问题,在express中解决了。 代码地址:https://github.com/klren0312/stm32_wifi 2017.3.21

搭建简易的物联网服务端-STM32(一)

搭建简易的物联网服务端-Nodejs_net(二)

搭建简易的物联网服务端-Nodejs_mysql(三)

搭建简易的物联网服务端-net+mysql(四)

搭建简易的物联网服务端-第一次融合(五)

搭建简易的物联网服务端-Nodejs_express服务(六)

搭建简易的物联网服务端-ECharts数据显示(七)

Express服务端与前端获取

1.Express服务端代码

1)连接数据库(前面已经有介绍了)

var mysql = require('mysql');
//数据库配置
var conn = mysql.createConnection({
	host:'localhost',
	user:'root',
	password:'root',
	database:'nodemysql',
	port:3306
});
//连接数据库
conn.connect();

2)Express跨域解决

解决了前端的已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:3000/mysql 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。错误

//设置所有路由无限制访问,不需要跨域
app.all('*',function(req,res,next){
 	res.header("Access-Control-Allow-Origin","*");
 	res.header("Access-Control-Allow-Headers","X-Requested-With");
 	res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 	res.header("X-Powered-By",'3.2.1');
 	res.header("Content-Type","application/json;charset=utf-8");
 	next();
})

3)路由配置(提供接口)

两个接口,分别是温度和湿度数据。提供最新的五个数据

app.get('/tem',function(req,res){
	var tem = [];
	conn.query('SELECT * FROM env',function(err,rows,fields){
		var i  = rows.length;
		var i = rows.length;
		var j =i-5;
		var c= 0;
		while(j < i ){
			tem[c] = rows[j].tem;
			c++;
			j++;
		}
		res.send(JSON.stringify(tem));
	})
})
//湿度
app.get('/hum',function(req,res) {
	var hum = [];
	conn.query('SELECT * FROM env',function(err,rows,fields){
		var i = rows.length;
		var j =i-5;
		var c= 0;
		while(j<i){
			hum[c] = rows[j].hum;
			c++;
			j++;
		}
		res.send(JSON.stringify(hum));
	}) 
});

4)express服务器配置

设置端口为3000

//端口:3000
var server = app.listen(3000,function(){
	var host = server.address().address;
	var port = server.address().port;

	console.log(host + "  " + port);
})

2.前端代码

使用fetch取代ajax(fetch与XMLHttpRequest(XHR)类似,fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsonptest</title>
</head>
<body>
	<script>
		function status(response){
		    if(response.status>=200 && response.status<300){
		        return Promise.resolve(response);
		    }
		    else{
		        return Promise.reject(new Error(response.statusText));
		    }
		}
		function json(response){
		    return response.json();
		}
		//设置接口地址
		fetch("http://127.0.0.1:3000/tem")
		.then(status)
		.then(json)
		.then(function(data){
		    console.log("请求成功,JSON解析后的响应数据为:",data);
		})
		.catch(function(err){
		    console.log("Fetch错误:"+err);
		});
	</script>
</body>
</html>

3.结果截图

1)postman请求温度截图 tem

2)postman请求湿度截图 hum.png

3)前端fetch获取到的温度数据截图

QQ截图20170321205801.png

@治电小白菜 20170321

© 著作权归作者所有

共有 人打赏支持
狂龙治中
粉丝 6
博文 45
码字总数 25549
作品 0
滁州
程序员
私信 提问
为什么使用JavaScript开发物联网

嵌入式设备与JavaScript看似是来自两个不同世界的两个物种,八竿子都打不着。但是随着JavaScript 开疆扩土,从浏览器逆袭登陆到服务端之后又与物联网有了交集。 物联网的未来需要一门解释性语...

hoolev
2015/08/21
0
0
边缘计算服务 - Azure IoT Edge

Azure IoT Edge 主要将基于云的分析和定制的业务逻辑转移到边缘设备,使企业能够专注于洞察商业机会而非数据管理。 微软表示,这些设备现在将能够立即采取实时数据行动。 借助开源的 Azure ...

匿名
2018/06/29
0
0
Microsoft 将 Azure IoT 扩展到边缘设备缅甸小勐拉皇家

微软在西雅图的开发者大会 Build 2017(Build developer conference)上宣布推出 Azure IoT Edge。微软 Azure营销副总裁 Julia White 告知记者,Azure IoT Edge 将更多优势扩展到物联网边缘设...

查杰
2018/07/04
0
0
微软宣布正式开源 Azure IoT Edge 边缘计算服务

微软宣布,去年年底公开预览的 Azure IoT Edge 边缘计算服务已进入官方版,并通过 GitHub 将其开源。 Azure IoT Edge 主要将基于云的分析和定制的业务逻辑转移到边缘设备,使企业能够专注于洞...

达尔文
2018/06/29
2.3K
2
最流行的编程语言 JavaScript 能做什么?

首先很遗憾的一点是,“PHP虽然是最好的语言”,但是它不是最流行的语言。 同时对不起的还有刚刚在4月TIOBE编程语言排行榜上上榜的各个语言: 你们都很棒,但是你们都担当不了这个大任。 在开...

oschina
2016/04/28
16.6K
36

没有更多内容

加载失败,请刷新页面

加载更多

树形结构的数据库表Schema设计

程序设计过程中,我们常常用树形结构来表征某些数据的关联关系,如企业上下级部门、栏目结构、商品分类等等,通常而言,这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数...

太菜鸟
28分钟前
0
0
Pod在多可用区worker节点上的高可用部署

一、 需求分析 当前kubernetes集群中的worker节点可以支持添加多可用区中的ECS,这种部署方式的目的是可以让一个应用的多个pod(至少两个)能够分布在不同的可用区,起码不能分布在同一个可用...

迷你芊宝宝
37分钟前
0
0
使用maven命令上传jar包到仓库

mvn deploy:deploy-file -DgroupId=com.jz.tss.service -DartifactId=tss-service -Dversion=1.9.02-SNAPSHOT -Dfile=E:/Workspace/tss-service/build/oracle/TSS-Service/WEB-INF/lib/TSS-S......

GodIsCj
38分钟前
2
0
mysql 向下无限递归(不使用函数,单纯sql)

表结构和数据 CREATE TABLE table1(id int, name varchar(10), parent_id int); INSERT table1 VALUES (1, 'Home', 0), (2, 'About', 1), (3, 'Contact', 1), (4, 'Legal', 2), ......

一雨成东
39分钟前
0
0
面试官问:ZooKeeper 一致性协议 ZAB 原理

一致性协议有很多种,比如 Paxos,Raft,2PC,3PC等等,今天我们讲一种协议,ZAB 协议,该协议应该是所有一致性协议中生产环境中应用最多的了。为什么呢?因为他是为 Zookeeper 设计的分布式...

Java爬坑之路
42分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部