<wbr id="juant"></wbr>
  • <wbr id="juant"></wbr>
    更多課程 選擇中心


    Python培訓

    400-111-8989

    Python基礎篇:一個小時搭建一個全棧 Web 應用框架

    • 發布:Python培訓
    • 來源:Python練習題庫
    • 時間:2017-09-18 17:31

    把想法變為現實的能力是空想家與實干家的區別。不管你是在一家跨國公司工作,還是正在為自己的創業公司而努力,那些有能力將創意轉化為真正產品的人,都具有寶貴的技能并擁有明顯的實力。如果你能在不到一個小時的時間里創建一個全棧的Web應用,那么你就有能力為自己下一個偉大的想法迅速的的創建一個簡單的MVP,或者在工作中快速構建一個新的應用程序。

    本文介紹了創建一個簡單的全棧Web應用所需的步驟,其中包括一個Python服務器和一個React前端。你可以輕松的在其基礎上進行構建,根據你的實際需求進行修改,或是添加一些其他技術特性,例如Redux。

    世界在互聯網的驅動下,計算機的基本技術和簡單工具已經成為現代商業人士的必備技能。本文適合想要學習怎樣制作一個簡單的基于web的應用程序,并且具備基本編程技能的人。

    盡管你可以在我的GitHub上找到本文所有的源代碼,但是如果你能夠從頭開始創建這個程序,將會得到最好的學習成果。

    初始項目設置

    Python

    ├── README.md

    └── fullstack_template/

    ├── server/

    └── static/

    ├── css/

    ├── dist/

    ├── images/

    └── js/

    我們將使用npm包管理器來處理Javascript依賴項。Npm是非常棒的,因為它易于使用,有良好的文檔支持,有將近50萬個包可供使用,以及合理的默認項目設置方案。

    使用包管理器可以使您的項目依賴項保持最新狀態,并能夠獲取和安裝最新的包。

    讓我們初始化項目:

    Python

    $ cd fullstack_template/static

    $ npm init

    在初始化的過程中可以接受默認設置,但是你最好填寫自己的程序名稱和Git庫等參數,結束后會自動在你的static目錄下生成一個名為package.json 的文件。

    package.json文件有如下幾個作用:

    跟蹤所有的依賴項及其版本。

    它可是使其他開發人員了解你的項目,比如應用的名稱、說明、所有者和所在存儲庫的位置。

    可以非常容易的通過npm進行自動化安裝、運行和更新。

    安裝和配置Webpack

    Webpack是一個模塊打包器。它可以處理你所有的模塊依賴,并生成靜態資源。 使用模塊打包器可以減少瀏覽器需要加載的模塊數量,從而大大縮短了網頁的加載時間。

    演示了Webpack是怎樣工作的

    安裝Webpack:

    Python

    1$ npm i webpack --save-dev

    要使用Webpack,我們需要添加一個 Webpack 配置文件。這個配置告訴 Webpack 在哪里可以找到 JavaScript 和 React 文件,以及在哪里放置生成的JavaScript包。

    在static目錄中添加一個名為webpack.config.js的文件,下面的內容如下:

    Python

    const webpack = require('webpack');

    const config = {

    entry: __dirname + '/js/index.jsx',

    output: {

    path: __dirname + '/dist',

    filename: 'bundle.js',

    },

    resolve: {

    extensions: ['.js', '.jsx', '.css']

    },

    };

    module.exports = config;

    添加運行命令

    向package.json文件中添加一些運行命令會是你的開發過程更加順暢。我總是在自己的package.json 文件中添加一些build, dev-build 和 watch 命令。

    build用于構建生產環境版本, dev-build用于開發時的構建版本,watch的作用和dev-build類似,只不過可以自動監視項目文件是否修改,并且自動重新構建被修改的部分,你只需要刷新瀏覽器就可以看到改動后的結果。

    自動化構建你的項目還有一個好處,那就是你不會耗費時間去思考為什么修改了代碼卻看不到效果,一般遇到這種情況純粹是因為你忘記了構建它們!

    以下是我的 package.json 文件內容:

    Python

    {

    "name": "FullStackTemplate",

    "version": "1.0.0",

    "description": "A Template for creating a Full Stack Web Application using Python, NPM, Webpack and React",

    "main": "index.js",

    "scripts": {

    "build": "webpack -p --progress --config webpack.config.js",

    "dev-build": "webpack --progress -d --config webpack.config.js",

    "test": "echo \"Error: no test specified\" && exit 1",

    "watch": "webpack --progress -d --config webpack.config.js --watch"

    },

    "keywords": [

    "fullstack",

    "template",

    "python",

    "react",

    "npm",

    "webpack"

    ],

    "author": "Angela Branaes",

    "license": "MIT",

    "devDependencies": {

    "webpack": "^3.0.0"

    }

    }

    添加Babel支持

    Babel能夠允許我們使用最新的JavaScript特性編碼,即便是瀏覽器還沒有支持它們。通過安裝ES2015和react presets,Babel能夠把使用 Javascript 新特性和 React jsx 的代碼轉換為與當前瀏覽器兼容的 JavaScript 語法。

    Babel轉換JavaScript代碼的示例

    安裝Babel:

    Python

    1$ npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

    添加Babel presets到package.json文件中:

    Python

    "babel": {

    "presets": [

    "es2015",

    "react"

    ]

    },

    在 Webpack 的配置中添加一條 babel-loader 規則。注意,我們在規則中排除了node_modules。這可以保證 Babel 不會嘗不會對 node 模塊進行轉換,從而不會影響到node程序的加載速度。

    Python

    module: {

    rules: [

    {

    test: /\.jsx?/,

    exclude: /node_modules/,

    use: 'babel-loader'

    }

    ]

    }

    創建 index.jsx 和 index.html

    為了能在瀏覽器中看到一些東西,我們將創建一個簡單的index.html頁面,這個頁面只顯示一個由JavaScript彈出的“Hello World!”對話框,以此來證明設置是正確的。

    在static目錄中創建一個index.html文件,并填寫下面的代碼:

    Python

    <!— index.html —>

    <html>

    <head>

    <meta charset="utf-8">

    <!-- Latest compiled and minified bootstrap CSS -->

    <link rel="stylesheet" >

    <title>Creating a Full-Stack Python Application with NPM, React.js and Webpack</title>

    </head>

    <body>

    <div id="content" />

    <script src="dist/bundle.js" type="text/javascript"></script>

    </body>

    </html>

    在static/js目錄下創建一個index.jsx文件,并添加下面的代碼:

    Python

    1alert(“Hello World!”);

    啟動一個獨立的終端窗口來運行前面創建的 Webpack watch 命令,這樣當我們在工作時,它可以在后臺一直運行。它會在沒有編碼錯誤的前提下自動構建你的包。

    Python

    1$ npm run watch

    打開瀏覽器并訪問index.html,應該能夠看到彈出一個寫著“Hello World!”的提示窗口。

    創建一個簡單的 React 應用

    首先需要安裝React:

    Python

    1$ npm i react react-dom --save-dev

    下一步讓我們用一個簡單的 React 應用替換掉前面的index.jsx,并讓它加載一個創建在單獨的 App.js 文件中的 React 類。

    Python

    // index.jsx

    import React from "react";

    import ReactDOM from "react-dom";

    import App from "./App";

    ReactDOM.render(<App />, document.getElementById("content"));

    React 類需要在不同的React源碼文件中做導出,以方便后面的使用。通常每個文件中只寫一個類,并且導出。

    Python

    // App.jsx

    import React from “react”;

    export default class App extends React.Component {

    render () {

    return <p> Hello React!</p>;

    }

    }

    如果我們現在刷新瀏覽器,頁面上將會顯示“Hello React!”,而不再是“Hello World!”提示框。

    配置Python服務

    關于Python服務器我們將會使用Flask。Flask是小型Python應用的最佳選擇之一。“微框架(microframework)”可以使你在短短幾分鐘內輕松快速的使一個服務跑起來。對于大型應用和某些專業領域,企業通常會使用 Pyramid 或 Django。如果你想在自己的環境中擁有很大的靈活性和能夠自定義配置的特性,Pyramid是一個不錯的選擇。Django則提供了一個全功能的Web框架,同時使你不必為應用的配置花費太多的時間,比如在數據庫配置等方面。

    創建一個新的virtualenv并安裝Flask

    在server目錄中創建Flask服務源碼文件,添加一個用來返回返回“Hello World!”的端點路由“/hello”,再添加一個主頁面端點路由 “/“ 用來渲染index.html 模版。

    Python

    # server.py

    from flask import Flask, render_template

    app = Flask(__name__, static_folder="../static/dist", template_folder="../static")

    @app.route("/")

    def index():

    return render_template("index.html")

    @app.route("/hello")

    def hello():

    return "Hello World!”

    if __name__ == "__main__":

    app.run()

    運行python服務:

    Python

    $ python server.py

    接下來訪問http://localhost:5000/就可以看到 react 應用提供的的“Hello React!”提示。訪問http://localhost:5000/hello 將會看到由Python端點路由返回的“Hello World!”

    預約申請免費試聽課

    填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

    上一篇:python對象下的可變類型與不可變類型
    下一篇:Python變量名與作用域的坑

    2021年Python面試題及答案匯總詳解

    python數據分析,你需要這些工具

    Python培訓講解二叉樹的三種深度

    Python培訓:如何實現窮舉搜索?

    • 掃碼領取資料

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    黑龍江省

    吉林省

    河北省

    湖南省

    貴州省

    云南省

    廣西省

    海南省

    天天日天天射天天干天天伊|奇米电影|奇米网_奇米首页|奇米首页 百度 好搜 搜狗
    <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>