初识FlaskMySQL实现前后端通信 全栈开发之路——后端篇（1）

全栈开发一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：介绍项目文件意义、组件结构与导入以及setup的引入。
第三篇：setup语法，设置响应式数据。
第四篇：数据绑定、计算属性和watch监视
第五篇 : 组件间通信及知识补充
第六篇：生命周期和自定义hooks
第七篇：路由
第八篇：传参
第九篇:插槽，常用api和全局api。

从本篇开始，我们进入后端的学习，本篇将讲述flask的基本写法以及后端与数据库的互联和数据通信。

文章目录

  • 一、简介与库
  • 二、基本示范
    • 1.manager主页文件
    • 2.测试获取
    • 3.加入数据库
  • 三、数据库
    • 1.配置数据库
    • 2.查询数据库
    • 3.后端传输数据库数据给前端

一、简介与库

我们的后端选择Flask。
Flask是一个轻量级Web应用框架，适用于开发小型至中型的Web应用，有以下优点。

  1. 简单易学：Flask的API设计简洁明了，学习和上手容易。
  2. 轻量级灵活：核心功能精简。开发者可以根据需要选择适合自己项目的扩展，使得框架更加灵活。
  3. 易于扩展：Flask提供了丰富的扩展库，可以轻松集成常用的功能，如数据库访问、表单验证、身份认证等。
  4. 开发者可以根据需求选择适合自己项目的扩展，快速实现功能。
  5. 模板引擎支持：使得前后端分离更加方便。
  6. 多种数据库支持：如SQLite、MySQL、PostgreSQL等。
  7. 自动化测试：Flask提供了测试客户端和测试工具，方便开发者进行自动化测试。

要使用flask，先安装一下这几个flask相关库，版本不限。

二、基本示范

1.manager主页文件

我们打开python ide（pycharm/vscode等都行）
我们先创建manage.py文件（我的在social下），作为我们主页面的后端文件。

from flask import Flask,jsonify
from flask_cors import CORS

我们先导入库，jsonify将py数据转换为json数据，传给前端接口
CORS：跨域，因为有浏览器的同源策略，不同协议、域名、端口不能通信，我们要用cors来通信

app = Flask(__name__)
app.config["JSON_AS_ASCII"] = False

先建立对象，然后转码，老外跟我们用的不一样，不改会乱码,如果有中文你要加上。

CORS(app,cors_allowed_orgins = "*")

CORS配置跨域,*表示所有人

@app.route('/', methods=['GET'])
def index():res = {"msg" : "你好，这里是后端入口"}return jsonify(res)

以上代码是配置路由 ,/是首页 methods表示请求方式：get查 post增 delete删 put改


if __name__ == "__main__":app.run(debug=True, host = "0.0.0.0",port = 5000)

最后启动服务。
完整代码

from flask import Flask,jsonify
from flask_cors import CORSapp = Flask(__name__)app.config["JSON_AS_ASCII"] = False
CORS(app,cors_allowed_orgins = "*")@app.route('/', methods=['GET'])
def index():res = {"msg" : "你好，这里是后端入口"}return jsonify(res)#启动flaskif __name__ == "__main__":app.run(debug=True, host = "0.0.0.0",port = 5000)# app.run(debug=True)

我们执行它

这样就成功了。上面哪个是本地访问的地址，后面那个是局域网访问地址，你手机如果和电脑是一个wifi，可以在浏览器输入尝试一下后面那个，可以收到数据。

注意，你这里最好用命令行cd到manager所在位置，使用python 文件运行服务，这样不会占有你ide的使用空间

2.测试获取

我们写一个test尝试获取一下上面写的manage接口

#接口测试
import requests#发起http请求class HttpApiTest:def test_get(self,url,data={}):res = requests.get(url=url , params=data)return res.textif __name__ == "__main__":httpapi = HttpApiTest()res = httpapi.test_get("http://localhost:5000")res = res.encode('utf-8').decode('unicode_escape')print(res)


manage服务窗口显示以上内容，说明收到了请求

test处收到了数据，说明manage服务是有效的。

我们也可以加个传参试试
test:

 res = httpapi.test_get("http://localhost:5000",data={"id":"123"})

manage:

    id = request.args.get("id",None)print("id:"+id)


发现是成功的。

3.加入数据库

在social（与manage同级的文件夹）下再建立data文件，实例化数据库：

