摘要：點(diǎn)擊直達(dá)前文譯一個(gè)小時(shí)搭建一個(gè)全棧應(yīng)用框架上如果沒(méi)有，但還是要繼續(xù)學(xué)習(xí)本教程，可以到我的頁(yè)面下載代碼。從服務(wù)器返回隨機(jī)語(yǔ)言的每當(dāng)我們與服務(wù)器上的端點(diǎn)進(jìn)行通話(huà)時(shí)，為了能夠請(qǐng)求一個(gè)隨機(jī)的歐洲語(yǔ)言，必須更改文件中的功能。

翻譯：瘋狂的技術(shù)宅
原文標(biāo)題：Creating a full-stack web application with Python, NPM, Webpack and React?—?Beauty and Functionality
原文鏈接：https://codeburst.io/creating...
本文首發(fā)微信公眾號(hào)：充實(shí)的腦洞。轉(zhuǎn)載需注明出處！

如果你遵循前面的教程中的步驟，現(xiàn)在應(yīng)該有了一個(gè)可以工作的全棧Web應(yīng)用程序框架。

點(diǎn)擊直達(dá)前文 >> 【譯】一個(gè)小時(shí)搭建一個(gè)全棧Web應(yīng)用框架(上)

如果沒(méi)有，但還是要繼續(xù)學(xué)習(xí)本教程，可以到我的GitHub頁(yè)面下載代碼。

對(duì)于下一個(gè)魔術(shù)，我們將把一個(gè)顯示“Hello World！”的簡(jiǎn)單靜態(tài)頁(yè)面轉(zhuǎn)換成一個(gè)漂亮的單頁(yè)面WEB應(yīng)用。 這個(gè)頁(yè)面能夠與后端通信，并且在收到新信息時(shí)立即更新，而無(wú)需用戶(hù)刷新頁(yè)面。我們即將創(chuàng)建的頁(yè)面，在每次點(diǎn)擊按鈕時(shí)，會(huì)以隨機(jī)的歐洲語(yǔ)言返回“Hello”。

這是我們的頁(yè)面：

為了能夠?qū)崿F(xiàn)這一點(diǎn)，我們需要先弄清楚以下的問(wèn)題：

每次調(diào)用 /hello 端點(diǎn)時(shí)，如何返回一個(gè)隨機(jī)的歐洲語(yǔ)言“Hello”。

如何從服務(wù)器請(qǐng)求信息。

如何將返回的信息無(wú)縫顯示給用戶(hù)，從而無(wú)需刷新頁(yè)面。

如何在頁(yè)面上添加樣式，可以在頁(yè)面上創(chuàng)建一個(gè)大的居中的按鈕并添加文本。

最后，我們必須搞清楚應(yīng)該如何添加一個(gè)背景圖像。

每當(dāng)我們與服務(wù)器上的 /hello 端點(diǎn)進(jìn)行通話(huà)時(shí)，為了能夠請(qǐng)求一個(gè)隨機(jī)的歐洲語(yǔ)言“Hello”，必須更改 server/server.py 文件中的功能。每次調(diào)用它時(shí)，都不會(huì)返回靜態(tài)的“Hello World”，而是從“Hello”列表中選擇一個(gè)隨機(jī)語(yǔ)言的“Hello”。為了實(shí)現(xiàn)這個(gè)功能，需要進(jìn)行以下更改：

import random
def get_hello():
  greeting_list = [‘Ciao’, ‘Hei’, ‘Salut’, ‘Hola’, ‘Hallo’, ‘Hej’]
  return random.choice(greeting_list)

這個(gè)函數(shù)定義了一個(gè)歐洲語(yǔ)言的“hello”列表， 然后我們調(diào)用這個(gè)函數(shù)時(shí)，使用 random.choice()從列表中隨機(jī)選擇一個(gè)項(xiàng)目。

修改 hello() 函數(shù)，以便在每次調(diào)用它時(shí)返回get_hello()。

@app.route("/hello")
def hello():
  return get_hello()

修改 /hello 以返回我們感興趣的信息，我們現(xiàn)在需要弄清楚如何從前端得到這些信息。

把問(wèn)題分解被認(rèn)為是良好的編程習(xí)慣。 只要有可能，你應(yīng)該盡量使自己的函數(shù)只做一件事情，并且做好。這點(diǎn)同樣適用于類(lèi)。你可以考慮將每個(gè)函數(shù)或類(lèi)都作為多帶帶的組件。

