关于前端:极简无废话非翻译Flaskvue例子

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

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

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

第一个小指标

咱们先实现“让后端找到前端”的指标。

前端配备

装置npm；
通过npm创立第一个vue的app，以下的创立办法来自vue3官网

npm init vue@latest

如果你相熟vue，个别要“运行”会在目录用npm run dev，然而npm run dev 命令只用做本地调试，共开发者预览页面。

同部署到服务器供其余终端拜访是不同的，如果要提供给其余浏览器或终端应用，则须要部署到具体的服务器才行。执行命令npm run build生成 dist文件夹，供后端用。
咱们间接在vue我的项目目录npm run build，能够看见新生成了一个目录dist。

后端筹备

装置Flaskpip install Flask，新建python文件后，间接复制粘贴最简略的flask服务.
上面代码的门路vue我的项目dist要自行批改！

from flask import Flask, jsonifyfrom flask import render_templateDEBUG = True app = Flask(__name__)dir_path_base='../web1/'app = Flask(__name__,static_folder=dir_path_base+'dist/assets',  # 这个中央要跟你vue我的项目dist目录绝对应template_folder = dir_path_base+"dist")  # 这里也是@app.route('/')def index():    return render_template('index.html',name='index') #应用模板插件，引入index.html。此处会主动Flask模板文件目录寻找index.html文件。if __name__ == '__main__':    app.run()```

曾经实现第一个指标

这样咱们间接启动Flask服务，拜访127.0.0.1:5000，Flask渲染的就是vue开发进去的界面了。

简略来说，须要应用npm run build（或者说vue的vite工具）来“翻译”成dist我的项目，而后后端去找他目录就行了。

上面实现他们数据交互的指标。

数据交互

前端筹备

我就间接用axio了，这个是vue前后端交互的选项之一，如果没有的话，装置下npm install axios
而后轻易在一个能前端能看到的页面，依据下方vue代码增加：
在什么外面就加什么。上面console.log为了调试用的。

<script setup>import axios from 'axios'</script><script>export default{  methods:{    test(){      axios.post('http://127.0.0.1:5000')      .then(res=>{        this.demo=res.data;        console.log(res.data);      })    }  }}</script><template>    Click <button @click="test()">here</button>   </template>

而后如果npm dev run，此时在页面点击button，console会提醒

“已拦挡跨源申请：同源策略禁止读取位于 http://127.0.0.1:5000/ 的近程资源。（起因：CORS 申请未能胜利）。状态码：(null)。”

这个CORS（Cross-Origin Resource Sharing），网络有详解，先按下不表。在后端改一下就能够。

呈现这个曾经表明能够从前端post去后端了。
那先临时npm run build打包一下，

后端

后端这边开启服务后，在前端点击button按钮，能够看到日志（我点击了4次）

而后你拿到post的货色，该怎么解决就怎么解决就行了。
这样子，从前端向后端POST数据曾经能够了。