关于前端:极简无废话非翻译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, 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 数据曾经能够了。

那更多的交互天然是看 axios 文档了，axios 能干什么，交互就能干什么。

axios 文档：https://axios-http.com/zh/docs/intro

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

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

第一个小指标

前端配备

后端筹备

曾经实现第一个指标

数据交互

前端筹备

后端

更多交互