打通Vue3+Flask(python3)+Mysql-实现简单数据交互

news2024/12/24 11:39:16

一、需要准备的工具

下载python3,Vscode,pycharm(这里用的社区版),phpstudy_pro,Node.js(建议下载长期支持版本,版本不宜过低,比如18,20),Vue.js(npm install -g @vue/cli,下载速度慢可以设置淘宝镜像)。

这里不具体说明下载步骤,除了python3环境的配置(自行查阅资料),其余工具常规安装即可。

二、查看基本环境。

win+r输入cmd,打开小黑窗,分别验证node,Vue,python。如果如下图所示,说明基本环境是没有问题的。

三、搭建前端Vue框架

1、可以专门新建一个文件夹,用来存放前后端文件。打开新建文件夹,在地址栏选中内容,输入cmd,回车。输入vue create 项目名称(vue create vueproject),我们暂都不考虑命名规范的问题。

2、键盘上下键可以选择vue版本,这里选择第三项,自定义,选中后回车即可。

3、这里选择版本三。接下来我们一直回车即可,不做过多说明。

4、成功之后,是如下界面。

5、接下来,输入cd vueproject,进入当前项目目录,输入npm i,下载项目所需要的依赖。

6、输入npm run serve,启动项目。

7、成功之后,可以在浏览器输入地址,初始页面如下:至此,vue框架就算搭建完成。

8、我们连按两次Ctrl+C退出项目,使用Vscode打开刚才新建的vue项目(将新建的文件夹拖入Vscode即可)。然后,选中项目任意一项,我们右键选择在集成终端中打开。这里我们需要使用axios工具(用来发送请求),所以在终端输入npm i下载axios。

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>


四、搭建Flask框架

1、打开pycharm社区版,选择文件,新建项目,按照要求选择项目路径即可。

我这里是中文版,如果有需要,可以在设置里面的插件,下载中文包,然后重启pycharm即可,插件如下。

2、这里需要使用相应的工具,我们先下载。在设置中找到如下位置,选择标红位置进行添加。

然后搜索flask,然后选择安装软件包。同样的方式,下载Flask-Cors(解决跨域),以及Flask-MYSQL(连接数据库)。

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是为了方便修改代码之后,能够不重启项目就能够更新,否则,每次更改代码都需要重新启动项目
    # 其他参数的设置可以查阅文档,这里越简单越好

点击运行,可以看到如下结果(警告这里暂时不管),将地址在浏览器打开。

4、这里出现的http://127.0.0.1:5000就是我们在vue.config.js文件为解决跨域需要输入的接口前缀(第二大步第9小步那里)。浏览器打开结果如下。

五、打通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、此时,我们先查看前后端是否能够正常启动(如果不能,重启项目或检查代码是否有错)。刷新前端页面,点击测试按钮,可以看到控制已经收到传过去的数据。

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是为了方便修改代码之后,能够不重启项目就能够更新,否则,每次更改代码都需要重新启动项目
    # 其他参数的设置可以查阅文档,这里越简单越好

刷新前端页面,点击发送数据,前端控制台可以看到

后端终端可以看到已接收到前端传来的数据(只看结果,不对数据进行处理)

至此,前后端打通,也及其简单的实现了前后数据的交互。

六、连接MYSQL数据库

1、这里我们使用的是小皮系统(个人觉得比较简单好用,而且不用单独区下载MYSQL)。首先打开软件。这里启动的是MYSQL5.7

2、数据库用户,密码的查看以及密码的修改。

3、这里我们下载如下工具,方便操作数据库表。下载完后,直接打开。

4、新建会话,输入刚刚查看的用户名与密码,以及端口号(默认即可),点击打开即可

5、新建数据库message,以及表user。(这里不具体说明,不同的工具建立数据库以及数据库表大同小异,不会可以查阅相关资料,这里不一步一步说明)。一般是右键新建数据库,然后选中数据库,选择创建新的表,然后设计需要的字段,注意的是每一个表需要设计主键(选中行,右键创建新的索引-PRIMARY)。

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的数据

插入数据,在app.py文件添加如下代码

