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服務

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。