フラスコ_2、開発に基づいて、単純なWeb開発フレームワーク

2.1プロジェクトディレクトリ

ここに画像を挿入説明
上記の最初のディレクトリ構造：

静的なディレクトリ：
名前が示すように、静的なフォルダは、そのようなJS、CSS、画像など、いくつかの静的ファイルを、防ぎます
templatesディレクトリ：
htmlファイル内部に配置されたテンプレートとして、中国
venvディレクトリ：
のみ、現在のプロジェクトのディレクトリ内部に配置されたライブラリーLIB-のsite-packagesのいくつかを見る必要があり、仮想環境のPythonプロジェクトは、コールに必要。プロジェクト内のライブラリをダウンロードして、そこにもあります。
app.py：
それは簡単なHTMLページの背景制御プログラムとして理解することができます
図書館外部：
外部にいくつかのパッケージのpythonをインストールPIPライブラリによってあなたに比べて
新しい建設にチェックする時間を持っていない場合、ライブラリは、それが直接内部工学によっても、ピップにインストールすることはできませんが、外部依存関係のインポートオプションを可能にインポートパッケージを導入する方法：
- venv-LIB-のsite-packagesフォルダに直接コピー
- pycharmプロジェクト内のダウンロードネットワーキング：

2.2プロジェクト内のhtmlファイルを追加します

私たちは、ほとんどのページがメインのHTMLファイルに基づいていることを知っているので、起動できないHTMLコード、Web開発者はありません。ここではプロジェクト内のhtmlファイルを追加する方法を説明します

インポートHTMLは、
右クリックして、テンプレートのディレクトリを検索：test.htmlという名前の新しいHTMLファイル、

test.htmlという中では、
タイトルの名前を変更します（ここで私は、一例として、Biexian奇妙な名前を小さなプロジェクトを行うために友人を助けた）
書きますテストへの文字列
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>
</head>
<body>
<p>hello！</p>
</body>
</html>
```
用render_template渲染html
在app.py中
导入render_template包
将hello_word（）中的return 改成如下代码
```
from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('test.html')
    
if __name__ == '__main__':
    app.run(Debug=True)
```
此段代码的意思是，渲染了一个html的网页模板
可以直接理解为，显示这个网页
ok，这样一个html文件就可以在flask框架中应用了，恭喜，你已经成功了一半。

2.3 加入css文件

找到static目录，右键在之中new一个新的directory（目录、文件夹）命名为css，这个目录专门用来存放css文件
ここに画像を挿入説明
然后再css目录右击new一个css样式文件（stylesheet）命名为mystyle.css

创建成功后在html的head标签中加入css样式表

<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>
    
    <link rel="stylesheet" href="../static/css/mystyle.css">
 
</head>

href中的路径为你css样式表文件的路径
"…/"的意思为返回上一级目录
这里html的目录为template，那么他的上一级目录则为工程文件夹在我这里是叫Flask-Demo,
（其实只有两个点“。。/”，但是在MarkDown这个编辑语法下打出两个英文字符“.”他会自动帮我补全为三个…，在此指出，避免误导，以代码片中为准）

接下来在html的body标签中加入一个div，设置其id为bg，并在css样式表中修改id为bg的块的背景色，验证css是否成功被html导入并且发挥渲染样式的作用
html文件：

<body>

    <div id="input"></div>

</body>

css文件中
（css样式看不懂的不必太纠结，这里只是随便写了一下，便于后面的展示）

#input
{
    background-color: lightblue;    
    width: 100px;                   
    height: 40px;                   
    position: absolute;             
    top: 100px;                     
    left: 100px;              
}

次127.0.0.1:5000に元のページを参照するか、クリックするし、Ctrl + Sさわやか後
（エフェクト後リフレッシュしていない場合は、理由の続編であってもよいし、キャッシュをクリアした後のリフレッシュ、または開発者モードブラウザをオンにすることをお勧めします）
効果次のように：
ここに画像を挿入説明
これはあなたのCSSスタイルシートが正常にインポートされた示してい

2.4インポートのjsファイル

スープラ新しいJS静的なディレクトリ名の下のディレクトリに移動し、control.jsという名前の新しいJSファイルの下で
ここに画像を挿入説明
、その後ヘッドhtmlタグ、ファイルのJSをインポートするには、次のコードを追加します。

<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>

    <link rel="stylesheet" href="../static/css/mystyle.css">
    <script type="text/javascript" src="../static/js/control.js" ></script>

</head>

これまでのところ、JSファイルのインポートは完了です

htmlファイルとCSSを追加し、簡単なWeb開発_2フラスコフレームワークに基づいて、JSファイル

フラスコ_2、開発に基づいて、単純なWeb開発フレームワーク

2.1プロジェクトディレクトリ

2.2プロジェクト内のhtmlファイルを追加します

2.3 加入css文件

2.4インポートのjsファイル

おすすめ