# 插入数据
sql="insert into user(id,username,password)values(5,'杜甫','6789')"
try:
    curor.execute(sql)
    db.commit()
except:
    db.rollback()

db.close()

刷新数据库表,发现数据添加成功。(删,改可以自行测试,这里不一一说明)

自此,后端与数据库打通。前面已经简单说明后端如何给前端传递数据,这里后端能够拿到数据库数据,自然就可以传递给前端,然后进行页面渲染。

到这里,Vue+Flask+MySQL已经打通了,接下来就可以正式进行项目开发,编写符合规范的代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2065844.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LearnOpenGL——HDR、Bloom学习笔记

LearnOpenGL——HDR、Bloom学习笔记 HDR一、基本概念二、浮点帧缓冲 Floating Point Framebuffer三、色调映射 Tone MappingReinhard色调映射曝光色调映射 Bloom一、提取亮色二、高斯模糊三、将两个纹理进行混合 HDR 一、基本概念 显示器被限制只能显示0.0-1.0的颜色&#xf…

“AI+Security”系列第2期(四):AI/机器学习供应链攻击

近日&#xff0c;由安全极客、Wisemodel 社区和 InForSec 网络安全研究国际学术论坛联合主办的“AISecurity”系列第二期线上活动如期举行。此次活动的主题为“对抗&#xff01;大模型自身安全的攻防博弈”&#xff0c;旨在深入探讨和分析人工智能和机器学习领域中的安全问题。…

武汉流星汇聚:亚马逊返校季学习用品热销,精准布局助力卖家成功

随着夏日的余温逐渐消散&#xff0c;新学期的钟声悄然临近&#xff0c;家长与学生们纷纷投入到新学期的准备工作中&#xff0c;而亚马逊作为全球领先的电商平台&#xff0c;再次迎来了学习用品销售的火爆季节。数据显示&#xff0c;过去30天内&#xff0c;“back to school”&a…

罗德与施瓦茨(RS)RTP164、RTP134,RTP084,RTP064示波器

罗德示波器系列RTP164租赁RTP134收购RTP084/RTP064/RTP034 概述 数字示波器是数据采集&#xff0c;A/D转换&#xff0c;软件编程等一系列的技术制造出来的高性能示波器&#xff0c;是电子类学科设计、制造和维修产品过程中不可或缺的工具。R&SRTP164示波器可以提供16GHz的…

U盘安装Ubuntu24.04,乌邦图,UltralISO

文章目录 前言通过UltraISO&#xff0c;制作启动U盘下载镜像制作工具UltraISO(软碟通)下载ubuntu镜像文件制作启动U盘 安装ubuntu设置root密码&#xff0c;并登陆root 前言 在Ubuntu作为主流的linux系统&#xff0c;有时候使用VMware安装使用&#xff0c;总归有一定的性能损耗…

深度学习 --- VGG16各层feature map可视化(JupyterNotebook实战)

VGG16模块的可视化 VGG16简介&#xff1a; VGG是继AlexNet之后的后起之秀&#xff0c;相对于AlexNet他有如下特点&#xff1a; 1&#xff0c;更深的层数&#xff01;相对于仅有8层的AlexNet而言&#xff0c;VGG把层数增加到了16和19层。 2&#xff0c;更小的卷积核&#xff01;…

大数据-98 Spark 集群 Spark Streaming 基础概述 架构概念 执行流程 优缺点

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

C语言与Python的区别

一、言语类型Python是一种基于解说器的言语&#xff0c;解说器会逐行读取代码&#xff1b;首先将Python编译为字节码&#xff0c;然后由大型C程序解说&#xff1b;C是一种编译言语&#xff0c;完好的源代码将直接编译为机器代码&#xff0c;由CPU直接履行。 二、内存办理Python…

寄蜉蝣于天地,渺沧海之一粟

工具 1、Zulip 一个开源的群聊软件&#xff0c;有服务端和各种平台的客户端。 2、win-vind 这个工具为 Windows 系统提供 Vim 风格的快捷键&#xff0c;也可以把它当作 Windows 的快捷键设定器。 3、canvas-confetti 在网页上抛洒五彩纸屑的 JS 库。 4、WR.DO 一个开源的 W…

