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

riverflowsinyou

riverflowsinyou

发表于 2017-01-09 12:39:15
内容来源: 网络

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

相关帖子
用户评论
开源开发学习小组列表