搭建express+reactjs前后端分离开发环境

主要参考了https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/。

1. npm install -g express-generator

2. npm install -g create-react-app

3. npm install -g nodemon 安装这个主要是在开发时不用重启express

4. express –view=pug express_reactjs 创建一个名为express_reactjs的express工程使用pug模板

5. cd express_reactjs

6. create-react-app my_app 如果没有把淘宝源设置为默认源可能会特别慢。

7. 在express工程routes目录下添加一个api.js文件用于返回json数据

var express = require('express');
var router = express.Router();

router.get('/users', function(req, res, next){
var nums = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'e'}];
res.json(nums);
});

module.exports = router;

修改express工程的app.js文件

var api = require('./routes/api');
...
app.use('/api', api);

修改bin目录下的www文件，将端口号改为3005

var port = normalizePort(process.env.PORT || '3005');

修改express工程中的package.json

"start": "nodemon ./bin/www",

在命令行中运行npm start，访问http://localhost:3005/api/users，看是否能在浏览器上看到数据。

修改reactjs工程的package.json，加入新的参数。作用是做一个代理，将向3000端口的请求转为请求3005端口。这样在将来发布时也不会有问题。

"proxy": "http://localhost:3005/",

修改reactjs工程中的app.js。加入了从服务器请求数据，当点击页面内容时，在下面显示用户名。请求数据使用了fetch方法。

class App extends Component {
constructor(){
super()
this.state = {users: []};
}
fetchUsers(){
return fetch('api/users', {accpet: "application/json"}).then(res => {return res.json().then(json => {this.setState({users: json})})})
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro" onClick={this.fetchUsers.bind(this)}>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
{this.state.users.map((user, index) => {
return (<h1 key={index}>{user.name}</h1>)
})}
</div>
);
}
}

在命令行中（my_app目录下）运行npm start能自动在浏览器上显示页面，点击“To get started, …”下面能出现用户名。

开两个命令窗口运行两次npm start过于麻烦。因此最好在一个窗口运行一次命令就可以启动两个程序。npm install –save-dev concurrently。然后修改express工程的package.json。注意由于windows系统不能用&&，所以这个修改办法只能用于linux系统。windows系统的办法见本文最顶端链接内容。

"scripts": {
"start": "nodemon ./bin/www",
"both": "concurrently \"npm start\" \"cd my_app && npm start\""
},

修改后运行npm run both。两个工程会被同时运行，而且支持热加载。

项目被我传到了github上https://github.com/Kenneth111/express_reactjs