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

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

更多交互

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

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]])
48 声望
4 粉丝
0 条评论
推荐阅读
【FATE联邦学习】高度costumized定制联邦学习的所有组件 costumize all所有步骤
使用自己的数据集homo场景: [链接]hetero场景:[链接]速记:在federatedml/nn/dataset加入自己的数据集.py使用自己的模型homo场景:[链接]hetero需要自定义upper layer和bottom layer的模型,所以自带customizat...

Yonggie阅读 157

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs39阅读 4.7k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.8k评论 9

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
48 声望
4 粉丝
宣传栏