国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【譯】一個小時搭建一個全棧Web應用框架(下)——美化與功能

Cheng_Gang / 777人閱讀

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

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

如果你遵循前面的教程中的步驟,現在應該有了一個可以工作的全棧Web應用程序框架。

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

如果沒有,但還是要繼續學習本教程,可以到我的GitHub頁面下載代碼。

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

這是我們的頁面:

為了能夠實現這一點,我們需要先弄清楚以下的問題:

每次調用 /hello 端點時,如何返回一個隨機的歐洲語言“Hello”。

如何從服務器請求信息。

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

如何在頁面上添加樣式,可以在頁面上創建一個大的居中的按鈕并添加文本。

最后,我們必須搞清楚應該如何添加一個背景圖像。

從服務器返回隨機語言的“Hello”

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

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

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

修改 hello() 函數,以便在每次調用它時返回get_hello()

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

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

組件化的重要性 - 在 React 中創建一個Hello類

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

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

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

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

創建Hello類

前面我們修改了 App 類使其能夠調用 hello 類, 接下來需要創建 Hello 類。在 js/ 目錄下創建一個名為 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);
  }
}
組件與道具

在這一點上,你可能對構造函數中發生了什么有很多疑問。

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

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

personaliseGreeting(greeting) {
  this.setState({greeting: greeting + " " + this.props.name + "!"});
}
渲染問候語

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

render () {
  return (
    

{this.state.greeting}


) }

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

綁定“this”

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

從服務器請求信息

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

首先安裝jQuery依賴關系:

$ npm i jquery --save-dev

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

var $ = require(‘jquery’);

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

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

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

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

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

當 rebuild 前端代碼(npm run watch),并重新啟動 python 服務器后。 應該能看到以下內容:

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

使用CSS樣式美化頁面

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

使 Webpack 能夠處理 CSS

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

安裝下列插件:

css-loader

style-loader

extract-text-webpack-plugin

css-loader 和 style-loader 能夠使 Webpack 處理 CSS。 通過添加這些加載器,Webpack 將能夠將我們需要的任何 CSS 綁定到 bundle.js 中。 不過在這里存在一個問題,JavaScript 和 CSS 將不會在你的頁面上多帶帶進行加載,這可能導致 UI 組件在 JavaScript 加載之前無法顯示。這點很差勁,因為在糟糕的網絡上,我們辛辛苦苦設計出來的頁面可能會加載的非常緩慢。

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

在你的webpack.config.js文件的 modules.rules 部分添加下面的CSS規則:

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

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

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

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

添加CSS規則

現在可以確保我們的設置可以正確處理CSS了,我們將在css文件夾中創建一個名為fullstack.css 的文件。我已經添加了幾個不同的規則,以確保文本和按鈕出現在正確的位置,并且文本是大號的細體。

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

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

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

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

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

被CSS裝飾后的頁面

完成 - 添加背景圖

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

安裝 file-loader:

$ npm i file-loader --save-dev

將file-loader規則添加到 webpack.config.js 文件中的modules.rules部分:

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

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

為了能夠使圖像成為網頁頭部的背景,我們需要將其作為背景圖像添加到 fullstack.css 文件的頁眉部分。

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

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

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

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

將此函數添加到你的App類:

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

這個函數創建了一個新的Image對象,并將源設置為你的標題圖片。

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

將下列代碼添加到render()函數中:

{this.addHeaderImg()}

刷新瀏覽器窗口時,應該看到以下內容:

恭喜你!你已成功創建了一個全棧 Web 應用程序!

關注微信公眾號:充實的腦洞, 一個技術宅的保留地

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/40800.html

相關文章

  • 一個小時搭建一個全棧Web應用框架)——美化功能

    摘要:點擊直達前文譯一個小時搭建一個全棧應用框架上如果沒有,但還是要繼續學習本教程,可以到我的頁面下載代碼。從服務器返回隨機語言的每當我們與服務器上的端點進行通話時,為了能夠請求一個隨機的歐洲語言,必須更改文件中的功能。 翻譯:瘋狂的技術宅原文標題:Creating a full-stack web application with Python, NPM, Webpack and Reac...

    Luosunce 評論0 收藏0
  • 一個小時搭建一個全棧Web應用框架(上)

    摘要:初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態,并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。 翻譯:瘋狂的技術宅英文標題:Creating a full-stack web application with Python, NPM, Webpack and React英文原文:https://codeburst.io/creating....

    wizChen 評論0 收藏0
  • 一個小時搭建一個全棧Web應用框架(上)

    摘要:初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態,并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。 翻譯:瘋狂的技術宅英文標題:Creating a full-stack web application with Python, NPM, Webpack and React英文原文:https://codeburst.io/creating....

    Doyle 評論0 收藏0
  • 前端相關大雜燴

    摘要:希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時,老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。 前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 評論0 收藏0
  • 2017-08-18 前端日報

    2017-08-18 前端日報 精選 [譯] 關于 React Router 4 的一切騰訊祭出大招VasSonic,讓你的H5頁面首屏秒開用簡單的方法學習ECMAScript 6【譯】一個小時搭建一個全棧Web應用框架你應該知道的Debug技巧Understanding V8’s Bytecode – DailyJS – MediumAnnouncing TypeScript 2.5 RC 中文...

    AZmake 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<