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;
"select * from user where username='"+username+"' and password='"+password+"'"
3、OK浏览器中输入地址,查看数据。