【译】使用Node/Express搭建后端，React搭建前端，并连接为一个项目

lyra李亦也
2,865 阅读6分钟

本文译自Medium 原作者：João Henrique 原文连接：

在这篇文章里，我将带领大家创建一个简单的React项目并将它连接到我们自己创建的Node/Express API中。

本文将会涉及到一些你可能不熟悉的技术细节，在此不会做过多的讲解。在提及的地方我会留下一些链接，方便感兴趣的读者点击进去阅读做进一步的了解。

本教程的项目源代码：

本文的主要目的是用实践来指导大家从零开始创建一个客户端并将它连接到服务器端。

在开始之前，请确认你的本地开发环境已经成功的安装了Node.js。

创建主项目目录

打开你的电脑终端，打开你想要保存整个项目的文件夹。然后输入接下来的两条指令来创建主项目目录。

mkdir my_awesome_project
cd my_awesome_project

创建React 应用

我们在这里使用最简介的方式。Facebook有提供一个创建react应用的脚手架 create-react-app,通过在终端输入以下指令，我们就可以创建一个名为client的react项目了。

npx create-react-app client
cd client
npm start

简单介绍以下以上指令做了什么：

  1. 使用npm的npx创建了一个react项目，并将其命名为client
  2. cd（进入）client目录
  3. npm start运行项目 接下来，在你的浏览器中输入 http://localhost:3000/。不出意外，你将看到react的欢迎页面。 恭喜你，这一步你已经学会了如何创建一个基本的React应用！

在终端输入 Ctrl+c 就可以停止运行这个项目了。

创建Express应用

这段过程同样简单直接，首先在终端中打开你的my_awesome_project文件夹。 在这里，我们将使用Express Application Generator来创建一个Express应用框架，并命名为api

npx express-generator api
cd api
npm install
npm start

这些指令依次做的事情：

  1. 使用npm的npx来安装express-generator
  2. 使用express-generator创建一个express app并将它命名为api。
  3. 进入“api”文件夹
  4. 安装所有项目依赖的安装包
  5. 运行这个应用。 再次打开你的浏览器，进入 http://localhost:3000/。你将看到express的欢迎页面。 如果你进行到这一步，恭喜你已经学会如何创建一个本地的Express应用了！ 别忘记停止应用的运行是在终端输入ctrl+c喔！

配置Express Api的路由

接下来，请使用你习惯的IDE并打开my_awesome_project文件夹。如果你按照以上两步创建了react以及express的应用的话，现在你将看到client和api两个文件夹。

  1. 在API文件夹中，打开bin/www文件，将第15行的3000（端口号）改为9000.由于我们之后将同时运行前后端两个应用，这里我们将后端的端口号修改以避免端口冲突。
  2. 仍然在API文件夹中，我们进入api/routes目录，在这里创建一个testAPI.js的文件，并输入以下代码
var express = require("express");
var router = express.Router();

router.get("/", function(req, res, next){
    res.send("API is working properly");
})

module.experts = router
  1. 接着我们找到api/app.js文件，在第24行插入一行新的代码
app.use("/testAPI", testAPIRouter);
  1. 刚刚你做的事情是告诉express去使用“testAPIRouter”这个路由，所以别忘了在顶部引入这个文件。那么我们就在第9行输入以下代码来引入我们自己的路由文件吧
var testAPIRouter = require("./routes/testAPI");
  1. 现在整的要恭喜你，已经成功配置了第一个你自己的路由！

此时你可以运行这个Express应用，（在终端中进入API目录，然后输入npm start），然后打开浏览器输入http://localhost:9000/testAPI，就可以看到Express运行成功的信息：“API is working properly”

将React项目与Express API进行连接

  1. 接下来我们将关注客户端client，在你的代码编译器中打开“my_awesome_project/client/app.js”文件。
  2. 在这个文件中，我们写一个简单的Fetch API请求从后端拿到数据。请在class声明内，render函数前加入以下代码：
constructor(props){
    super(props);
    this.state = {apiResponse: ""};
}

callAPI(){
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse:res }))
}

componentWillMount(){
    this.callAPI();
}
  1. 在接下来的render函数中，你可以把到之间的代码替换为：
<p className="App-intro">{this.state.apiResponse}</p>

输入这么多代码，让我来简单解释一下我们做了什么事情：

  1. 在6-9行，我们插入了一个构造函数，这里声明了这个页面默认的state
  2. 在11-16行，我们新增了一个名为callAPI的函数。这个函数会向API发送请求，并将返回的response存储在this.state.apiResponse
  3. 在18-20行，我们插入了一个react生命周期函数componentDidMount(),在这里我们调用了callAPI函数。它将在页面渲染后执行。
  4. 在最后，我们在render函数中写入了一个

    标签，用来显示我们从API处获得的信息。

发生跨域了？

以上我们基本已经完成了项目的搭建，以及前后端连接的配置。但是如果现在你在终端中同时运行后端以及前端项目时，打开浏览器http://localhost:3000/，你会发现它们并没有成功运行。这时如果你打开chrome developer tools，就会看到传说中跨域的报错：

Failed to load http://localhost:9000/testAPI: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

在这里我们先不介绍出错的细节，暂时先提供一个简单的解决方式。我们在API中添加一个叫做CORS的包，来从服务端允许跨域的请求

  1. 在终端中进入你的API目录，输入以下指令来安装CORS
npm install --save cors
  1. 在编译器中打开my_awesome_project/api/app.js文件。
  2. 在第六行添加
var cors = require("cors");
  1. 在第18行，输入以下指令让Express可以使用CORS
app.use(cors());

恭喜你！下面来看结果吧

  1. 同时运行你的前端client和后端API（需要打开两个终端，分别使用npm start）
  2. 打开浏览器进入http://localhost:3000/，你将看到React的图标以及欢迎信息，而下面你也将看到“API is working properly”的信息。

总结

本文并没有介绍知识点的细节，只是通过实际操作引导大家创建一个全栈的项目工程。你可以在github找到项目工程的资源。

在下一篇文章中，我将介绍如何将这个项目连接到MongoDB数据库，并且如何使用Docker来配置整个工程。

As a good Friend of mine says:

Be Strong and Code On!!!

...and don't forget to be awesome today!

avatar
文章
阅读
粉丝