翻譯 | 《JavaScript Everywhere》第3章具備Node和Express的Web應用程序（^_^）

翻譯 | 《JavaScript Everywhere》第3章具備Node和Express的Web應用程序（^_^）前端

寫在最前面

你們好呀，我是毛小悠，是一位前端開發工程師。正在翻譯一本英文技術書籍。node

爲了提升你們的閱讀體驗，對語句的結構和內容略有調整。若是發現本文中有存在瑕疵的地方，或者您有任何意見或者建議，能夠在評論區留言，或者加個人微信：code_maomao，歡迎相互溝通交流學習。shell

(σﾟ∀ﾟ)σ..:*☆哎喲不錯哦數據庫

第3章具備Node和Express的Web應用程序

在實現咱們的API以前，咱們將構建一個基本的服務器端Web應用程序，以做爲咱們API後端的基礎。咱們將使用Express.js框架，「 Node.js的極簡主義Web框架」，意味着它沒有不少功能，可是可高度配置。咱們將使用Express.js做爲API服務器的基礎，可是Express也能夠用於構建功能齊全的服務器端Web應用程序。express

用戶界面（例如網站和移動應用程序）在須要訪問數據時與Web服務器進行通訊。這些數據能夠是從Web瀏覽器中呈現頁面所需的HTML到用戶搜索結果的任何數據。客戶端接口使用HTTP與服務器通訊。數據請求從客戶端經過HTTP發送到服務器上運行的Web應用程序。而後，Web應用程序再次經過HTTP處理請求並將數據返回給客戶端。npm

在本章中，咱們將構建一個小的服務器端Web應用程序，這將成爲咱們API的基礎。爲此，咱們將使用Express.js框架構建一個發送基本請求的簡單Web應用程序。json

Hello World

如今你已經瞭解了服務器端Web應用程序的基礎，讓咱們開始吧。在咱們的API項目的 src目錄中，建立一個名爲index.js的文件，並添加如下內容：後端

const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello World'));
app.listen(4000, () => console.log('Listening on port 4000!'));

在本例中，首先咱們須要express依賴項並使用導入的express .js模塊建立app對象。瀏覽器

而後，咱們使用app對象的get方法指引咱們的應用程序在用戶訪問根URL(/)時發送一個響應「Hello World」。服務器

最後，咱們指引應用程序在端口4000上運行。這將容許咱們經過URL http://localhost:4000本地查看應用程序。

如今要運行應用程序，在你的終端輸入如下命令node src/index.js。

完成此操做後，你應該會在終端中看到一個日誌，它在端口4000上讀取偵聽。

若是是這樣，你應該可以打開一個瀏覽器窗口在http://localhost:4000看到結果

圖3 - 1。

圖3-1。瀏覽器中咱們的Hello World服務器代碼的結果

Nodemon

如今，假設這個例子的輸出沒有恰當地表達咱們的興奮之情。咱們但願更改代碼以便在響應中添加感嘆號。繼續執行該操做，將res.send的值更改成Hello World!!如今完整的一行應該是:

app.get('/', (req, res) => res.send('Hello World!!!'));

若是轉到Web瀏覽器並刷新頁面，則會注意到輸出未更改。這是由於咱們對Web服務器所作的任何更改都要求咱們從新啓動它。爲此，請切換回你的終端，而後按Ctrl + C來中止服務器。

如今，經過再次鍵入來從新啓動它node index.js。

如今，當你切換回到瀏覽器並刷新頁面時，應該會看到更新後的響應。

你能夠想象，爲每次更改而中止並從新啓動咱們的服務器會變得多麼乏味。

謝天謝地，咱們能夠使用Node包nodemon在發生更改時自動從新啓動服務器。若是你看到這個項目的package.json文件，能夠在scripts對象中看到一個dev命令，該命令指示nodemon監視index.js文件：

"scripts": {  ...  "dev": "nodemon src/index.js"  ...}

package.json Scripts

scripts對象中還有一些其餘的輔助命令。咱們將在之後的章節中進行探討。

如今，要從終端啓動應用程序，請輸入：

npm run dev

切換到瀏覽器並刷新頁面，你會看到一切正常。爲了確認nodemon 自動重啓服務器，讓咱們再次更新咱們的 res.send 值，使其顯示爲：

res.send('Hello Web Server!!!')

如今，你應該可以在瀏覽器中刷新頁面並看到更新，而無需手動從新啓動服務器了。

擴展端口選項

當前，咱們的應用程序在端口4000上運行。這對於本地開發很是有用，可是在部署應用程序時，咱們須要靈活地將其設置爲其餘端口號。讓咱們採起步驟來當即對此進行更換。咱們將從添加一個port 變量開始：

const port = process.env.PORT || 4000;

此更改將使咱們可以在Node環境中動態設置端口，但在未指定端口的狀況下退回到端口4000。如今讓咱們調整

app.listen 代碼以使用此更改並使用console.log來輸出正確的端口：

app.listen(port, () =>  console.log(`Server running at http://localhost:${port}`));

如今，咱們的最終代碼應爲：

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

app.get('/', (req, res) => res.send('Hello World!!!'));

app.listen(port, () =>
  console.log(`Server running at http://localhost:${port}`)
);

這樣，咱們如今瞭解了能夠啓動並運行Web服務器代碼的基礎知識。若是測試一切正常的話，請確保控制檯中是否沒有錯誤，而後在http://localhost:4000從新加載Web瀏覽器。

結論

服務器端Web應用程序是API開發的基礎。在本章中，咱們使用Express.js框架構建了一個基本的Web應用程序。在開發基於Node的Web應用程序時，你能夠選擇多種框架和工具。Express.js的靈活性、社區支持力度和做爲項目的成熟度是一個不錯的選擇。在下一章中，咱們將把咱們的Web應用程序變成一個API。

譯者語和書籍詳情

若是有理解不到位的地方，歡迎你們糾錯。若是以爲還能夠，麻煩您點贊收藏或者分享一下，但願能夠幫到更多人。

有看的麼？有看的麼？有看的麼？

有的話，能夠點個贊麼？讓我知道有人在看。(ಥ_ಥ)

英文書名：《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》

中文譯名：《隨處可見的JavaScript:使用GraphQL、React、React Native和Electron構建跨平臺應用程序》

做者：Adam D. Scott

譯者：毛毛

出版時間：2020年2月6日。

翻譯時間：2020年10月10日

書封面：

前言
第1章咱們的開發環境
第2章 API簡介
第3章具備Node和Express的Web應用程序
第4章咱們的第一個GraphQL API
第5章數據庫
第6章 CRUD操做
第7章用戶賬戶和身份驗證
第8章用戶操做
第9章詳細信息
第10章部署咱們的API
第11章用戶界面和React
第12章使用React構建Web客戶端
第13章設置應用程序樣式
第14章使用Apollo Client
第15章 Web身份驗證和狀態
第16章建立，讀取，更新和刪除操做
第17章部署Web應用程序
第18章帶Electron的桌面應用程序
第19章將現有的Web應用程序與Electron集成
第20章 Electron部署
第21章使用React Native建立移動應用程序
第22章移動應用程序shell
第23章 GraphQL和React Native
第24章移動應用程序認證
第25章移動應用程序發佈
後記
附錄A.在本地運行API
附錄B.在本地運行Web App

本文由博客羣發一文多發等運營工具平臺 OpenWrite 發佈

翻譯 | 《JavaScript Everywhere》第3章 具備Node和Express的Web應用程序（^_^）