介绍
Flask 是一个基于 Python 的 Web 后端框架。通过 Flask 可以快速写出一个 API 接口。MongoDB 是一个基于分布式文件存储的数据库。本文将介绍如何使用 Flask 和 MongoDB 实现简单的 Web 后端。
前端部分
由于涉及插值以及条件渲染，这里简单地使用到了 Vue.js 框架。首先进行框架引入：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
接着，创建基本的输入框和按钮：
<body>
<div id="app" class="main">
<h1>输入姓名查询学号</h1>
<!-- 值绑定，监听输入框的内容变化，如果 Input 内内容改变，data.id就改变为这个值 -->
<input v-model="id" type="text" placeholder="学号" />
<!-- @onclick 触发事件名，后面的函数在 method 中 -->
<button class="button" id="signIn" @click="Query">查询</button>
</div>
</body>
在这里，我们将数据用 v-model 方法绑定到 input 之上，当 input 的值发生变化时，数据值也会发生变化。当我们点击 button 时，我们将调用 Query 函数。
下面，创造 Vue 实例：
注意，上面的 div 被绑定了实例名 app。
<div id="app" class="main">
<!-- ... -->
</div>
那么，现在我们就可以在 script 中创建 Vue 实例了：
<script>
// 创建vue实例
const app = new Vue({
// 交代宿主是谁，id用 # 查询
el: "#app",
// 数据容器
data: {
id:"",
result:"",
},
// 函数方法
methods: {
Query() {
// ... 查询方法
}
},
})
</script>
在这里可以看到，我们在 data 中初始化了两个变量，分别是 id 和 result。id 用于存储输入框的值，result 用于存储查询结果。当 input 的值发生变化时，id 的值也会跟踪发生变化。
用 VScode 插件 Live Server 启动一个本地服务器，打开 index.html（或直接打开），可以看到如下界面：
Flask API接口
接下来，我们需要实现一个 API 接口，用于接收前端传来的数据，查询数据库，返回查询结果。
在 Python 中，import 用于导入模块，from 用于导入模块中的某个函数。这里需要 Flask 的 Flask 和 request 函数，用于实现http服务器。
from flask import Flask, request
为了服务器能被直接访问，我们需要设置跨域访问。
from flask_cors import CORS
CORS(app, resources=r'/*') # 注册 CORS, "/*" 允许访问所有api
接着，可以创建一个 Flask 实例：
app = Flask(__name__)
然后，我们需要创建一个路由，用于接收前端传来的数据，接受使用 GET 进行访问，访问路径为 /getname：
@app.route('/getname', methods=['GET'])
接着，我们需要获取前端传来的数据，这里我们需要用到 request 函数，它可以获取前端传来的数据：
def check():
# 默认返回内容，result是根据查询结果要返回的
return_dict = {'return_code': '200', 'return_info': '处理成功', 'result': False}
# 判断入参是否为空
if request.args is None:
return_dict['return_code'] = '5004'
return_dict['return_info'] = '请求参数为空'
# 告知前端，查询失败
return json.dumps(return_dict, ensure_ascii=False)
# 获取传入的参数
get_data = request.args.to_dict()
# 获取参数中名为 ID 的参数值
ID = get_data.get('ID')
# 对参数进行操作，用 ID 去查询数据库
return_dict['result'] = getMongo(ID)
# 返回查询结果
return json.dumps(return_dict, ensure_ascii=False)
在这里，还没有写查询数据库的方法，我们先把这个方法写出来一个简单的应答，然后一会再去实现查询数据库的方法。
def getMongo(ID):
# 这里是查询数据库的方法
# 这里先返回一个简单的应答
return True
最后，在主函数中，启动 Flask 服务器：
if __name__ == "__main__":
app.run(debug=True)
这里的 debug=True 是为了方便调试，可以在控制台看到错误信息。并在本地进行运行。
接口测试
这里，我们先不管数据库，对接口进行简单的测试。在这里，我使用 Apifox，进行接口测试。下载后打开。
点击新建团队：
然后，新建项目：
打开项目后，选择快捷请求：
在 Pycharm 中，运行 getname.py。
可以看到下方控制台提示，服务器已经启动。访问地址为 http://127.0.0.0:5000。我们复制这个地址，然后在 Apifox 中，粘贴到地址栏中，在地址后添加访问的接口名：/getname，填写 Params 参数 ID 的值，随便填一个，因为上面写了无论什么时候都返回 True，所以预期结果是 True，点击发送：
可以看到，下面的控制台提示，接口调用成功（200，OK），返回结果为 True。
现在，可以关闭 Apifox 了。
在前端中请求接口
上面 Vue 代码中，我们空了一个方法 Query()，这个方法就是用来请求接口的。现在我们使用 XMLHttpRequest 对象来请求接口。
首先初始化一个 XMLHttpRequest 对象：
const request = new XMLHttpRequest();
接着，去发起请求：
request.open("GET", "http://127.0.0.1:5000/getname" +"?ID="+ this.id);
这里的 GET 是请求方式，http://127.0.0.1:5000 是服务器地址，/getname 是接口名，?ID= 是参数名，this.id 是参数值。this.id 是在 Vue 中调用一个变量的方法。接着，监听请求状态：
request.onreadystatechange = () => {
// readyState 为 4 时，请求已完成，request.status 为 200 时，请求成功
if (request.readyState === 4 && request.status === 200) {
// 格式化返回值为json
const obj = JSON.parse(request.responseText);
// 打印来看看
console.log(obj);
// 让 data 里面的 result 变成这个值
this.result = obj.result;
// 打印来看看
console.log(this.result);
}
};
最后，发送请求：
request.send();
完整的 Query() 方法如下：
Query() {
console.log(this.id);
// 开始 http 请求
const request = new XMLHttpRequest(); // Ajax 初始化异步请求
// 发起 http 请求
request.open("GET", "http://127.0.0.1:5000/getname" +"?ID="+ this.id);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
// 格式化返回值为json
const obj = JSON.parse(request.responseText);
// 让 data 里面的 result 变成这个值
this.result = obj.result;
console.log(this.result);
}
};
request.send();
// end
}
在保持 Pycharm 运行的情况下，我们在浏览器中打开 index.html，输入 ID，点击查询，按F12查看控制台打印，可以看到服务器向前端返回了 一条应答，状态码为 200，OK，返回结果为 True。
MongoDB 数据库
倘若你不需要配置数据库，或者用 csv 本地文件代替数据库，可以跳过这一节。上面就够用了，你只需要将 MongoDB 函数改写成查询自己的 csv 文件即可。
注册 MongoDB 账号
MongoDB 数据库为每个用户提供了 512MB 的免费存储空间，你可以在 MongoDB Atlas 上注册一个免费的数据库。（用来存储你的任务数据完全足够了）
Mongo Atlas 提供云数据库服务，这意味着你可以在远程访问你的数据库，而不需要在本地搭建数据库。
账号注册
你首先需要注册一个 MongoDB 账号，点击 这里 注册。这可能需要你提供邮箱等个人信息。
创建数据库
登陆后，你将看到下面的界面：
点击右上角 Create 。
选择 shared 类型的集群，接着选择一家服务提供商，这里是亚马逊，当然，可以试一下微软的 Azure ，说不定国内访问更快。然后选择一个离你最近的地区，比如中国香港，点击 Create Cluster 。
点击右下角的 Create Cluster 。
在出现的窗口中，添加连接 IP 地址。我们需要允许从任何地方访问。因此，单击“允许从任何地方访问”按钮，然后单击“添加 IP 地址”进行设置。选择云环境，即Cloud Environment，IP 地址填写为 0.0.0.0。
接下来，我们需要创建一个用户来连接到此数据库。在“创建数据库用户”窗体上，输入自定义用户名、密码，然后单击“创建数据库用户”。请记住这个密码。
连接数据库
点击 Connect按钮，连接数据库。
选择 Connect your application ，然后选择 Python ，接着选择 3.12 or later 。
接着，出现了一个连接地址，不勾选 "Include full example" 这个地址就是你的数据库连接地址，你需要将它复制下来，稍后会用到。（请一定妥善保存）
链接格式如下：
mongodb+srv://YourName:<password>@cluster0.xxxxxx.mongodb.net/?retryWrites=true&w=majority
将其中的 <password> 替换为刚刚你输入的自定义密码。这个才是需要用到的代码，请妥善保存。
举例：
mongodb+srv://inannan:12345678@cluster0.xxxxxx.mongodb.net/?retryWrites=true&w=majority
创建数据集
点击集群名 Cluster0 进入集群。点击添加数据库：
图中有其他数据库，不用管。
创建成功：
插入几条示例数据：
重复几次，示例如下：
OK了。
现在我们来看看如何在 Python 中使用 MongoDB。
首先引入需要的依赖：
import json
from flask_cors import CORS
import pymongo
from bson import json_util
查询过程：
def getMongo(ID):
# 链接 MongoDB atlas
myclient = pymongo.MongoClient('mongodb+srv://inannan:12345678@cluster0.xxxxxx.mongodb.net/?retryWrites=true&w=majority') # 数据库的连接地址，改成你自己的
mydb = myclient['mydb'] # 数据库名称
mycol = mydb['db1'] # 集合名称
myquery = {"id": ID} # 查询条件
mydoc = mycol.find(myquery) # 查询结果
# 取出其中的数据格式为json
for x in mydoc:
# 将x转换为对象
x = json.loads(json_util.dumps(x))
print(x)
return x
这里，返回的是一个对象。
重新打开 Apifox，创建一个新的接口，接口地址为：/getname，请求方式为 GET。携带参数 ID，值为 201000000，因为上面在 Mongodb 中插入的数据中，有一个 id 为 201000000 的数据。所以这里就用这个值来测试。
由此可见，我们已经成功的从 MongoDB 中查询到了数据。
返回的结果是一个 json 数据，例如：
{
"return_code": "200",
"return_info": "处理成功",
"result": {
"_id": {"$oid": "635a918c1be53239a161f777"},
"id": "201000000",
"name": "JZ",
"class": "数媒20"
}
}
可以这样访问 name 的值：
result.name
让我们修改前端页面，将数据展示出来。首先创建结果显示框，使用条件渲染，当 result 有值时，才显示结果。
<div v-if="result">
姓名：{{result.name}}
<br/>
班级：{{result.class}}
</div>
Flask 多个接口
我们可以创建多个接口，例如：
@app.route('/getname', methods=['GET'])
def getname():
ID = request.args.get('ID')
result = getMongo(ID)
return jsonify(result)
@app.route('/getclass', methods=['GET'])
def getclass():
ID = request.args.get('ID')
result = getMongo(ID)
return jsonify(result)
在访问时，只需要在接口地址后面加上 /getname 或者 /getclass 即可。
扩展应用
这只是最简单的一个例子，实际上，我们可以在这个基础上做很多事情。例如：
- 实现 MongoDB 的增删改查操作，实现注册、登录等功能。
- 将多个数据存储到一个集合中，实现多个数据的查询。如爬取结果。
部署
腾讯云服务器部署 Flask 接口
腾讯云 Serverless 部署Flask接口
Ubuntu Nginx 部署 Flask 接口
Windows Nginx 部署 Flask 接口
Vercel 部署 Flask 接口