如何将 CSS 和 JS 链接或连接到 Python 代码答案

【问题标题】：How to link or connect CSS and JS to a Python code如何将 CSS 和 JS 链接或连接到 Python 代码
【发布时间】：2021-04-06 11:35:20
【问题描述】：

所以我使用 VS Code 在 Python 中创建了一个简单的计算器。我现在如何在 VS Code 中使用一些 CSS 和 JS 来自定义我的计算器？如何创建与我的 Python 代码链接或连接的 CSS 或 JS 新文件夹？

【问题讨论】：

Python 不是为与 JS 或 CSS 一起使用而设计的。如果不使用专门为此设计的库，您将无法做到这一点。这种库的一个例子是Eel。
欢迎来到 Stack Overflow！花点时间阅读Help Center。

标签： javascript python css calculator

【解决方案1】：

您可以使用Flask 将您的python 代码与js css 和html 集成。

为了实现这一点，您应该在您的环境中安装 Flask。

pip install Flask

这是项目中的文件夹结构：

.
├── _templates
│   └── template.html 
└── app.py

app.py

# python version 3.8.2
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    context = {
        "title": 'Challenge'        
    }
    return render_template('./template.html', context=context)


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

模板/模板.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>{{ context.title }}</title>
</head>

<body>
  <div id="legend">
    <h3>Legend</h3>
  </div>
</body>

</html>

然后为了运行您的应用程序，您应该使用以下命令，假设您位于root folder：

python app.py

之后，您可以通过以下方式访问您的应用程序：http://127.0.0.1:5000/

使用这个样板，您可以开始了解 Flask 如何帮助您与应用程序中已经开发的代码进行交互，并开始开发您的计算器应用程序。

【讨论】：

好的，谢谢你的帮助，我是菜鸟，所以我还在学习编程。我要去观看一些关于 Flask 的教程，谢谢！