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;
补充:如果有查询条件,sql语句写法参考
"select * from user where username='"+username+"' and password='"+password+"'"
3、OK浏览器中输入地址,查看数据。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。