from flask_sqlalchemy import SQLAlchemy
import pymysqlpymysql.install_as_MySQLdb()db = SQLAlchemy()

然后在manage中
RuntimeError: Either ‘SQLALCHEMY_DATABASE_URI’ or ‘SQLALCHEMY_BINDS’ must be set.
导入

#导入数据库
from data import db

配置数据库地址

app.config["SQLALCHEMY_DATABASE_URI"] = "mysql://root:此处填你数据库的密码:写你的端口号/写你的数据库名字"

配置数据库自动提交

app.config["SQLALCHEMY_COMMIT_ON_TEARDOWN"] = True

最后初始化操作，把配置好的app放进db就可以了。

db.init_app(app)

完成后重新启动manage服务

这么显示说明没问题。

三、数据库

1.配置数据库

我们要先下载MySQL，这个网上说明很多，而且因人而异，就不多说了，想要轻松下载，这里可以给出一条思路：先用XAMPP，可以一键下载mysql和tomcat等，然后下载Navicat来管理，我这里使用的是sql的原生管理系统，是英文的：MySQL Workbench。

我们通过Mysql的workbench进入，
点击
创建如下表单


然后我们右键user，点击第一个select rows limits 1000，在表格中输入内容
再点击apply，就能成功创建数据了。

2.查询数据库

我们再manage中加入

    userlist = db.session.execute( "select * from user" ).fetchall()print(userlist)

然后再让test发请求，试图看看userlist是什么样的，但遇到以下问题：


这是由于版本更新后语法不一样导致的，我们导入一个库

from sqlalchemy import text

然后把访问数据库改为：

  userlist = db.session.execute( text("select * from user") ).fetchall()

就好了，再次发请求，可以看到我们刚刚加入的内容。

3.后端传输数据库数据给前端

接下来，让我们建立接口，可以有效给前端传输数据库中的数据。
思路很简单，同样的，将userlist 给jsonify处理以下，然后发给后端，操作起来却问题重重。这里给出最后的解决方案以及思路讲解，具体困难在哪里请参考我写的debug日志，这里我们开始讲成功代码。

from flask import Flask,jsonify,request
from flask_cors import CORS
from sqlalchemy import text#建立对象
app = Flask(__name__)app.config["JSON_AS_ASCII"] = False
#导入数据库
from data import db
# 配置数据库
app.config["SQLALCHEMY_DATABASE_URI"] = "mysql://root:Aa289558916@localhost:3306/test_data"
app.config["SQLALCHEMY_COMMIT_ON_TEARDOWN"] = True
#初始化操作
db.init_app(app)CORS(app,cors_allowed_orgins = "*")def list_row2list_dic(list_row):  dic_temp = {}list_dic = []for x in list_row:listda = []listidx= []for dx in x:    listda.append(dx)xx = x._key_to_index        for idx in xx:listidx.append(idx)dic_temp=dict(zip(listidx,listda))list_dic.append(dic_temp)return list_dic@app.route('/', methods=['GET'])
def index():res = {"msg" : "你好，这里是后端入口"}id = request.args.get("id",None)print("id:"+id)raw_userlist = db.session.execute( text("select * from user") ).fetchall()userlist = list_row2list_dic(raw_userlist)d2js={"data":userlist}return jsonify(d2js)#启动flaskif __name__ == "__main__":app.run(debug=True, host = "0.0.0.0",port = 5000)

我们先将获取到的list转化为dict类型，然后把dict类型的数据再做成dict类型的列表，如下图所示

然后，我们给这个列表打上data的标签，送入jsonify，最后成果如图：

这样就是我们网站要的数据格式啦~

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

云原生基础设施和操作系统分论坛 03-在Kubernetes上运行Apache Spark进行大规模数据处理的实践【数据分析】

云原生基础设施和操作系统分论坛 03-在Kubernetes上运行Apache Spark进行大规模数据处理的实践【数据分析】

https://spark.apache.org/视频观看：https://www.bilibili.com/video/BV17J4m1n7Gv/?spm_id_from333.999.0.0 简介 Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎。Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop…
阅读更多...
小红薯视频作品一键克隆，解放双手自动搬运【永久脚本+使用教程】

小红薯视频作品一键克隆，解放双手自动搬运【永久脚本+使用教程】

