初识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.mzph.cn/diannao/11792.shtml

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

相关文章

02-WPF_基础(二)

3、控件学习 控件学习 布局控件: panel、Grid 内容空间:Context 之恶能容纳一个控件或布局控件 代表提内容控件:内容控件可以设置标题 Header 父类:HeaderContextControl。 条目控件:可以显示一列数据&#xf…

CircleCI的原理及应用详解(二)

本系列文章简介: 在当今快速发展的软件开发环境中,如何确保代码质量、提升开发效率以及快速响应市场需求成为了每个开发团队面临的重要挑战。为了解决这些问题,持续集成和持续部署(CI/CD)工具应运而生,它们…

前端面试题大合集4----框架篇(React)

一、React 合成事件 Dom事件流分三个阶段&#xff1a;事件捕获阶段&#xff0c;目标阶段&#xff0c;事件冒泡阶段 React在事件绑定时有一套自身的机制&#xff0c;就是合成事件。如下比较直观&#xff1a; react中事件绑定&#xff1a; <div className"dome" …

如何解决3D模型变黑或贴图不显示的问题---模大狮模型网

在进行3D建模和视觉渲染时&#xff0c;经常会遇到模型表面变黑或贴图不显示的问题&#xff0c;这可能严重影响最终视觉效果的质量。这些问题通常与材质设置、光照配置或文件路径错误有关。本文将探讨几种常见原因及其解决方法&#xff0c;帮助3D艺术家和开发者更有效地处理这些…

Java | Leetcode Java题解之第88题合并两个有序数组

题目&#xff1a; 题解&#xff1a; class Solution {public void merge(int[] nums1, int m, int[] nums2, int n) {int p1 m - 1, p2 n - 1;int tail m n - 1;int cur;while (p1 > 0 || p2 > 0) {if (p1 -1) {cur nums2[p2--];} else if (p2 -1) {cur nums1[p…

Hive表数据优化

Hive表数据优化 1.文件格式 为Hive表中的数据选择一个合适的文件格式&#xff0c;对提高查询性能的提高是十分有益的。 &#xff08;1&#xff09;Text File 文本文件是Hive默认使用的文件格式&#xff0c;文本文件中的一行内容&#xff0c;就对应Hive表中的一行记录。 可…

VTK图形算法API:vtkSphereSource,球几何数据

大家好&#xff0c;我是先锋&#xff0c;专注于AI领域和编程技术分享&#xff0c;在这里定期分享计算机编程知识&#xff0c;AI应用知识&#xff0c;职场经验&#xff1b; 本系列介绍VTK图像算法API&#xff0c;后续会介绍VTK项目实践应用&#xff0c;关注我&#xff0c;不错过…

Linux中system V 标准 与 Psix标准

一. 简介 本文简单了解一下&#xff0c; Linux下 的两种标准&#xff1a; system V标准与 Psix标准。 二. Linux中system V 标准 与 Psix标准 1. Linux中system V 标准 与 Psix标准 System V 和 POSIX 是指定操作系统如何实现标准化API的两大标准。 System V 是一套标准&…

GPS与精致农业 无人机应用 农业遥感 农业类

全球定位系统是美国国防部主要为满足军事部门对海上、陆地和空中设施进行高精度导航和定位的要求而建立的。GPS系统最基本的特点是以“多星、高轨、高频、测量-测距”为体制&#xff0c;以高精度的原子钟为核心。GPS作为新一代卫星导航与定位系统&#xff0c;不仅具有全球性、全…

MySQL获取某一天(例如 ‘2023-10-23‘)的非重复 shopid 值

如果你只想获取某一天&#xff08;例如 2023-10-23&#xff09;的非重复 shopid 值&#xff0c;而不计算它们的数量&#xff0c;你可以使用 DISTINCT 关键字结合 WHERE 子句来查询。以下是相应的 SQL 查询&#xff1a; SELECT DISTINCT shopid FROM your_table_name WHERE…

13.复习1笔记

文章目录 1. 习题12. 习题22.1 小题12.2 小题2 3. 习题33.1 小题3.2 小题 1. 习题1 假设我们有三个向量 U , V , W U,V,W U,V,W是 R 7 R^7 R7空间内的非零向量。由U,V,W三个向量生成的属于 R 7 R^7 R7的子空间维度多少&#xff1f; 因为U,V,W是非零向量&#xff0c;所以子空间…

代码随想录算法训练营Day38 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

代码随想录算法训练营Day38 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯 LeetCode 509. 斐波那契数 题目链接&#xff1a;LeetCode 509. 斐波那契数 思路&#xff1a; 维护两个数组即可。确定dp0和dp1以及状态转移条件。 class Solution { public:int fib(int n…

LeetCode 力扣题目:买卖股票的最佳时机 III

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…

统计学方法的比较与评估

分析不同统计学方法的优缺点以及它们在特定情境下的适用性是一个复杂而有趣的课题。下面我将简要讨论一些常见的统计学方法&#xff0c;并比较它们的特点&#xff1a; 1. **参数统计与非参数统计&#xff1a;** - 参数统计&#xff1a;假设总体分布的形态&#xff0c;并基于…

Django5.0入门基本使用

文章目录 一、安装1、安装django环境2、创建项目3、启动服务器4、创建第一个应用&#xff08;1&#xff09;创建应用&#xff08;2&#xff09;编写视图&#xff08;3&#xff09;映射url&#xff08;4&#xff09;测试 二、核心概念1、django.urls 函数&#xff08;1&#xff…

U盘打不开提示格式化怎么办?(含数据恢复及U盘修复教程)

引言&#xff1a; 随着数字化时代的发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;有时我们可能会遇到U盘突然无法打开&#xff0c;并提示需要格式化的问题。这不仅会打乱我们的工作节奏&#xff0c;还可能会导致重要数据丢失。本文…

关于SQL

数据库简介&#xff1a; 数据库分类 关系型数据库模型&#xff1a; 优点&#xff1a;易于维护&#xff0c;可以实现复杂的查询 缺点&#xff1a;海量数据 读取写入性能差&#xff0c;高并发下数据库的io是瓶颈 是把复杂的数据结构归结为简单的二元关系&#xff08;即二维表…

Milvus 美基本概念

Milvus是一种基于向量相似度搜索的开源向量数据库&#xff0c;被广泛应用于诸如图像检索、推荐系统、自然语言处理等领域。本文将从Milvus的基本概念出发&#xff0c;详细介绍其在向量相似度搜索方面的特点和应用。 一、Milvus的基本概念 向量&#xff1a;在Milvus中&#xf…

机器学习中的聚类

目录 认识聚类算法 聚类算法API的使用 聚类算法实现流程 聚类算法模型评估 认识聚类算法 聚类算法是一种无监督的机器学习算法。 它将一组数据分成若干个不同的群组&#xff0c;使得每个群组内部的数据点相似度高&#xff0c;而不同群组之间的数据点相似度低。常用的相似…

采用java+B/S开发的全套医院绩效考核系统源码springboot+mybaits 医院绩效考核系统优势

采用java开发的全套医院绩效考核系统源码springbootmybaits 医院绩效考核系统优势 医院绩效管理系统解决方案紧扣新医改形势下医院绩效管理的要求&#xff0c;以“工作量为基础的考核方案”为核心思想&#xff0c;结合患者满意度、服务质量、技术难度、工作效率、医德医风等管…