在本文中，我将引导您创建一个简单的React应用程序和一个简单的Node/ExpressAPI，并将两者相互连接。我不会详细介绍本文中提到的任何技术，但如果您想了解更多信息，我会留下链接。您可以在我为本教程创建的代码存储库中找到源代码。译注：嘿，我还写了Demo的...client-react-001,api-node-001这里的目标是为您提供一个关于如何设置和连接前端客户端和后端的实用指南应用程序接口。在我们开始之前，请确保您的机器上安装了Node.js创建一个项目主目录在终端中，导航到您要保存项目的目录。现在为您的项目创建一个新目录并导航到它：mkdirmy_awesome_projectcdmy_awesome_project创建一个React应用程序非常容易。我们将使用Facebook的create-react-app来...您猜对了，只需创建一个名为client的应用程序：npxcreate-react-appclientcdclientnpmstart让我们看看这里做了什么：1.使用npm的npx创建一个React应用程序并将其称为client。2.cd（改变目录）进入客户端目录。3.启动应用程序。在浏览器中访问：http://localhost:3000/如果一切正常，您将看到React欢迎页面。恭喜！这意味着您现在有一个在本地计算机上运行的基本React应用程序。是不是很简单？要停止React应用程序，只需在终端中按Ctrl+c。创建一个Express应用程序好的，这将与前面的示例一样简单。不要忘记返回项目的根文件夹。我们将使用ExpressApplicationGenerator快速生成应用程序的框架，并将其命名为api：npxexpress-generatorapicdapinpminstallnpmstart让我们看看这里做了什么：1.使用npm的npx全局安装express-generator。2、使用express-generator快速创建一个express应用，并命名为：api。3.进入API目录。4.安装所有依赖项。5.启动应用程序。在浏览器中，转到：http://localhost:3000/如果一切顺利，您将看到Express欢迎页面。恭喜！这意味着您现在有一个在本地计算机上运行的基本Express应用程序。是不是很简单？要停止您的Express应用程序，只需在终端中按Ctrl+c。在Express中配置新路由，现在是实际操作时间。是时候打开你最喜欢的代码编辑器（我使用的是VSCode）并导航到你的项目文件夹。如果您命名了React应用程序客户端和Express应用程序api，您会发现两个主要文件夹：client和api。1.在api目录下，打开bin/www，把第15行的端口号从3000改成9000。我们同时运行两个应用，这样可以避免出现问题。修改结果如下：//my_awesome_project/api/bin/wwwvarport=normalizePort(process.env.PORT||'9000');2.在api/routes上，创建一个testAPI.js文件并粘贴以下代码：varexpress=require("express");varrouter=express.Router();router.get("/",function(req,res,next){res.send("APIisworkingproperly");});module.exports=router;3.在api/app.js文件中，在第24行插入一条新路由：app.use("/testAPI",testAPIRouter);4.并引入一个新的路由文件vartestAPIRouter=require("./routesonline9/testAPI");5.恭喜！您已经创建了一条新路线。如果启动api应用程序（在终端中，导航到api目录，键入npmstart），并在浏览器中访问http://localhost:9000/testAPI，您将看到以下消息：API正在正常工作。译注：你可以永远使用npm模块来守护你的进程，这样以后你就可以在其他机器上部署服务了。将React客户端连接到ExpressAPI1。让我们使用代码编辑器打开客户端目录并编辑app.js。2.我将使用FetchAPI从api模块中获取数据。在类声明之后和渲染方法之前粘贴以下代码：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();}3.在render方法，你会发现一个
标签。让我们用它来显示API的内容。
标记在我们的客户端页面上显示一个段落，其中包含我们从API获取的文本。没有错误！！CORS？在这一点上，我们几乎完成了。当我们启动应用程序（客户端和API）并访问http://localhost:3000/时，我们发现并没有看到预期的结果。如果你打开chrome开发者工具，你会在控制台找到原因：Failedtoloadhttp://localhost:9000/testAPI:No'Access-Control-Allow-Origin'headerispresentontherequestedresource。因此不允许访问源“http://localhost:3000”。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用CORS的情况下获取资源。这很容易解决。我们只需要将CORS添加到我们的API中以允许跨域请求。关于CORS，我们可以查看上面的链接以获取更多信息。1.导航到终端中的api目录并安装CORS依赖项。npminstall--savecors2。打开my_awesome_project/api/app.js文件并添加以下代码：varcors=require("cors");...app.use(cors());API最终的app.js文件应如下所示：干得好。我们完了！！现在使用npmstart启动应用程序客户端和API。访问http://localhost:3000/，你会看到如下内容：当然，这个项目的代码不会很多，但它是一个全栈项目的开始。您可以在此存储库中找到该项目的所有代码。接下来，我将添加教程，例如将它连接到MongoDB数据库，甚至在Docker容器中运行它。译注：这是我部署的应用的地址，我会在下一篇文章中翻译。就像我的一个朋友对我说的：BeStrongandCodeOn!!!...别忘了今天也是美好的一天😘本文已联系原文作者并授权翻译，转载请保留原文链接