前端请求为POST但是后端始终收到的都是POST请求的问题及flask导致双花括号的语法冲突问题

项目场景：

在做flask项目时所遇到的问题做一个记录

1. 多个form表单导致的前端请求为POST但是后端始终收到的都是POST请求的问题
2. Vue语法与flask的jinja语法冲突问题

---

问题描述

1. 多个form表单导致的前端请求为POST但是后端始终收到的都是POST请求的问题

<form>
<form action="http://127.0.0.1:5000/fileFunction/upload" method="POST" enctype="multipart/form-data">
     <div class="form-inline">
         <div class="form-group">
             <input type="file" name="files[]" id="js-upload-files" @change="selectFile">
         </div>
         <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">上传
         </button>
     </div>
</form>
</form>

---

原因分析：

form 发送请求有两种方式，一种是GET另外一种是POST请求，都可以在method属性里面进行设置，但是假如说在上面那种情况下，button的type=submit情况无法确认提交方式为哪一种，form的默认提交方式为GET，因此会出现后端始终显示前端发送的GET请求。

解决方案：

只需要将最外层的form标签删除即可完成对后端的请求为POST的方式

---

问题描述

2. Vue语法与flask的jinja语法冲突问题

{{}}---导致的问题

---

原因分析：

在flask与Vue中都需要使用{{}}语法，但是这样就会造成语法冲突。

解决方案：

将对应Vue的语法格式进行更换即可

window.onload = function () {
    }

    const { createApp } = Vue

    createApp({
        delimiters:['{[', ']}'],
    })

设置dilimiters即可