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

最新推荐文章于 2024-09-11 03:34:20 发布

xgbm_k

最新推荐文章于 2024-09-11 03:34:20 发布

阅读量5.1k

点赞数

分类专栏：工作日记

本文链接：https://blog.csdn.net/xgbm_k/article/details/78205362

版权

工作日记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

主要参考了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