【极简、无废话、非翻译】Flask+vue例子

分享时间：2023-03-29 11:37:00

数据来源：网络

提取密码：在线浏览

文件类型：文章

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

DEBUG = 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数据已经可以了。