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

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,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",fields) {
          console.log(rows);
          res.jsonp(rows);
      })
});

module.exports = router;

补充：如果有查询条件，sql语句写法参考

"select * from user where username='"+username+"' and password='"+password+"'"

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!