動的なWebページを構築するためにフラスコの使用

フラスコはPythonで書かれたWebアプリケーションフレームワークである、フラスコをWERKZEUG WSGIツールキットとJinja2のテンプレートエンジンをベース。WSGI(Webサーバーゲートウェイインターフェイス)仕様WERKZEUG WSGIツールキットである、それは合意を気にすることなく一緒に、Webページや機能を要求することができ、WebサーバとWebアプリケーション間の共通のインタフェースであり、他の低レベルのスレッド管理詳細。Jinja2のは、動的なWebページをレンダリングするために、データソースの特定の組み合わせで人気のPythonのテンプレートエンジン、Webテンプレートシステムテンプレートです。

フラスコすることにより、Webページのセットを構築し、Webコンテンツは、MySQLデータベースのテーブルで、パイソンを通じて、同時にバックエンド接続MySQLデータベースをWebページを開き、クエリ結果は、フロントページに表示されます。

、プロジェクトページプロジェクトフォルダ、パイソンとバックエンドとして新しいフォルダを作成しますので、入力プログラムとしてのpythonファイルを作成し、いくつかのサブフォルダを作成し、店舗などのCSSスタイル、JavaScriptのに使用され、静的なフォルダがあり、 HTMLファイルを格納するフォルダを使用するテンプレートがあります。次のように具体的な構造があります

|---paixu                                      //项目文件夹
	|---paixu.py                               //程序主入口
	|---static                                 //静态文件夹
		|---images                             //图片文件夹
		|---paixu.css                          //css文件
		|---paixu.js                           //js文件
	|---templates                              //模板文件夹
		|---jishu.html                         //一些html文件
		|---oushu.html
		|---zongshu.html

テンプレートの保存フォルダ、zongshuという名前のHTML、HTMLを書くの最初の部分。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>天窗排序总数</title>
    <script src="/static/paixu.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/paixu.css">
    </head>
<body id="body">
    <p>天窗排序总数</p>
    <table id="bbsTab">
        <tr>
        <th>序号</th>
        <th>零件号</th>
        <th>顺序号</th>
        </tr>
        {% for i in u %}
        <tr>
        <td></td>
        <td>{{ i[1] }}</td>
        <td>{{ i[2] }}</td>
        </tr>
        {% endfor %}
    </table>
    <p>
    <a href="/jishu">【奇数】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/oushu">【偶数】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/zongshudaoxu">【倒序】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </p>

</body>
</html>

コードは単純で、三つ、即ち、シリアル番号、部品番号、注文番号、におけるコンテンツのテーブルの各行は、ある一部のHTML基盤部の参照を外部CSSスタイルを向かうことができるとJavaScriptスクリプトページの主要内容はテーブルであり、テーブル・ヘッド{%...%}とのforループ内のループのために、{%...%}コンテンツがページに表示されませ囲ま逃げる、Jinja2のHTMLテンプレートエンジンを包囲し、{{...}}コンテンツが同封に表示されますページ。Webコンテンツをuに応じて変化するかを見ることができ、uの変数の変更、ページの内容が変更され、これは、動的なWebページの意味です。
CSSは次のよう:

a:link {color:rgb(0,0,0);text-decoration:none;}
a:visited {color:rgb(0,0,0);text-decoration:none;}
a:hover {color:rgb(255,0,0);text-decoration:underline;}
table,th,td
    {
    border:1px solid black;
    cellpadding:1px;
    cellspacing:1px;
    text-align:center;
    }
table
    {
    width:100%;
    }
p
{
    text-align:center;
}

ジャバスクリプトは次のとおりです。

window.onload = function(){ 
    var oTable = document.getElementById("bbsTab"); 
    for(var i=1;i<oTable.rows.length;i++){ 
        oTable.rows[i].cells[0].innerHTML = i;
    }
}

引用javascriptのは、列が空であることを、ページテーブル番号ので、我々は簡単にカウントするために、シリアル番号を記入する必要があります。
最初のフロントページが、何ページのスプレッドは、これらの問題が解決されていないかuの変数の内容を、書かれていました。
第二の部分、Pythonのオープンファイル、次のようにコードを記述します。

from flask import Flask,render_template
import pymysql

app=Flask(__name__)

@app.route('/zongshu')
def zongshu():
    conn=pymysql.Connect(host='主机地址',port=3306,user='用户名',passwd='密码',db='数据库名',charset='utf8')
    cur=conn.cursor()
    sql="select 序号,零件号,顺序号 from down;" #sql语句
    cur.execute(sql)
    data = cur.fetchall()
    cur.close()
    conn.close()
    return render_template('zongshu.html',u=data)

if __name__ =="__main__":
    app.run(debug=True)

入力URL http://127.0.0.1:5000/zongshuは、@ app.route()によって、主にアクセスし、クエリに次の関数のzongshu()、内容の関数を呼び出す、というこれはコード手段データベースその後、Uに割り当てられたクエリ結果のデータは、uはクエリ結果の内容で、uはその後、zongshu.htmlこのページを渡し、その要求を入れて、Webページや機能はアップリンク。
私たちは2ページ目を持っているので、異なる結果を得るために、SQLステートメントを変更することにより、uはウェブページのコンテンツに渡される変数は、異なっています。

@app.route('/jishu')
def jishu():
    conn=pymysql.Connect(host='主机地址',port=3306,user='用户名',passwd='密码',db='数据库名',charset='utf8')
    cur=conn.cursor()
    sql="select 序号,零件号,顺序号 from down where 顺序号%2=1;" #sql语句
    cur.execute(sql)
    u = cur.fetchall()
    cur.close()
    conn.close()
    return render_template('jishu.html',u=u)

新jishu.html、コード内のコピーzongshu.html、htmlコードは同じですが、ページ表示の内容が変更されました。私たちは、コンテンツのuのjishu.htmlが変更された、ページの表示が変更されます渡され、クエリ結果が変更された、変更されたデータベースのクエリを見ることができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天窗排序奇数</title>
<script src="/static/paixu.js"></script>
<link rel="stylesheet" type="text/css" href="/static/paixu.css">
</head>
<body id="body">


<p>天窗排序奇数</p>
    <table id="bbsTab">
        <tr>
        <th>序号</th>
        <th>零件号</th>
        <th>顺序号</th>
        </tr>
        {% for i in u %}
        <tr>
        <td></td>
        <td>{{ i[1] }}</td>
        <td>{{ i[2] }}</td>

        </tr>
        {% endfor %}
    </table>


    <p>
    <a href="/zongshu">【总数】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/oushu">【偶数】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="/jishudaoxu">【倒序】</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </p>

</body>
</html>

あなたはURL http://127.0.0.1:5000/jishuを入力すると、@ app.route()で、()次の関数のjishuを呼び出して、最後に結果がページに表示さjishu.html。
同様に、我々は、このようにページの同様の機能セットを作り、正シーケンスクエリ、逆クエリ、することができます。

概要:フラスコクラスのルート()関数がデコレータであるが、それはURLが呼ばれるべきアプリケーション関連の機能を伝えます。私たちは、リクエストURLを入力すると、ルート()関数は、URLバインディング要求で呼び出され、関数が)(render_templateによってレンダリングされたページを返します。
最後に、いくつかのレンダリング。
ここに画像を挿入説明
ここに画像を挿入説明
ここに画像を挿入説明
スキャナのインターフェースが表示されます。
ここに画像を挿入説明

リリース7件のオリジナルの記事 ウォンの賞賛3 ビュー403

おすすめ

転載: blog.csdn.net/qq_41960127/article/details/104570596