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

前端之家收集整理的这篇文章主要介绍了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浏览器中输入地址,查看数据。

猜你在找的Angularjs相关文章