React是為組件化而設(shè)計(jì)的。這意味著它是用多個(gè)較小的部分來(lái)構(gòu)建你的網(wǎng)站的。就像玩樂(lè)高一樣，可以輕松地將一個(gè)組件替換成另外一個(gè)，也可以復(fù)用組件，這也能幫助其他開(kāi)發(fā)人員了解你的代碼。我們應(yīng)該努力的編寫(xiě)可理解的代碼，因?yàn)檫@樣可以使我們的程序更容易維護(hù)和擴(kuò)展。

考慮到組件化，我們創(chuàng)建一個(gè) Hello 類(lèi)來(lái)處理我們網(wǎng)頁(yè)上的問(wèn)候語(yǔ)。該類(lèi)將從服務(wù)器上的 /hello 端點(diǎn)點(diǎn)獲取一個(gè) “Hello” ，并將其顯示給用戶(hù)。 它也應(yīng)該有一個(gè)“name”參數(shù)，這樣就可以向某個(gè)具體的人進(jìn)行問(wèn)候。

通過(guò)更改 React App 類(lèi)中的render函數(shù)，使其調(diào)用Hello類(lèi)，我們就可以很快的完成功能，而不是使用舊的代碼。傳遞名稱(chēng)“Rimini”作為參數(shù)。出于結(jié)構(gòu)化的目的，我們將把Hello類(lèi)放在一個(gè) PageHeader 中。

前面我們修改了 App 類(lèi)使其能夠調(diào)用 hello 類(lèi), 接下來(lái)需要?jiǎng)?chuàng)建 Hello 類(lèi)。在 js/ 目錄下創(chuàng)建一個(gè)名為 hello.jsx 的文件, 在此文件中定義一個(gè)名為 hello 的類(lèi)。

export default class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {greeting: "Hello " + this.props.name};
    // This binding is necessary to make `this` work in the callback    
    this.getPythonHello = this.getPythonHello.bind(this);
  }
}

在這一點(diǎn)上，你可能對(duì)構(gòu)造函數(shù)中發(fā)生了什么有很多疑問(wèn)。

在 React 中有一種叫做組件和道具的東西。 Props是創(chuàng)建時(shí)傳遞給構(gòu)造函數(shù)的不可變參數(shù)。 道具是公開(kāi)的，修改他們將違反 React 的基本使用原則。狀態(tài)是內(nèi)部的，可變的。每次更新?tīng)顟B(tài)時(shí)，都會(huì)在UI中重新展現(xiàn)。如果希望更深入地了解其運(yùn)作方式，我強(qiáng)烈建議你閱讀React文檔中有關(guān)生命周期和狀態(tài)的部分。

我們將在Hello類(lèi)中添加一個(gè)名為personaliseGreeting() 的函數(shù)。 當(dāng)我們點(diǎn)擊按鈕獲得一個(gè)新的問(wèn)候語(yǔ)時(shí)，它將會(huì)處理網(wǎng)頁(yè)上的問(wèn)候語(yǔ)的更新操作。 請(qǐng)注意，我們使用this.setState()與名為“greeting”的key。你必須使用這個(gè)語(yǔ)法才能讓 React 自動(dòng)刷新網(wǎng)頁(yè)上的“greeting”狀態(tài)。

personaliseGreeting(greeting) {
  this.setState({greeting: greeting + " " + this.props.name + "!"});
}

為了讓問(wèn)候語(yǔ)出現(xiàn)在頁(yè)面上，必須在render函數(shù)中調(diào)用“{this.state.greeting}”。我們還必須添加一個(gè)帶有回調(diào)函數(shù)的按鈕，這個(gè)函數(shù)叫做getPythonHello()，我們很快就會(huì)實(shí)現(xiàn)它。這個(gè)函數(shù)在調(diào)用使用Python編寫(xiě)的后端時(shí)，將會(huì)得到一個(gè)新的“Hello”。

render () {
  return (
    
{this.state.greeting}
    

    
      Say Hello!
    
  )
}

請(qǐng)注意，我已經(jīng)將標(biāo)題和按鈕HTML內(nèi)嵌到了我的代碼中，所以可以很輕松地控制他們?cè)陧?yè)面上的最終位置。

因?yàn)镴avaScript中的類(lèi)方法沒(méi)有做默認(rèn)綁定，所以當(dāng)我們想在函數(shù)回調(diào)中使用“this”時(shí)，就必須在構(gòu)造函數(shù)中創(chuàng)建一個(gè)綁定。否則“this”將會(huì)是 undefined 的。 這適用于在 JavaScript 中調(diào)用without() 的情況。一個(gè)典型的例子就是 render() 中的 “onClick = {this.getPythonHello}”。

