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

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

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

點擊直達前文 >> 【譯】一個小時搭建一個全棧Web應(yīng)用框架(上)

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

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

這是我們的頁面：

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

每次調(diào)用 /hello 端點時，如何返回一個隨機的歐洲語言“Hello”。

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

如何將返回的信息無縫顯示給用戶，從而無需刷新頁面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
  }
}

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

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

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

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

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

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

    
      Say Hello!
    
  )
}

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

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

React 沒有提供執(zhí)行HTTP請求的內(nèi)置方式。為了能夠從服務(wù)器請求信息，我們將不得不找一個可以做這件事的庫。 一個最簡單的方法就是引入 jQuery 庫。jQuery 是一個 javascript 庫，通過在$符號后面提供縮寫函數(shù)來簡化標準的 JavaScript 功能。

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

$ npm i jquery --save-dev

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

var $ = require(‘jquery’);

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

我們將使用 HTTP 協(xié)議的 GET 請求獲取信息。GET 實質(zhì)上是HTTP請求的“只讀”模式。可以用來獲取信息，但是不能要求服務(wù)器更改它。

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

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

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

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

有一行問候語，一個按鈕，點擊按鈕可以更改問候語。 這個頁面看起來很不錯，因為我們在index.html中包含了Bootstrap樣式。

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

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

安裝下列插件：

css-loader

style-loader

extract-text-webpack-plugin

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

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

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

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

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

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

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

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

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

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

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

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

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

被CSS裝飾后的頁面

Webpack 本身并不理解圖像的概念。因此，我們還需要添加一個可以在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)頁頭部的背景，我們需要將其作為背景圖像添加到 fullstack.css 文件的頁眉部分。

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

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

在App.jsx中進行如下更改：

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

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

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

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

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

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

{this.addHeaderImg()}

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

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