【极简】vue+flask简单代码

Yonggie

2023-03-29

看了很多，所谓的“初体验、实战”，里面统统都是先做什么后座什么，连为什么都不解释，每个组件是干什么的为什么要这样做，再不就是后面买课，再不就是事无巨细全部截图，大段大段的图片，篇幅巨长，真的很难把握重点，再不就是操作一些跟这个问题完全无关的下载什么包什么插件之类的，甚至项目都是臃肿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服务.
下面代码的路径要自行修改！

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()```

开启，后端默认在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>

然后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()[key]可以获取数据。

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

思想

交互

写一写后端

前端写一写

交互

后端获取数据

更多交互