React 沒(méi)有提供執(zhí)行HTTP請(qǐng)求的內(nèi)置方式。為了能夠從服務(wù)器請(qǐng)求信息，我們將不得不找一個(gè)可以做這件事的庫(kù)。 一個(gè)最簡(jiǎn)單的方法就是引入 jQuery 庫(kù)。jQuery 是一個(gè) javascript 庫(kù)，通過(guò)在$符號(hào)后面提供縮寫(xiě)函數(shù)來(lái)簡(jiǎn)化標(biāo)準(zhǔn)的 JavaScript 功能。

首先安裝jQuery依賴(lài)關(guān)系：

$ npm i jquery --save-dev

將 jQuery 依賴(lài)添加到要使用的 React 文件中，也就是 Hello.jsx 中。應(yīng)該將此依賴(lài)添加到 Hello 類(lèi)的定義前面。

var $ = require(‘jquery’);

將查詢(xún)依賴(lài)添加到React文件中意味著可以在自己的React代碼中使用標(biāo)準(zhǔn)的 jQuery 函數(shù)，只要它們以我們剛剛定義的“$”變量開(kāi)始。下面讓我們用它來(lái)從服務(wù)器獲取一個(gè)“Hello”。

我們將使用 HTTP 協(xié)議的 GET 請(qǐng)求獲取信息。GET 實(shí)質(zhì)上是HTTP請(qǐng)求的“只讀”模式?？梢杂脕?lái)獲取信息，但是不能要求服務(wù)器更改它。

在 hello.jsx 文件中的Hello類(lèi)中添加以下函數(shù):

getPythonHello() {
  $.get(window.location.href + "hello", (data) => {  
    console.log(data);
    this.personaliseGreeting(data);
  });
}

此函數(shù)通過(guò)jQuery 的 GET請(qǐng)求，連接 /hello 端點(diǎn)。然后得到從服務(wù)器返回的一個(gè)歐洲語(yǔ)言的“hello”信息，再它打印到瀏覽器的開(kāi)發(fā)控制臺(tái)，最后將它傳遞給Hello類(lèi)中的另一個(gè)函數(shù)，調(diào)用 personaliseGreeting()。

當(dāng) rebuild 前端代碼（npm run watch），并重新啟動(dòng) python 服務(wù)器后。 應(yīng)該能看到以下內(nèi)容：

有一行問(wèn)候語(yǔ)，一個(gè)按鈕，點(diǎn)擊按鈕可以更改問(wèn)候語(yǔ)。 這個(gè)頁(yè)面看起來(lái)很不錯(cuò)，因?yàn)槲覀冊(cè)趇ndex.html中包含了Bootstrap樣式。

我們終于有了一個(gè)能夠與用戶(hù)交互的產(chǎn)品。如果我們?cè)敢?，就可以到此為止了，并?duì)自己說(shuō)：我對(duì)這些成就感到滿(mǎn)意。不過(guò)就我個(gè)人而言，我更喜歡在我的Web應(yīng)用中添加一些設(shè)計(jì)元素，讓他們變得更加漂亮。所以，我們將用CSS使標(biāo)題能夠覆蓋整個(gè)屏幕，而不是在頁(yè)面的頂部。CSS是為HTML設(shè)計(jì)的一種樣式語(yǔ)言，它的作用相當(dāng)于在Word文檔中更改字體大小，樣式和位置。

為了能夠在我們的WEB應(yīng)用中使用CSS，必須安裝一些加載器和插件，并將它們添加到Webpack配置文件中。這是因?yàn)?Webpack 默認(rèn)只能處理JavaScript。

安裝下列插件：

css-loader

style-loader

extract-text-webpack-plugin

css-loader 和 style-loader 能夠使 Webpack 處理 CSS。 通過(guò)添加這些加載器，Webpack 將能夠?qū)⑽覀冃枰娜魏?CSS 綁定到 bundle.js 中。 不過(guò)在這里存在一個(gè)問(wèn)題，JavaScript 和 CSS 將不會(huì)在你的頁(yè)面上多帶帶進(jìn)行加載，這可能導(dǎo)致 UI 組件在 JavaScript 加載之前無(wú)法顯示。這點(diǎn)很差勁，因?yàn)樵谠愀獾木W(wǎng)絡(luò)上，我們辛辛苦苦設(shè)計(jì)出來(lái)的頁(yè)面可能會(huì)加載的非常緩慢。

