在node.js中,首先,要安装express和mySQL模块:
npm i express
npm i mysql
然后就是连接数据库,并使用express返回数据到前端。
我使用的是xampp。
const express = require('express');
const app = express();
var mysql = require('mysql');
//连接数据库
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '123456',
port: '3307',
database: 'people_data'
});
connection.connect();
app.get('/server', (req, res)=>{
//设置响应头 设置允许跨域
res.setHeader('Access-Control-Allow-Origin', '*');
selectSQL= "select * from sex";
connection.query(selectSQL,function (err, result) {
if(err){
console.log('[login ERROR] - ',err.message);
return;
}
console.log("OK");
console.log(result);
res.send(result);
});
});
app.listen(80, ()=>{
console.log("服务已经启动, 80 端口监听中....");
});
重点是这一句,特别重要:
res.setHeader('Access-Control-Allow-Origin', '*');
在express中,是使用res.send()向前端发送数据的。
然后就是前端的问题了。我使用的是ajax从后端获取数据。
$.ajax({
type: "GET",
url: "http://127.0.0.1:80/server",
dataType: "json",
success: function(result){
console.log(result);
console.log("yes");
bar(result);
}
});
这里推荐使用jquery的ajax,上手简单易懂。
值得注意的是ajax的url问题,如果是json文件,直接写json文件所在的相对路径就可以了。
如果是node.js文件,且使用了express返回数据的话,就要写“http://127.0.0.1:” + 端口号 + 你所希望从哪里获取的req名字。
比如下列代码中的‘/server’
app.get('/server', (req, res)=>{
...
)};
而且从数据库提取的数据是需要进行处理,可以这样处理:
for(var i = 0 ; i < data.length; i++){
names.push(data[i].地区);
nums.push(data[i].性别比);
console.log(data[i].性别比)
}
值得注意的是:ajax提取出的数据要放在success中处理,如果直接在外面处理的话,值是空的,我暂时还未发现有什么解决方法。