使用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项目的整个流程都走通了,还是很有成就感的,在前端的领域,偶尔试着接触后端的东西也挺新鲜的。