react 搭建express脚手架作为服务端

前言

本文基于 (“react”: “^16.13.1”) 版本
express脚手架基于node.js，请自行安装node.js

1.全局安装 express 的脚手架工具 express-generator

npm install express-generator -g

出现如下表示安装完成

2.初始化express脚手架

express <项目名>

3.这里使用 server 作为项目名， 创建成功如下，会在根目录下生成一个 server 文件夹

express server

4.根据提示进入项目下，并安装依赖。

cd server 进入项目
npm install 按照依赖

5.配置 express 端口

react默认的端口是 http://localhost:3000 ，而express的默认端口也是 http://localhost:3000
就会造成冲突，所以需要进行更改

打开 bin 目录下的 www 文件，将 var port = normalizePort(process.env.PORT || ‘3000’); 中的 3000 设置为更大的数值（尽量大点），这里设置为 9000

6.启动express项目， 需要一直保持开启

npm start

出现如下启用成功

7.express脚手架默认提供了两个接口，浏览器进行访问出现如下

http://localhost:9000/

http://localhost:9000/users

8.在react项目中使用，须先配置代理，解决跨域问题

代理问题这里就不过多说明了，具体配置请看另一篇文章 react axios配置代理（proxy)，解决本地开发时的跨域问题

更改代理地址

// 设置代理
proxy: {
	'/api': {
        target: 'http://localhost:9000',
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { '^/api': '/' }
      }
},

需要特别注意的是： webpack配置进行改动后，都需要重新启动项目，不然不生效

9.使用axios进行访问express提供的接口

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  componentDidMount() {
    axios.get('/api/users')
      .then(res => {
        console.log(res);
      })
  }
}

export default App;

10.请求效果

可以看见和直接在浏览器输入 http://localhost:9000/users 返回的数据一样

更多参考下篇文章：react 将express配置到react项目路径下启动，并配置为自动更新（热加载），并配置同时启动react项目以及express服务

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。