Catapult スタート - Python web 開発 Flask フレームワーク、フロントエンド ネイティブ + Flask バックエンド フレームワーク + mysql データベース 実戦 (小さなケースあり)

 こんにちは、私は csdn のブロガーです: lqj_

これは私の個人的なブログのホームページです。

lqj_My blog_CSDN blog - WeChat アプレット、フロントエンド、python フィールド ブロガーlqj_ WeChat アプレット、フロントエンド、python などを得意としていますhttps://blog.csdn.net/lbcyllqj?spm=1011.2415 .3001.5343 :シャオ ミャオ ディベロップ

Xiaomiao Develop のパーソナル スペース - Xiaomiao Develop のパーソナル ホームページ - 哔哩哔哩ビデオ

この記事の主な内容: クイック スタート、pythonweb 開発 Flask フレームワーク

目次

PythonはWebアプリケーション開発に適しています

フラスコのフレームワーク

小さなケースのファイル構造

 mysql データベースのテーブル構造

バックエンド コードの実装

フロントエンドのネイティブ コードの実装

小さなケースのフロントエンドとバックエンドの相互作用効果:


PythonはWebアプリケーション開発に適しています

1つは習得が簡単です。Pythonは初心者に最も人気のある言語であり、JavaやC++などの他の言語よりもコードを書くことが少なく、間違いが少ないため、効率が向上します。それだけでなく、日常の言語に比較的似ているため、参入障壁が低く、コードを理解しやすいです。

2 つ目は、豊富なエコシステムとライブラリがあることです。Python は幅広いライブラリ ツールとパッケージを提供し、多くの事前に作成されたコードにアクセスできるため、アプリケーションの開発時間を短縮できます。たとえば、数学的分析には Numpy と Pandas、グラフ分析には Pygal、構成可能なクエリには SLQALchemy を使用できます。Python は、Django や Flask などのすばらしい Web フレームワークも提供します。これらについては、後のセクションで詳しく説明します。

3 つ目は、ラピッド プロトタイピングです。他のプログラミング言語と比較して、Python はプロジェクトの構築にかかる時間を大幅に節約でき、アイデアをより早く実現できるため、フィードバックをより迅速に取得し、迅速に反復することができます。この効率的な開発により、Python は、市場投入を早めて競争上の優位性を獲得できるスタートアップに特に適しています。

第 4 に、広く普及しています。Python は世界で最も人気のある言語の 1 つであり、世界中からのコミュニティの貢献により、ほとんどすべての技術的な問題は検索エンジンですばやく見つけることができます。Python 自体は、優れたドキュメントとコミュニティ サポートと共に、新しい機能とライブラリで常に更新されています。特に新しい開発者のために、Python は広範なサポートとフレームワークを提供します。

フラスコのフレームワーク

Flask は、最小限の Web フレームワークであるマイクロフレームワークと見なされます。つまり、Web テンプレート エンジン、アカウント認証、認証など、Django のようなフルスタック フレームワークが提供する機能の多くが欠けています。その主な機能は次のとおりです。

• 軽量のマイクロ フレームワーク • 学習コストが比較的低く、すぐに始められる • JinJa2 テンプレート エンジンをサポート • Django テンプレート言語に続く最新のテンプレート言語

Flask は最小限で軽量です。つまり、コードを記述するときに必要な拡張機能とライブラリを追加できます。Flask の背後にある考え方は、アプリケーションの構築に必要なコンポーネントのみを提供するため、開発者は多くの柔軟性と制御を得ることができるというものです。Flask は、Netflix、Linkedin、Uber などの大企業で使用されている人気のある強力な Web フレームワークでもあります。

小さなケースのファイル構造

 mysql データベースのテーブル構造

バックエンド コードの実装

簡単な説明: Flask フレームワーク ライブラリ、pymysql サードパーティ ライブラリ、リクエスト モジュール ライブラリ、render_template を呼び出します。

Flask オブジェクトをインスタンス化します。

app = Flask(__name__)

/add/user このページは、mysql データベースのテーブルにデータを追加するために使用されます。

/show/user このページは、mysql データベースのデータ テーブルのデータをリアルタイムでレンダリングするために使用されます。

request.method == 「GET」を使用して追加/ユーザー ページを指定し、「GET」リクエスト メソッドを介してインテリジェントにリクエストを送信します。
render_template は、フロントエンドの HTML ネイティブ ページに接続するために使用されます。
from flask import Flask, render_template, request
import pymysql

app = Flask(__name__)


@app.route("/add/user",methods=["GET","POST"])
def add_user():
    if request.method == "GET":
        return render_template("add_user.html")
    # print(request.form)
    username = request.form.get("user")
    password = request.form.get("pwd")
    mobile = request.form.get("mobile")

    #1.连接mysql
    conn = pymysql.connect(host="你自己的ip", port=你自己的端口, user='root', password='你自己的mysql密码', charset='utf8', db='unicom')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

    #2.执行sql
    sql = "insert into admin(username,password,mobile) values (%s,%s,%s)"
    cursor.execute(sql, [username, password, mobile])

    conn.commit()
    #3.关闭连接
    cursor.close()
    conn.close()
    return "xxx"

@app.route("/show/user")
def show_user():
    #连接mysql
    conn = pymysql.connect(host="你自己的ip", port=你自己的端口, user='root', password='你自己的mysql密码', charset='utf8', db='unicom')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

    #执行sql
    sql = "select * from admin"
    cursor.execute(sql)
    data_list = cursor.fetchall()

    # 3.关闭、
    cursor.close()
    conn.close()
    # print(data_list)
    return render_template('show_user.html',data_list=data_list)



if __name__ == '__main__':
    app.run()

フロントエンドのネイティブ コードの実装

/追加/ユーザーページ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加用户</h1>
<form method="post" action="/add/user">
    <input type="text" name="user" placeholder="用户名">
    <input type="text" name="pwd" placeholder="密码">
    <input type="text" name="mobile" placeholder="手机号">
    <input type="submit" value="提 交">
</form>

</body>
</html>

/show/ユーザーページ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            display: flex;
            flex-direction: row;
            justify-content: space-around;

        }
        h1{
            color: orange;
        }
        .box1{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        table{
            border: bisque 1px double;
            height: 300px;
        }
        td{
            width: 200px;
            border: bisque 1px double;
            background: #238a8e;
        }
        th{
            border: orangered 1px double;
            background: #a07c5f;

        }
        body{
            background: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="title">
        <h1>用户列表</h1>
    </div>
    <div class="box1">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>账户</th>
                <th>密码</th>
                <th>手机号</th>
            </tr>
        </thead>
        <thead>
        {% for item in data_list%}
            <tr class="box2">
                <td>{
   
   {item.id}}</td>
                <td>{
   
   {item.username}}</td>
                <td>{
   
   {item.password}}</td>
                <td>{
   
   {item.mobile}}</td>
            </tr>
        {% endfor%}
        </thead>
    </table>
    </div>
</body>
</html>

小さなケースのフロントエンドとバックエンドの相互作用効果:

おすすめ

転載: blog.csdn.net/lbcyllqj/article/details/130537458