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浏览器中输入地址,查看数据。