flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）

使用POST向后台发送数据

Flask app修改

可以直接使用现有的路由处理函数来接收前端发来的数据，server/app.py中的all_res()修改如下：

@app.route('/resources', methods=['GET', 'POST'])
def all_res():response_object = {'status': 'success'}if request.method == 'POST':post_data = request.get_json()RESOURCES.append({'sn': post_data.get('sn'),'teacher': post_data.get('teacher'),'learnt': post_data.get('learnt')})response_object['message'] = '资源添加成功！'else:response_object['resources'] = RESOURCESreturn jsonify(response_object)

并从flask引入request：

from flask import Flask, jsonify, request

更改之后，启动或重启Flask服务器。

可以通过curl命令来测试POST：

curl -X POST http://localhost:5000/resources -d  '{"sn": "JUFE-069", "teacher": "雪美千夏", "learnt": "true"}'  -H 'Content-Type: application/json'

也可以使用工具Postman来测试POST是否工作。

在Postman中新建一个Request，如图，选择类型为POST，网址填 http://localhost:5000/resources，Body部分选raw，类型为JSON，并填入一个资源数据{"sn": "JUFE-069", "teacher": "雪美千夏", "learnt": "true"}，点击Send之后，可以看到下面返回200 OK和具体内容：

{"message": "资源添加成功！", "status": "success"
}

此时再在浏览器中访问 http://localhost:5000/resources ，可以看到多了一条记录：

具体如何使用curl或如何安装和使用Postman，可以参考网上相关介绍。

Vue app修改

下面，需要为页面添加输入模态框(modal)。打开client/src/components/Resources.vue，在</div></template>前面添加如下代码：

<b-modal ref="addResModal"id="res-modal"title="添加新资源"hide-footer><b-form @submit="onSubmit" @reset="onReset" class="w-100"><b-form-group id="form-sn-group"label="编号："label-for="form-sn-input"><b-form-input id="form-sn-input"type="text"v-model="addResForm.sn"requiredplaceholder="输入编号"></b-form-input></b-form-group><b-form-group id="form-teacher-group"label="老师："label-for="form-teacher-input"><b-form-input id="form-teacher-input"type="text"v-model="addResForm.teacher"requiredplaceholder="输入老师姓名"></b-form-input></b-form-group><b-form-group id="form-learnt-group"><b-form-checkbox-group v-model="addResForm.learnt" id="form-checks"><b-form-checkbox value="true">已学习？</b-form-checkbox></b-form-checkbox-group></b-form-group><b-button type="submit" variant="primary">提交</b-button><b-button type="reset" variant="danger">重置</b-button></b-form>
</b-modal>

然后更新<script></script>的内容：

<script>
import axios from 'axios';export default {data() {return {resources: [],addResForm: {sn: '',teacher: '',learnt: [],},};},methods: {getResources() {const path = 'http://localhost:5000/resources';axios.get(path).then((res) => {this.resources = res.data.resources;}).catch((error) => {// eslint-disable-next-lineconsole.error(error);});},addRes(payload) {const path = 'http://localhost:5000/resources';axios.post(path, payload).then(() => {this.getResources();}).catch((error) => {// eslint-disable-next-lineconsole.log(error);this.getResources();});},initForm() {this.addResForm.sn = '';this.addResForm.teacher = '';this.addResForm.learnt = [];},onSubmit(evt) {evt.preventDefault();this.$refs.addResModal.hide();let learnt = false;if (this.addResForm.learnt[0]) learnt = true;const payload = {sn: this.addResForm.sn,teacher: this.addResForm.teacher,learnt,};this.addRes(payload);this.initForm();},onReset(evt) {evt.preventDefault();this.$refs.addResModal.hide();this.initForm();},},created() {this.getResources();},
};
</script>

在<template>中找到添加资源按钮的那个button标签，修改如下：

<button type="button" class="btn btn-info btn-sm" v-b-modal.res-modal>添加资源</button>

测试一下添加资源：

下一节，我们将会在页面上显示添加资源成功的提示。

王加加：用Flask和Vue制作一个单页应用（六）zhuanlan.zhihu.com