文大师的藏经阁 - Flask+Jquery 前后端半分离

前端和后端是相互独立的两个模块，通过 API 接口进行通信。这种架构有助于更好地分工合作，提高开发效率，并支持不同平台和设备上的应用程序。

以下是前后端分离架构的一般流程和关键概念：

前端（Frontend）：

界面设计与开发： 前端开发人员负责设计和开发用户界面。他们使用 HTML、CSS 和 JavaScript 等技术来创建交互式界面和用户体验。
数据获取和显示： 前端应用通过 API 调用从后端获取数据。常见的方法是使用 XMLHttpRequest 或 Fetch API 来请求数据，并在用户界面上显示数据。
交互逻辑： 前端负责处理用户的交互行为，例如按钮点击、表单提交等。这些行为可以触发 API 请求，或在前端直接处理数据。
状态管理： 复杂的前端应用可能需要使用状态管理库（如 Redux、Vuex、Mobx）来管理应用的状态，确保数据的一致性和可控性。

后端（Backend）：

业务逻辑处理： 后端开发人员负责处理业务逻辑，对接数据库，执行数据操作，并生成 API 以供前端调用。
API 开发： 后端开发人员设计和开发 API，定义了前端可以调用的接口，以及接口的参数、返回值等信息。
数据库管理： 后端处理数据存储和检索，可以使用数据库系统如 MySQL、MongoDB 等。
安全性和认证： 后端需要处理用户认证、数据安全、跨域问题等。

通信和数据交换：

API 接口： 前端通过 API 接口来请求后端数据。这些接口可以采用不同的协议，如 RESTful API、GraphQL 等。
数据格式： 前后端之间通过 JSON 等数据格式进行数据交换。前端发送请求并接收后端响应，以实现数据的显示和交互。

部署和维护：

前端部署： 前端应用可以部署在静态文件服务器上，如 CDN、云存储等。
后端部署： 后端服务可以部署在云服务器、虚拟主机等，以供前端应用调用。

前后端分离架构允许前端和后端分别进行开发、测试和部署，提高了团队合作效率。同时，它也允许更好地扩展和维护，因为前后端可以独立地进行改进和升级，而不会影响整体系统的稳定性。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{ bootstrap.load_css() }}
    {{ bootstrap.load_js() }}
</head>
<body>
<div>
    <div class="row" style="margin-right: 10px;">
        {# 创建4个按钮,给按钮存一个变量 data-path #}
        <button type="button" class="btn btn-primary" id="butt1" data-path="C">清空</button>
        <button type="button" class="btn btn-primary" id="butt1" data-path="b1">b1</button>
        <button type="button" class="btn btn-primary" id="butt1" data-path="b2">b2</button>
        <button type="button" class="btn btn-primary" id="butt1" data-path="b3">b3</button>
    </div>

    <div id="app">
        {# 可变区域 #}
        <h1>123</h1>
    </div>
</div>

<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://030399.xyz/upload/CDN/jquery-3.7.0.js"></script>
<script>

    // 绑定 class btn-primary 点击时间
    $(".btn-primary").click(function () {
        let domdata = ""
        var path = $(this).data("path");    // 取按钮标签内data-path的值
        //console.log(path)
        if (path === "C") {
            $("#app").empty(); // 清空
        } else if (path === "b1" || path === "b2" || path === "b3") {
            // 通过get请求往后端发送请求
            $.get("/" + path, function (data) {
                $("#app").empty(); // 清空            
                $("#app").append(data); // 添加
            });
        }
    })

</script>
</body>
</html>

from gevent import monkey
from gevent.pywsgi import WSGIServer

monkey.patch_all()

import datetime
import os
from multiprocessing import cpu_count
from multiprocessing.dummy import Process
from flask import Flask, jsonify, redirect, render_template
from flask_bootstrap import Bootstrap5

app = Flask(__name__)
# 实例化一个Bootstrap5对象并关联flask
bootstrap = Bootstrap5(app=app)

# 本地加载bootstrap,默认使用CDN加载bootstrap
app.config['BOOTSTRAP_SERVE_LOCAL'] = True


@app.route("/cppla", methods=['GET'])
def function_benchmark():
    return jsonify(
        {
            "status": "ok",
            "time": datetime.datetime.now().strftime('%Y-%m-%d %H:%M'),
            "pid": os.getpid()
        }
    ), 200


@app.route("/")
def index():
    return redirect("/index")


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


@app.route("/b1")
def b1():
    return render_template("b1.html", msg="haha")


@app.route("/b2")
def b2():
    return render_template("b2.html")

@app.route("/b3")
def b3():
    return render_template("b3.html")


def run(MULTI_PROCESS):
    if MULTI_PROCESS == False:
        WSGIServer(('0.0.0.0', 8080), app).serve_forever()
    else:
        mulserver = WSGIServer(('0.0.0.0', 8080), app)
        mulserver.start()

        def server_forever():
            mulserver.start_accepting()
            mulserver._stop_event.wait()

        for i in range(12):
            p = Process(target=server_forever)
            p.start()


if __name__ == "__main__":
    # 单进程 + 协程
    # run(False)
    app.run(debug=True)
    # 多进程 + 协程
    # run(True)