让老周都道歉的360手表,难道是AI模型的锅吗?

360集团创始人、董事长周鸿祎在微博发文&#xff0c;对360儿童手表出现错误问答一事致歉。周鸿祎表示&#xff0c;今天在网上看到视频反映我们某型号的儿童手表出现错误的问答&#xff0c;给用户带来不适&#xff0c;我们表示真诚的歉意。 经过快速检查&#xff0c;出现问题的这…

快手主站前端工程化探索:Gundam 脚手架在新春除夕项目中的实践与展望

一、背景与目标 1.1 背景 Gundam 作为快手主站前端的脚手架&#xff0c;成立于2022年底。当时主站前端的整体工程化建设&#xff0c;从开发准备阶段到开发、联调、测试、部署、运维整个全流程&#xff0c; 其中偏后链路的持续集成和持续部署、错误监控排障&#xff0c;依赖于…

中科服务器磁盘未断电状态被人拔插导致raid故障,安装系统找不到系统盘 修复raid再次安装系统成功

1&#xff0c;根据提示按del进入bios 直接回车 改成good状态保存&#xff08;多块盘的话重复此操作即可&#xff0c;直到让盘的状态显示good或者online&#xff09; 然后回到上级导入raid信息 raid信息导入 设置成yes&#xff0c;然后保存退出 然后他会自己同步数据&…

SSM健康生活博客小程序—计算机毕业设计源码23497

摘 要 本文设计了一种基于SSM框架的健康生活博客小程序&#xff0c;为人们提供了运动视频教学、博客信息分享&#xff0c;用户能够方便快捷地查看资讯、搜索健康方面的相关信息、还能发布个人生活博客等。健康生活博客小程序采取面对对象的开发模式进行软件的开发和硬体的架设&…

基于x86 平台opencv的图像采集和seetaface6的性别识别功能

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、开发流程3.1 编写测试3.2 配置资源文件3.2 验证功能一、概述 本文档是针对x86 平台opencv的图像采集和seetaface6的性别识别功能,opencv通过摄像头采集视频图像,将采集的视频图像送给seetaface6的性别识别模块从而实现…

未来城市的科技展望

未来城市&#xff0c;‌将是科技与人文深度融合的产物&#xff0c;‌展现出一个全方位智能化、‌绿色生态且可持续发展的全新面貌。‌随着物联网、‌人工智能等技术的飞速发展&#xff0c;‌未来城市的轮廓逐渐清晰&#xff0c;‌它将为我们带来前所未有的生活体验。‌ 在未来…

Linux驱动学习之点灯(六,利用平台设备总线)

平台设备总线 平台设备总线是内核虚拟的一条总线&#xff0c;早期没有设备树时&#xff0c;通过名字匹配设备信息&#xff0c;如今有设备树通过设备树里的complitable属性匹配&#xff0c;下图是平台设备总线的结构体描述。 much函数是完成信息匹配的&#xff0c; 总线就是使用…

Python 编程 之 tkinter : 导航栏与局部页面切换

import tkinter as tk class App: def __init__(self, root): self.root root self.root.title("导航栏与局部页面切换") self.root.geometry(800x500)self.root.minsize(width800, height300)# 创建导航栏 self.navbar tk.Frame(self.root, bggray) self.n…

TIM输出比较之PWM驱动直流电机应用案例

文章目录 前言一、应用案例演示二、电路接线图三、应用案例代码四、应用案例分析4.1 初始化PWM模块4.1.1 RCC开启时钟4.1.2 配置时基单元4.1.3 配置输出比较单元4.1.4 配置GPIO4.1.5 运行控制 4.2 PWM输出模块4.3 电机模块4.3.1 Motor初始化模块4.3.2 电机调速模块 4.4 主程序 …

0基础学习Python路径(21)Python NameSpaceScope

命名空间定义了在某个作用域内变量名和绑定值之间的对应关系&#xff0c;命名空间是键值对的集合&#xff0c;变量名与值是一一对应关系。作用域定义了命名空间中的变量能够在多大范围内起作用。 命名空间在 Python 解释器中是以字典的形式存在的&#xff0c;是以一种可以看得…