打通Vue3+Flask（python3）+Mysql-实现简单数据交互
一、必要预备的工具下载python3，Vscode，pycharm（这里用的社区版），phpstudy_pro，Node.js（建议下载恒久支持版本，版本不宜过低，比如18,20），Vue.js（npm install -g @vue/cli，下载速度慢可以设置淘宝镜像）。
这里不具体说明下载步骤，除了python3情况的配置（自行查阅资料），别的工具常规安装即可。
二、检察基本情况。
win+r输入cmd，打开小黑窗，分别验证node，Vue，python。如果如下图所示，说明基本情况是没有标题的。
https://i-blog.csdnimg.cn/blog_migrate/51e92b1b24e3ba19fd5fd28476ea96fe.png
三、搭建前端Vue框架
1、可以专门新建一个文件夹，用来存放前后端文件。打开新建文件夹，在地址栏选中内容，输入cmd，回车。输入vue create 项目名称（vue create vueproject），我们暂都不考虑定名规范的标题。
https://i-blog.csdnimg.cn/blog_migrate/c5a11139f7d2f2bac7438695d4fdefa5.png
2、键盘上下键可以选择vue版本，这里选择第三项，自界说，选中后回车即可。
https://i-blog.csdnimg.cn/blog_migrate/966012c9b5c3fd870dceb3fed37b6317.png
3、这里选择版本三。接下来我们一直回车即可，不做过多说明。
https://i-blog.csdnimg.cn/blog_migrate/5cac5fb3698184b52112d6f3cb6df71d.png
4、成功之后，是如下界面。https://i-blog.csdnimg.cn/blog_migrate/96fea60d2bd9ffd772213f2bd7b28648.png
5、接下来，输入cd vueproject，进入当前项目目次，输入npm i，下载项目所必要的依靠。
https://i-blog.csdnimg.cn/blog_migrate/582a0394e37a8af6fbe7eca58b618f51.png
6、输入npm run serve，启动项目。
https://i-blog.csdnimg.cn/blog_migrate/465b3f2c142611db105a2903526a1423.png
7、成功之后，可以在浏览器输入地址，初始页面如下：至此，vue框架就算搭建完成。
https://i-blog.csdnimg.cn/blog_migrate/15964880d841752faa6418aca42d75ec.png
8、我们连按两次Ctrl+C退出项目，使用Vscode打开刚才新建的vue项目（将新建的文件夹拖入Vscode即可）。然后，选中项目恣意一项，我们右键选择在集成终端中打开。这里我们必要使用axios工具（用来发送请求），以是在终端输入npm i下载axios。
https://i-blog.csdnimg.cn/blog_migrate/ffa321bb15ee8c9e16daa4079e880f53.png
9、接着解决CORS跨域（数据交互时会用上）。找到vue.config.js文件。输入以下代码。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
//主要是这部分
devServer: {
proxy: {
'/api': {
//对应的接口前缀，填入你对应的前缀，后面搭建Flask时会说明
target: 'http://127.0.0.1:5000',//这里填入你要请求的接口的前缀
ws:true,//代理websocked
changeOrigin:true,//虚拟的站点需要更管origin
secure: false, //是否https接口
pathRewrite:{
'^/api':''//重写路径
}
}
}
}
})
10、为了可以大概简单的表现打通的效果，我们将App.vue文件，做如下修改（只是为了方便测试，代码无现实意义）。然后在集成终端输入指令npm run serve，启动项目，看是否可以大概正常启动。
<template>
<h1>Vue3</h1>
<button @click="test()">测试按钮</button>
</template>
<script setup>
function test(){
console.log(111111)
}
</script>
https://i-blog.csdnimg.cn/blog_migrate/c2b443975842aa2cc5871b7dd430b1ef.png
四、搭建Flask框架
1、打开pycharm社区版，选择文件，新建项目，按照要求选择项目路径即可。
https://i-blog.csdnimg.cn/blog_migrate/ec83fb0db56ac5b6b91016d44e9f9626.png
我这里是中文版，如果有必要，可以在设置内里的插件，下载中文包，然后重启pycharm即可，插件如下。
https://i-blog.csdnimg.cn/blog_migrate/69aea0d679c0c104f1de8df2d1a8cac8.png
2、这里必要使用相应的工具，我们先下载。在设置中找到如下位置，选择标红位置进行添加。
https://i-blog.csdnimg.cn/blog_migrate/19b22704bbf5d08650c22bf30719b121.png
然后搜索flask，然后选择安装软件包。同样的方式，下载Flask-Cors（解决跨域），以及Flask-MYSQL（连接数据库）。
https://i-blog.csdnimg.cn/blog_migrate/c495da7122f66408e85d0961cba4d90d.png
3、在文件夹下新建一个app.py文件，同时输入以下代码
from flask import Flask
app=Flask(__name__)
@app.route('/')
def index():
return 'Hello Flask!!!'
if __name__=="__main__":
app.run(debug=True)
# debug==True是为了方便修改代码之后，能够不重启项目就能够更新，否则，每次更改代码都需要重新启动项目
# 其他参数的设置可以查阅文档，这里越简单越好
点击运行，可以看到如下效果（告诫这里暂时不管），将地址在浏览器打开。
https://i-blog.csdnimg.cn/blog_migrate/c841f7bb6df4a8d6456e8eae02104f00.png
4、这里出现的http://127.0.0.1:5000就是我们在vue.config.js文件为解决跨域必要输入的接口前缀（第二大步第9小步那边）。浏览器打开效果如下。
https://i-blog.csdnimg.cn/blog_migrate/9ea20414ed40d6dc36b1da9fc4cd7b76.png
五、打通Vue与Flask
到这里，我们前后两个框架就搭建好了，也都启动了项目，接下来将它们打通。我们这里把Vue搭建的称为前端，Flask搭建的称为后端。这里我们前后端都必要启动起来。（涉及的代码不考虑健壮性等，只是为了测试）
如果中途改了配置文件，必要重新启动项目，以便代码见效。
1、打开前端，修改App.vue 内里的代码。
<template>
<h1>Vue3</h1>
<button @click="test()">测试按钮</button>
</template>
<script setup>
import axios from 'axios';
function test(){
axios.get('/http://127.0.0.1:5000/api/axios').
then(res=>{
console.log(res)
})
}
</script>
2、打开后端，修改app.py文件
from flask import Flask
from flask_cors import CORS
app=Flask(__name__)
CORS(app)
@app.route('/')
def index():
return 'Hello Flask!!!'
@app.route('/api/axios')
def msg():
return '需要传递给前端的数据'
if __name__=="__main__":
app.run(debug=True)
# debug==True是为了方便修改代码之后，能够不重启项目就能够更新，否则，每次更改代码都需要重新启动项目
# 其他参数的设置可以查阅文档，这里越简单越好
3、此时，我们先检察前后端是否可以大概正常启动（如果不能，重启项目或检查代码是否有错）。革新前端页面，点击测试按钮，可以看到控制已经收到传过去的数据。
https://i-blog.csdnimg.cn/blog_migrate/29ab593509b11ab2bb1523b5a1d0760e.png
4、发送前端数据到后端，修改App.vue代码。
<template>
<h1>Vue3</h1>
<button @click="test()">测试按钮</button>
<button @click="send()">发送数据</button>
</template>
<script setup>
import axios from 'axios';
function test(){
axios.get('http://127.0.0.1:5000/api/axios').
then(res=>{
console.log(res)
})
}
function send(){
axios.post('http://127.0.0.1/api/msg',{name:'lily',age:23,school:'麻省理工'}).
then(res=>{
console.log(res)
})
}
</script>
修改后端app.py文件
from flask import Flask,request
from flask_cors import CORS
app=Flask(__name__)
CORS(app)
@app.route('/')
def index():
return 'Hello Flask!!!'
@app.route('/api/axios')
def msg():
return '需要传递给前端的数据'
@app.route('/api/msg',methods={'POST'})
def message():
if request.data:
res=request.data
print(res)
# 这里传过来的是bytes类型数据，所以简单处理了一下，但这里主要说明数据是成功传输了过来
res1=res.decode('utf-8')
print(res1)
return '获取数据成功'
else:
return '没有数据'
if __name__=="__main__":
app.run(debug=True)
# debug==True是为了方便修改代码之后，能够不重启项目就能够更新，否则，每次更改代码都需要重新启动项目
# 其他参数的设置可以查阅文档，这里越简单越好
革新前端页面，点击发送数据，前端控制台可以看到
https://i-blog.csdnimg.cn/blog_migrate/97f6799cf1a3271e3fa7528a7fd2c32e.png
后端终端可以看到已吸收到前端传来的数据（只看效果，不对数据进行处置惩罚）
https://i-blog.csdnimg.cn/blog_migrate/0fbe5fa97563e94b6005d29d3f659dd0.png
至此，前后端打通，也及其简单的实现了前后数据的交互。
六、连接MYSQL数据库
1、这里我们使用的是小皮体系（个人觉得比较简单好用，而且不用单独区下载MYSQL）。首先打开软件。这里启动的是MYSQL5.7
https://i-blog.csdnimg.cn/blog_migrate/f90e3ee20efd921a422baaf1b13e5687.png
2、数据库用户，暗码的检察以及暗码的修改。
https://i-blog.csdnimg.cn/blog_migrate/6edb4b6b9bcca154a69809fae7d1e293.png
3、这里我们下载如下工具，方便操作数据库表。下载完后，直接打开。
https://i-blog.csdnimg.cn/blog_migrate/306bb17bdb49ae432421cf19f4811333.png
4、新建会话，输入刚刚检察的用户名与暗码，以及端口号（默认即可），点击打开即可
https://i-blog.csdnimg.cn/blog_migrate/702b9f5ca9266a66a2c76c87f1922922.png
5、新建数据库message，以及表user。（这里不具体说明，不同的工具创建数据库以及数据库表大同小异，不会可以查阅相关资料，这里不一步一步说明）。一般是右键新建数据库，然后选中数据库，选择创建新的表，然后设计必要的字段，注意的是每一个表必要设计主键（选中行，右键创建新的索引-PRIMARY）。
https://i-blog.csdnimg.cn/blog_migrate/a59c604e248afa16706c314665ffac73.png
https://i-blog.csdnimg.cn/blog_migrate/952c257f3a0b0939f33cfe2b29897881.png
6、修改后端app.py文件
from flask import Flask, request
from flask_cors import CORS
# 新添加内容
import pymysql
# 连接
db = pymysql.connect(
# 这里输入自己的地址，数据库名，用户名，密码
host='127.0.0.1',
user='root',# 用户名
password='111111',# 密码
database='message'# 数据库名
)
curor = db.cursor()
# 执行sql语句
curor.execute('select * from user')
# 获取数据
res = curor.fetchall()
print(res)
#关闭数据库
db.close()
app = Flask(__name__)
CORS(app)
@app.route('/')
def index():
return 'Hello Flask!!!'
@app.route('/api/axios')
def msg():
return '需要传递给前端的数据'
@app.route('/api/msg', methods={'POST'})
def message():
if request.data:
res = request.data
print(res)
# 这里传过来的是bytes类型数据，所以简单处理了一下，但这里主要说明数据是成功传输了过来
res1 = res.decode('utf-8')
print(res1)
return '获取数据成功'
else:
return '没有数据'
if __name__ == "__main__":
app.run(debug=True)
# debug==True是为了方便修改代码之后，能够不重启项目就能够更新，否则，每次更改代码都需要重新启动项目
# 其他参数的设置可以查阅文档，这里越简单越好
点击运行，如下，已经从数据库中查询到表user的数据
https://i-blog.csdnimg.cn/blog_migrate/8f41541e53d7789c0e07390cfc610869.png
插入数据，在app.py文件添加如下代码
# 插入数据
sql="insert into user(id,username,password)values(5,'杜甫','6789')"
try:
curor.execute(sql)
db.commit()
except:
db.rollback()
db.close()
革新数据库表，发现数据添加成功。（删，改可以自行测试，这里不逐一说明）
https://i-blog.csdnimg.cn/blog_migrate/03d1e1992642914fd680a0f6101921cb.png
自此，后端与数据库打通。前面已经简单说明后端如何给前端通报数据，这里后端可以大概拿到数据库数据，自然就可以通报给前端，然后进行页面渲染。
到这里，Vue+Flask+MySQL已经打通了，接下来就可以正式进行项目开辟，编写符合规范的代码。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]