【极简、无废话、非翻译】Flask+vue的开发和部署_flask框架如何一起部署,但是前端不用后端渲染呢?

作者：盐析白兔 | 2024-02-07 17:18:26

踩

flask框架如何一起部署,但是前端不用后端渲染呢?

前言

看了很多，所谓的“初体验、实战”，里面统统都是先做什么后座什么，连为什么都不解释，每个组件是干什么的为什么要这样做，再不就是后面买课，再不就是事无巨细全部截图，大段大段的图片，篇幅巨长，真的很难把握重点，再不就是操作一些跟这个问题完全无关的下载什么包什么插件之类的，甚至项目都是臃肿as fuck的代码，乱七八糟的，真的糟心。

这分明是【很简单】的一个【小问题】，何必整那么复杂。

我默认读者入门vue，也入门flask，但是不了解他们俩的交互怎么写法。

开发阶段

思想

我自己是之前写过Flask，每个函数都对应一个路由，去渲染界面，适应这种“路由思想”，但是那种情况只适合小平快的小项目。都用vue了，前后端要真正“分离”了，所以后端是不管界面跳转和路由的。

前端要“包揽路由”。vue有vue-router包，能够管理前端网页页面的各种“跳转”，所以真正跟后端flask交互的，只是一些ajax，所以flask那一端只写与ajax交互的逻辑就可以了，每个请求url不再需要render_template，而是直接返回json data。

vue如何实现页面的跳转？可以参考这个demo和官方文档

交互

写一写后端

安装Flaskpip install Flask，新建python文件后，直接复制粘贴最简单的flask服务.
下面代码的路径vue项目dist要自行修改！

from flask import Flask, jsonify

DEBUG = True
 
app = Flask(__name__)

dir_path_base='../web1/'
app = Flask(__name__,
static_folder=dir_path_base+'dist/assets',  
template_folder = dir_path_base+"dist")  # 这里其实写不写都无所谓

@app.route('/axios')
def handle_ajax():
    return "good"

if __name__ == '__main__':
    app.run()```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

开启，后端默认在127.0.0.1:5000上服务的

前端写一写

vue的ajax使用axios包，相当简单，导入组件后直接axios.post(url,data)就可以了。对axios的使用可以参考官方文档
如果没有安装的话，在前端项目那里安装下npm install axios
然后随便在一个能前端能看到的页面，根据下方vue代码添加：
在什么里面就加什么。下面console.log为了调试用的。

<script setup>
import axios from 'axios'
</script>

<script>
export default{
  methods:{
    test(){
    	let data={
    		"1231":"123"
    	}
      axios.post('http://127.0.0.1:5000/axios',data)
      .then(res=>{
      		//console里面打印后端来的response数据
        console.log(res.data);
      })
    }
  }
}

</script>
<template>
    Click <button @click="test()">here</button>   
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

然后npm dev run，服务vue的程序会在127.0.0.1:5173服务。

交互

此时在页面点击button，console会提示

“已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:5000/ 的远程资源。（原因：CORS 请求未能成功）。状态码：(null)。”

因为一般浏览器把跨域请求的localhost的cors禁止了。。这个CORS（Cross-Origin Resource Sharing），网络有详解，先按下不表。因为axios如果不写具体url路径只写相对路径的话，默认是在同一个socket下请求的，我们axios post那里写的是5000端口，但是vue项目本身是在5173端口，这是跨域了，所以被浏览器拦下了。

那要开放这个很简单，可以调整浏览器设置，可以添加插件等。我使用的添加插件，使用了火狐浏览器的CORS Everywhere。chrome应该也有类似的，查一下安装就行。

插件弄好后，点击按钮，出现
在这里插入图片描述
浏览器console那边应该也会出现 data ok
那这样前端后端就交互成功了。

后端获取数据

刚刚我们用axios post了data，里面是一个json。
在后端用requests.get_json()可以获取json字典数据，然后再用key就可以取得数据。
request.form.get(key)可以获得form表单数据

然后你拿到post的东西，该怎么处理就怎么处理就行了。

部署阶段

我将要用Flask+gunicorn+nginx进行部署。其他的语言应该也有自己的一套工具。

工具和关系

nginx是http服务器；gunicorn是实现Python统一规范格式（WSGI）的解析HTTP请求的网关服务。这几个工具的关系是这样：
在这里插入图片描述

上图的server就是nginx，app是flask，browser就算是vue的静态页面，gunicorn算是wsgi的实现吧，所以在部署阶段，没办法像调试阶段可以直接vue与flask直接交互（npm dev命令简化了一堆东西）。

跨域问题

由于flask是一个服务，http服务器也是一个服务，二者是同一个ip下不同的端口。在调试时可以通过插件解决跨域cors问题，而部署环境会由于不安全而禁止跨域，具体可以看这里。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/66547