软件介绍： 小红薯作品搬运神器，软件只需要复制对方的作品链接即可一键克隆搬运到自己的小红书上，再也不用手动去复制粘贴了，批量起号搬运必备神器 设备需求： 电脑 链接：https://pan.baidu.com/s/11MzBqER…
阅读更多...
Ubuntu虚拟机上推荐一款免费好用的git版本管理工具

Ubuntu虚拟机上推荐一款免费好用的git版本管理工具

工具叫: gitg 软件界面如下： FR:徐海涛(hunkxu)
阅读更多...
LLM应用-文档解析 AI大模型总结分析文档

LLM应用-文档解析 AI大模型总结分析文档

1）https://notegpt.io/pdf-summary 支持总结，思维导图、对话 2）chatdoc https://chatdoc.com/ 3）chatpdf https://www.chatpdf.com/ https://www.chatpdfs.cn/ 4）kimi https://kimi.moonshot.cn/
阅读更多...
【DevOps】深入解析 Docker日志分析和服务故障排除技巧

【DevOps】深入解析 Docker日志分析和服务故障排除技巧

在今天的云计算和微服务架构中，Docker凭借其轻量级和高效的容器化技术，已成为软件部署不可或缺的一部分。然而，随着应用复杂性的增加，有效的日志管理和故障排除能力成为了开发者和运维人员必须掌握的核心技能。本文将带你深入探索…
阅读更多...
vscode无法连接 ， .vscode-server版本问题

vscode无法连接 ， .vscode-server版本问题

vscode无法连接 ， .vscode-server版本问题 解决办法 ： 查看自己的版本号 2. 两边vscode版本号需要一致 找一台vscode可以远程连接的， 将它的.vscode-server/bin/b06ae3b2d2dbfe28bca3134cc6be65935cdfea6a 传到 远程服务器上 或者 本地的…
阅读更多...
语音识别-paddlespeech-流程梳理

语音识别-paddlespeech-流程梳理

上一次研究语音识别是21年年底的事情了，记得当时是先进行了语音识别的应用，然后操作了模型的再次训练；两年过去，关于ASR相关流程忘得差不多了，这次基于paddlespeech的代码，进行了流程的梳理，关于…
阅读更多...
物联网设计竞赛_4_Jetson Nano连接摄像头

物联网设计竞赛_4_Jetson Nano连接摄像头

ls /dev/video* 查看是否有摄像头 camorama 开启摄像头 关闭摄像头用&#xff1a; ctr c结束进程 若有camorama被启动用ps aux 或者 ps aux l grep camorama 找到对应进程用 kill -9 <PID>杀死进程再启动 必要的时候也能重启系统再试试&#xff1a; shutdown -r …
阅读更多...
Vue的学习 —— ＜vue指令＞

Vue的学习 —— ＜vue指令＞

目录 前言 正文 内容渲染指令 内容渲染指令的使用方法 v-text v-html 属性绑定指令 双向数据绑定指令 事件绑定指令 条件渲染指令 循环列表渲染指令 侦听器 前言 在完成Vue开发环境的搭建后&#xff0c;若想将Vue应用于实际项目&#xff0c;首要任务是学习Vue的基…
阅读更多...
Web 安全漏洞之文件上传

Web 安全漏洞之文件上传

目录 文件上传漏洞及危害 文件名 HTML 和 SVG 软链 服务器磁盘 防御方法 网络安全学习路线 &#xff08;2024最新整理&#xff09; 学习资料的推荐 1.视频教程 2.SRC技术文档&PDF书籍 3.大厂面试题 特别声明&#xff1a; 文件上传漏洞及危害 文件上传漏洞…
阅读更多...
深入了解 MyBatis 插件：定制化你的持久层框架

深入了解 MyBatis 插件：定制化你的持久层框架

序言 MyBatis 是一个流行的 Java 持久层框架&#xff0c;它提供了简单而强大的数据库访问功能。然而&#xff0c;有时候我们需要在 MyBatis 中添加一些自定义的功能或行为&#xff0c;来满足特定的需求。这时&#xff0c;MyBatis 插件就发挥了重要作用。本文将深入探讨 MyBati…
阅读更多...
5.12学习总结

5.12学习总结

一.JAVA聊天室项目 文件发送 使用 Java Socket 实现聊天内容或文件的传输的原理如下&#xff1a; 服务器端启动&#xff1a;聊天室的服务器端在指定的端口上监听客户端的连接。它创建一个 ServerSocket 对象&#xff0c;并通过调用 accept() 方法等待客户端的连接请求。客户…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023