不過(guò)可以通過(guò)添加 extract-text-webpack-plugin 來(lái)解決這個(gè)問(wèn)題。 這個(gè)插件能夠?qū)?CSS 分解成一個(gè)多帶帶的包，我們可以把它附加到 HTML 上。 這樣就可以使 CSS 再次獨(dú)立于 JavaScript 進(jìn)行加載。

在你的webpack.config.js文件的 modules.rules 部分添加下面的CSS規(guī)則：

{
  test: /.css$/,
  use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: "css-loader",
       })
},

將ExtractTextPlugin插件添加到 webpack.config.js（如果您感到困惑，請(qǐng)查看我的 webpack 文件）。注意，在創(chuàng)建時(shí)，需要將捆綁的CSS文件名傳給此插件。我們將調(diào)用文件"styles.css"。

plugins: [  new ExtractTextPlugin("styles.css") ]

最后，我們需要將 styles.css 包添加到index.html中，以確保樣式被加載。將以下行添加到你的index.html文件中的 head 部分（可以參考我的代碼）：

現(xiàn)在可以確保我們的設(shè)置可以正確處理CSS了，我們將在css文件夾中創(chuàng)建一個(gè)名為fullstack.css 的文件。我已經(jīng)添加了幾個(gè)不同的規(guī)則，以確保文本和按鈕出現(xiàn)在正確的位置，并且文本是大號(hào)的細(xì)體。

這是我的 fullstack.css 文件中的一個(gè)規(guī)則。 它使 “Hello Rimini” 文本變得越來(lái)越細(xì)：

.header-contents h1 { 
    font-size: 120px; 
    font-weight: 300;
}

在創(chuàng)建 fullstack.css 文件之后，我們需要將它添加到使用規(guī)則的 React 組件中，這樣它們才能生效。由于標(biāo)題在 App.jsx 中定義，所以需要添加以下代碼：

require("../css/fullstack.css");

fullstack.css 文件中的標(biāo)題樣式現(xiàn)在將由 Webpack 拾取，并綁定到 styles.css 文件中。當(dāng)我們刷新頁(yè)面時(shí)，應(yīng)該如下圖所示。注意，如果你用的瀏覽器不是 Chrome 的話(huà)，字體可能和圖中不一樣：

被CSS裝飾后的頁(yè)面

Webpack 本身并不理解圖像的概念。因此，我們還需要添加一個(gè)可以在Web應(yīng)用程序中使用它們的加載程序。我們需要安裝名為“file-loader”的loader。

安裝 file-loader：

$ npm i file-loader --save-dev

將file-loader規(guī)則添加到 webpack.config.js 文件中的modules.rules部分：

{
  test: /.(png|svg|jpg|gif)$/,
  use: "file-loader"
}

將要使用的圖像添加到images/ folder。將其命名為“header.jpg”。

為了能夠使圖像成為網(wǎng)頁(yè)頭部的背景，我們需要將其作為背景圖像添加到 fullstack.css 文件的頁(yè)眉部分。

.page-header {
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

接下來(lái)要做的是把圖像加載到使用它的 React 文件中。如果沒(méi)有在 React 中顯式加載圖片，Webpack 將不會(huì)棒的它，也不會(huì)把它顯示在頁(yè)面上。這種行為不是很直觀，在我第一次在自己的應(yīng)用中添加一個(gè)背景圖像時(shí)，曾經(jīng)犯過(guò)這個(gè)錯(cuò)誤。

在App.jsx中進(jìn)行如下更改：

import HeaderBackgroundImage from "../images/header.jpg";

將此函數(shù)添加到你的App類(lèi)：

addHeaderImg() {
  let headerBg = new Image();
  headerBg.src = HeaderBackgroundImage;
}

這個(gè)函數(shù)創(chuàng)建了一個(gè)新的Image對(duì)象，并將源設(shè)置為你的標(biāo)題圖片。

我們需要做的最后一件事是，確保在渲染頁(yè)面時(shí)加載圖像。 這意味著我們必須在render()函數(shù)中調(diào)用 addHeaderImg()函數(shù)。

將下列代碼添加到render()函數(shù)中：

{this.addHeaderImg()}

刷新瀏覽器窗口時(shí)，應(yīng)該看到以下內(nèi)容：

恭喜你！你已成功創(chuàng)建了一個(gè)全棧 Web 應(yīng)用程序！