Highcharts+NodeJS搭建数据可视化平台示例

2020-06-17 07:05:28易采站长站整理

前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建。下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验。

一、数据的读取

由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可。

1.数据库基本配置

为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下:


var connection = mysql.createConnection({
host : '127.0.0.1',
user : 'root',
password : 'root',
database : 'Your_Database',
port : 3306
});

tips:当我们在本地开发时,可以先将线上数据库中的数据拷贝一部分到本地,如利用php myadmin,然后通过读取本地数据进行开发。

 2.数据库连接

我们可以设定,当访问到某个url后,自动建立mysql连接,代码如下:


router.get('/test', function (req, res, next) {
var username = req.cookies.username;
if(typeof username === "undefined" || username != "yidianzixun@163.com"){
res.redirect('/');
}else{
if(connection.threadId){
return;
}else{
connection.connect(function(err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log('connected as id ' + connection.threadId);
});
}
}
})

 注意这里面的验证。我们这里的项目比较简单,仅使用cookie做身份验证。当我们要建立数据库连接时,首先一定要进行身份验证,否则任何人发送请求就都可以和我们的数据库进行连接了,会造成很严重的安全隐患。

通过调用mysql中的connect方法,进行mysql数据库的连接。这里注意,数据库的连接不能并行,否则会报错。因此为了安全,我们首先必须要先判断一下当前是否已经连接了数据库,这里可以使用connection.threadId判断其是否定义,从而判断其是否已经建立连接。如果已经建立了连接,则不要再次建立连接。

 3.执行查询语句

通过调用query()方法,即可处理语句查询操作,输入的内容可以是任何正确的mysql查询语句,也可以嵌套其他变量,最后只要拼接出一个字符串即可。实例如下:


router.post('/test', function (req, res, next) {
var startDate = req.body.startDate;
var endDate = req.body.endDate;
connection.query('SELECT `date`, COUNT(DISTINCT `idea_id`) AS num,
SUM(`view`) AS view, SUM(`click`) AS click,
SUM(`cost`) AS cost FROM `idea_report_all`
where `date` BETWEEN "' + startDate + '" AND "' + endDate +