翻译|《JavaScript Everywhere》Chapter3WebApplicationwithNodeandExpress(^_^)写在前面大家好，我是前端开发工程师毛小友。翻译一本英文技术书籍。为了提高大家的阅读体验，对句子的结构和内容进行了微调。如果大家发现本文有什么不妥之处，或者有什么意见和建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎交流，互相学习。(σ???)σ..:*☆哎哟！第3章使用Node和Express的Web应用程序在实现我们的API之前，我们将构建一个基本的服务器端Web应用程序作为我们API端库的后台。我们将使用Express.js框架，“用于Node.js的极简Web框架”，这意味着它没有很多功能，但具有高度可配置性。我们将使用Express.js作为API服务器的基础，但Express也可用于构建功能齐全的服务器端Web应用程序。用户界面（例如网站和移动应用程序）在需要访问数据时与网络服务器进行通信。此数据可以是任何内容，从在Web浏览器中呈现页面所需的HTML到用户搜索的结果。客户端接口使用HTTP与服务器通信。数据请求通过HTTP从客户端发送到服务器上运行的Web应用程序。然后，Web应用程序再次通过HTTP处理请求并将数据返回给客户端。在本章中，我们将构建一个小型服务器端Web应用程序，这将是我们API的基础。为此，我们将使用Express.js框架构建一个发送基本请求的简单Web应用程序。HelloWorld现在您了解了服务器端Web应用程序的基础知识，让我们开始吧。在我们的API项目的src目录中，创建一个名为index.js的文件并添加以下内容：constexpress=require('express');constapp=express();app.get('/',(req,res)=>res.send('HelloWorld'));app.listen(4000,()=>console.log('监听端口4000!'));在这种情况下，首先我们需要表达依赖关系并使用导入的express.js模块创建一个应用程序对象。然后，我们使用app对象的get方法指示我们的应用程序在用户访问根URL(/)时发送响应“HelloWorld”。最后，我们指示应用程序在端口4000上运行。这将允许我们通过URLhttp://localhost:4000在本地查看应用程序。现在要运行该应用程序，请在您的终端中输入以下命令nodesrc/index.js。执行此操作后，您应该会在终端中看到一条日志，上面写着侦听端口4000。如果是这样，您应该能够在http://localhost:4000打开浏览器窗口，查看图3-1中的结果。图3-1。我们的HelloWorld服务器代码在浏览器Nodemon中的结果现在，假设这个例子的输出没有恰当地表达我们的兴奋。我们想更改代码以在响应中添加感叹号。接下来，将res.send的值更改为HelloWorld！！现在完整的行应该是：app.get('/',(req,res)=>res.send('HelloWorld!!!'));如果您转到Web浏览器并刷新页面，您会注意到输出没有改变。这是因为我们对Web服务器所做的任何更改都需要我们重新启动它。为此，请切换回您的终端并按Ctrl+C停止服务器。现在，再次输入nodeindex.js重新启动它。现在，当您切换回浏览器并刷新页面时，您应该会看到更新后的响应。您可以想象为每次更改停止并重新启动我们的服务器是多么乏味。值得庆幸的是，我们可以使用Node包nodemon在发生更改时自动重启服务器。如果你查看这个项目的package.json文件，你可以在脚本对象中看到一个dev命令，它指示nodemon监视index.js文件："scripts":{..."dev":"nodemonsrc/index.js"...}package.jsonScriptsscripts对象中还有一些其他的辅助命令。我们将在后面的章节中探讨。现在，要从终端启动应用程序，请键入：npmrundev切换到浏览器并刷新页面，您会看到一切正常。为确认nodemon自动重启服务器，让我们再次更新res.send值，使其显示为：res.send('HelloWebServer!!!')现在，您应该能够在浏览器中刷新页面并查看无需手动重启服务器即可更新。扩展端口选项目前，我们的应用程序运行在端口4000上。这对于本地开发非常有用，但我们需要在部署应用程序时灵活地将其设置为不同的端口号。现在让我们采取措施来替换它。我们将从添加一个端口变量开始：constport=process.env.PORT||4000;此更改将允许我们在Node环境中动态设置端口，但如果未指定端口，则回退到端口4000。现在让我们调整app.listen代码以使用此更改并使用console.log输出正确的端口：app.listen(port,()=>console.log(`Serverrunningathttp://localhost:${port}`));现在，我们的最终代码应该是：constexpress=require('express');constapp=express();constport=process.env.PORT||4000;app.get('/',(req,res)=>res.send('HelloWorld!!!'));app.listen(port,()=>console.log(`服务器运行于http://localhost:${端口}`));至此，我们现在了解了启动和运行Web服务器代码的基础知识。如果一切正常，请确保控制台中没有错误，然后在http://localhost:4000重新加载Web浏览器。结论服务器端Web应用程序是API开发的基础。在本章中，我们使用Express.js框架构建了一个基本的Web应用程序。在开发基于节点的Web应用程序时，您可以从各种框架和工具中进行选择。Express.js作为项目的灵活性、社区支持和成熟度是一个不错的选择。在下一章中，我们会将我们的Web应用程序变成一个API。如果译者的语言和书籍细节有问题，请指正。如果觉得还可以，请点赞、收藏或分享，希望能帮助到更多的人。你看过了吗？你看过了吗？你看过了吗？如果可以，你能喜欢吗？让我知道有人在看。(?_?)英文书名：《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》中译：《随处可见的JavaScript:使用GraphQL、React、React Native和Electron构建跨平台应用程序》作者：AdamD.Scott译者：猫猫出版时间：2020-02-06翻译时间：2020-10-10书籍封面：目录前言第一章我们的开发环境第2章API简介第3章使用Node和Express的Web应用程序第4章我们的第一个GraphQLAPI第5章数据库第6章CRUD操作第7章用户帐户和身份验证第8章用户操作第9章详细信息第10章部署我们的API第11章用户界面和React第12章使用React构建Web客户端第13章设计应用程序样式第14章使用Apollo客户端第15章Web身份验证和状态第16章创建、读取、更新和删除操作第17章部署Web应用程序第18章使用Electron的桌面应用程序第19章将现有Web应用程序与Electron集成第20章电子部署第21章使用ReactNative创建移动应用程序第22章移动应用程序外壳第23章GraphQL和ReactNative第24章移动应用程序身份验证第25章移动应用程序后记程序发布附录A.本地运行API附录B.在本地运行Web应用程序
