angular2(ng2) + express(node) + mysql跨域获取数据

2017-01-10 10:03:42来源:作者:riverflowsinyou人点击

1、 angular2 核心代码


主要是使用jsonp ?callback=JSONP_CALLBACK (核心代码)


constructor(public jsonp:Jsonp) {
// 这里是跨域请求端口为3000的express服务器数据
let wikiUrl = 'http://localhost:3000/users?callback=JSONP_CALLBACK';
this.jsonp.get(wikiUrl)
.map(res => res.json())
.subscribe((response) => {
console.log(response);
}, (error) => {
console.error(error);
});
}

注意:map, jsonp模块都需要提前加载进来


2、express部分代码主要是连接数据库,使用连接池连接数据库,然后查询数据库数据,使用res.jsonp返回数据


A. 首先在express根目录中创建一个conf目录,然后创建db.js数据库连接配置文件


// 数据库连接
var mysql=require("mysql");
var pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '123456',
// 数据库名称
database: 'basketball'
});
var connection=function(sql,callback){
pool.getConnection(function(err,conn){
if(err){
callback(err,null,null);
}else{
conn.query(sql,function(err,rows,fields){
//释放连接
conn.release();
//事件驱动回调
callback(err,rows,fields);
});
}
});
};
module.exports=connection;

B. 在相应的路由界面中查询数据,并返回给前端


var express = require('express');
var router = express.Router();
// 连接数据库
var connection = require("../conf/db.js");
/* GET users listing. */
router.get('/', function(req, res, next) {
// res.jsonp({"name": "zhangxuchao"});
connection("select * from user", function(err, rows, fields) {
console.log(rows);
res.jsonp(rows);
})
});
module.exports = router;

3、OK浏览器中输入地址,查看数据。

内容来源:https://segmentfault.com/a/1190000008055997

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台