提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

python flask 快速搭建 WEB 实战

PythonWeb 快速 实战 搭建 Flask
2023-09-11 14:15:45 时间

python flask 快速搭建 WEB 实战

tags: flask

在这里插入图片描述

文章目录

视频：https://mp.weixin.qq.com/s/Az1LmhgYjURjsqJW4cBcLg
原创：https://www.youtube.com/watch?v=kng-mJJby8g
github：https://github.com/Ghostwritten/flask_simple_demo.git

python -m pip install flask
mkdir flask_web1
cd flask_web1
mkdir flask_web1/template
mkdir flask_web1/static
touch app.py views.py

1. app.py配置首页

app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "this is the home page"

if __name__=='__main__':
    app.run(debug=True, port=8080)

运行
访问：http://127.0.0.1:8080

在这里插入图片描述

2. views.py配置首页

app.py

from flask import Flask
from views import views

app = Flask(__name__)

app.register_blueprint(views, url_prefix="/views")

if __name__=='__main__':
    app.run(debug=True, port=8080)

views.py

from flask import Blueprint

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return "home page"

运行app.py，此效果调用views.py的blueprint
在这里插入图片描述

3. templates配置首页

mkdir templates/index.html

在这里插入图片描述

自动创建html模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>
    <div><h1>Home Page</h1></div>
</body>
</html>

views.py修改：

from flask import Blueprint, render_template

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html")

app.py不变
运行：
在这里插入图片描述

4. 设置变量

views.py

from flask import Blueprint, render_template

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html",name="Tim",ago=21)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>
    <div><h1>Home Page</h1></div>
    <p>hello, {{ name }}, you are {{ ago }} years old!</p>
</body>
</html>

在这里插入图片描述

5. 接口变量

views.py

from flask import Blueprint, render_template

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html",name="Tim")

@views.route("/profile/<username>")
def profile(username):
    return render_template("index.html",name=username)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>
    <div><h1>Home Page</h1></div>
    <p>hello, {{ name }}</p>
</body>
</html>

运行：
死的用户
在这里插入图片描述
动态
在这里插入图片描述
在这里插入图片描述

6. 接口传参

from flask import Blueprint, render_template, request

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html",name="Tim")

@views.route("/profile")
def profile():
    args = request.args
    name = args.get('name')
    return render_template("index.html",name=name)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7. 接口返回json

views.py

from flask import Blueprint, render_template, request, jsonify

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html",name="Tim")

@views.route("/profile")
def profile():
    args = request.args
    name = args.get('name')
    return render_template("index.html",name=name)


@views.route("/json")
def get_json():
    return jsonify({'name': 'liming','coolness': 10})

在这里插入图片描述

8. 接口跳转

views.py

from flask import Blueprint, render_template, request, jsonify,redirect, url_for

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html",name="Tim")

@views.route("/profile")
def profile():
    args = request.args
    name = args.get('name')
    return render_template("index.html",name=name)


@views.route("/json")
def get_json():
    return jsonify({'name': 'liming','coolness': 10})

@views.route("/data")
def get_data():
    data = request.json
    return jsonify(data)

@views.route("/go-to-home")
def go_to_home():
    return redirect(url_for("views.get_json"))

在这里插入图片描述
回车go-to-home跳转json
在这里插入图片描述
修改为views.py：

return redirect(url_for("views.home"))

go-to-home跳转home
在这里插入图片描述

9. index.html添加javascript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>
    <div>
        <h1>Home Page</h1>
       <p>hello, {{ name }}</p>
     </div>
     <script type="text/javascript"
     src="{{ url_for('static', filename='index.js')}}"
     ></script>

</body>
</html>

创建index.js

touch static/index.js

index.js写入console日志

console.log("I am running");

运行：
在这里插入图片描述

10. 设置风格

touch template/profile.html

profile.html写入风格

{% extends "index.html" %}
{% block content %}
<h1> This is the profile page!</h1>
{% endblock %}

views.py

from flask import Blueprint, render_template, request, jsonify,redirect, url_for

views = Blueprint(__name__, "views")


@views.route("/")
def home():
    return render_template("index.html",name="Tim")

@views.route("/profile")
def profile():
    args = request.args
    name = args.get('name')
    return render_template("profile.html")


@views.route("/json")
def get_json():
    return jsonify({'name': 'liming','coolness': 10})

@views.route("/data")
def get_data():
    data = request.json
    return jsonify(data)

@views.route("/go-to-home")
def go_to_home():
    return redirect(url_for("views.home"))

运行：
在这里插入图片描述
更多阅读：

相关文章