node+express+mysql

使用node.js + express.js + mysql实现后端路由与数据库对接，并与前端由create react app创建的项目对接。补了点node的知识，主要也是JavaScript语言，学习成本不是很大，还能巩固一下JavaScript，一举两得。

Express

全局安装 Express

npm install -g express

创建一个名为 server.js 的文件，然后将下列代码复制进去：

const express = require('express');
const app = express();

// test
app.get('/', function (req, res) {
  res.send('Hello World!');
});

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

上面的代码启动一个服务并监听从 3000 端口进入的所有连接请求。他将对所有 (/) URL 或 路由 返回 “Hello World!” 字符串。对于其他所有路径全部返回 404 Not Found。
后端路由接口根据自己的业务需求扩展

mysql模块

npm install mysql

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'hostname',
  user     : 'username',
  password : 'passward'
});

connection.connect();

connection.query('SELECT * FROM test', function(err, rows, fields) {
  if (err) throw err;
  console.log('The solution is: ', rows[0].testname);
});

connection.end();

这里只记录express与mysql之间的联系，mysql数据库的安装与使用在这里不做记录。
如运行顺利，这里便能从接口拿到数据，输出结果。

存在问题

node server.js后当连接超过一定时间没有活动后，会自动关闭与数据库的连接。

解决

使用连接池可以帮助我们更好的管理数据库连接。数据库连接池可以限制连接的最大数量，复用已有的连接等。

var mysql =  require('mysql');                  
var pool =  mysql.createPool({
    host : 'hostname',
    user : 'username',
    password: 'password'
});

pool.getConnection(function(err, connection){
  connection.query( “SELECT * FROM test”,  function(err, rows){
      if(err) {
          throw err;
      } else {
          console.log( rows );
      }
  });
});

与前端结合

详见create react app中的Proxying API Requests in Development
create react app 监听的端口为3000 ；node后端接口我监听的端口是5000，要使前端访问端口5000的接口获取数据时，这里就存在了跨域的问题，好在文档由详细说明，下面把上面的server.js修改一下：

var express = require('express');

const port = process.env.PORT || 5000;
const app = express();

//CORS on ExpressJS
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
//import routes
var router = require('./routes/router');

// your backend routes here
app.use('/', router);
// test backend
app.get('/', function (req, res) {
      res.send('Hello World!');
});
var server = app.listen(port, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

主要添加了下面这端

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

允许其跨域请求，并在前端package.json中添加

"proxy": "http://localhost:5000"

使开发中的任何未知请求代理到您的API服务器

小结

摸爬滚打总算把React项目的整个流程都走通了，还是很有成就感的，在前端的领域，偶尔试着接触后端的东西也挺新鲜的。

转载于:https://my.oschina.net/u/2401546/blog/1113908