本文介绍了如何使用Python的Flask框架实现前后端分离，重点在于设置静态文件夹和模板文件夹，以及使用`render_template`和`request`进行数据交互。通过定义路由和视图函数，实现了HTML页面与Python脚本的通信，同时讲解了在HTML中引用外部JavaScript文件的方法。
一、前提说明：
1.以三份文件实例进行介绍：
test.py
index.html
test.js
2.实现功能：
使用前后端分离方法在python文件中实现功能，在前端网页进行可视化
前后端可以传递数据
在html中引用外部脚本进行设计
3.运行环境：
pycharm
4.文件路径说明：
按此路径设置static和templates文件夹非常重要
js文件和css文件都要放在static文件夹中，html文件放在templates文件夹中，以保证在浏览器中可以找到引用文件以及前后端数据传输无误
├─MyProject
│ ├─static
│ │ ├─test.js
│ └─templates
│ │ ├─index.html
│ ├─test.py
（文件结构树：在对应文件夹下打开cmd，输入tree即可得到）
二、相关代码部分编写
1.test.py
先要pip install flask
//使用flask框架创建一个应用程序实例，其中：
// __name__ 是指当前 Python 模块的名称，用于 Flask 框架确定应用程序的根目录。
//static_folder 参数是指静态文件（如图像、CSS、JavaScript 等）所在的文件夹的名称。在本例中，静态文件存储在应用程序根目录下的 static 文件夹中。
//static_url_path 参数是指访问静态文件的 URL 前缀。在本例中，访问静态文件时需要在 URL 前面添加 /static。
from flask import Flask,jsonify,request,render_template
app = Flsk(__name,static_folder='static',static_url_path='/static')
reder_template的使用：
//下面是简单的视图函数编写示例
//由路由地址设置（route）和函数（def）构成，注意在前端使用该函数的返回值或者被向该函数发送数据，需要路由地址完全对应，例如这里的query的路由地址为'/query'
@app.route('/index',methods=['POST','GET'])
def index():
# data = "hello world"
return render_template('index.html') //使用的气短前端代码的路径为index.html（使用相对路径即可，render_template()函数会自动从templates文件夹中获取该index.html文件
# 定义路由和视图函数
@app.route('/query', methods=['POST','GET'])
def query():
# 获取前端发送的问句pip3 install pyltp
question = request.form.get('question') //从前端获取数据,question是数据的标签
data = "hello word"
return jsonify(data) //向前端返回数据，先将数据转换成json格式
//可在前端html代码中编写 function query(){ }函数来接收该数据
2.javascript代码的引用
有两种方式：
1. 内部脚本：直接在html文件中编写
在html的body中编写前后用script包裹，参考示例：
<body>
<scrip>
编写你的Javascrip代码
</scrip>
</body>
3. 外部脚本：在html中引用javascript文件
4.在html文件的body中 使用以下语句添加js文件
<!-- 其中src填入你所引用的js文件的路径，这里使用静态方式引用，将引用文件放在static文件夹中，flask会自动找到该文件-->
<!-- 如果在前端浏览器找不到该test.js文件，请检查前面的flask设置是否有误以及文件路径和文件名是否有误。 -->
<script src="../static/test.js"></script>
3759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
