【项目实训】falsk后端连接数据库以及与前端vue进行通信

falsk连接数据库

我们整个项目采用vue+flask+mysql的框架,之前已经搭建好了mysql数据库,现在要做的是使用flask连接到数据库并测试

安装flask

  • 首先安装flask

pip install flask

进行数据库连接

数据库连接需要使用到pymysql库以及flask库

连接数据库的函数如下:

class Database:# 设置数据库连接host='localhost'user='root'password = "123456"def __init__(self,db):connect=pymysql.connect(host=self.host,user=self.user,password=self.password,db=db)self.cursor = connect.cursor()# 执行sql语句def execute(self,command):try:# 执行command中的sql语句self.cursor.execute(command)except Exception as e:return eelse:return self.cursor.fetchall()

其中包含了连接数据库以及执行sql语句,省去了每次执行sql语句重连数据库的麻烦

编写函数以测试是否连接成功数据库

可以使用以下代码,其中注意Database()中替换为自己的数据库名,sql查询语句根据自己情况编写

sql = Database("xmsx")
result = sql.execute(f"SELECT company FROM companyandjob WHERE job_name='{job}' ")
print(result)

vue与flask通信

前端vue部分

解决跨域问题:

  • 首先编写vue.config.js

设置target为自己的后端flask的接口:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false,
})
// 跨域配置
module.exports = {devServer: {                //记住,别写错了devServer//设置本地默认端口  选填port: 8080,proxy: {                 //设置代理,必须填'/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定target: 'http://127.0.0.1:8085',     //代理的目标地址changeOrigin: true,              //是否设置同源,输入是的pathRewrite: {                   //路径重写'^/api': ''                     //选择忽略拦截器里面的内容}}}}
}
  • 其次编辑index.js(注意,这里是我们项目特有的,我们全局设置了axios,因此不用在每个vue中导入axios

设置baseUrl为后端flaskIP地址

  • 编写前端函数 

这里使用export const 是因为我们将所有的调用后端的函数写在了一个文件中,这样封装性较强,前端需要获取后端数据时调用这个函数即可

  • 在.vue文件中调用访问后端的函数

在methods中使用,并且由于改方法是异步操作,所以使用async声明,并且在异步调用函数的位置声明await,从而获得后端返回的数据。相应的展示在前端

后端flask部分

后端需要与vue通信,同时要与数据库连接,并且接受前端的参数,代码如下:

# 前端显示相应公司后端岗位的优秀面经
@app.route('/api/getExperienceWithOfset',methods=['POST'])
def showExperience():if request.method == "POST":company = request.json['company']# 如果之后添加”前端“岗位,则应前端再传递一个”岗位“信息,从而到数据库中查询相应的数据job = request.json['job']offset = request.json['offset']if request.method == "GET":company = request.args.get['company']job = request.json['job']offset = request.json['offset']# 创建Database类的对象sql,test为需要访问的数据库名字 具体可见Database类的构造函数sql = Database("xmsx")try:#执行sql语句 f+字符串的形式,可以在字符串里面以{}的形式加入变量名 结果保存在result数组中result = sql.execute(f"SELECT title,content FROM companyandexperience WHERE company='{company}' AND job='{job}' LIMIT 1 OFFSET {offset}")except Exception as e:return {'status':"error", 'message': "code error"}else:if not len(result) == 0:#返回查询结果,根据需要进行处理return {'status':'success','title':result[0][0],'content':result[0][1],}else:return {'status':'success','title':"无",'content':"空",}

这里我们处理成,接受前端的company,job,offset字段,然后在数据库中查询相应的记录并返回。offset的设置是为了可以在前端实现分页展示。

并且,为了防止频繁的发生error错误,我们设置,如果数据库中查询不到数据,则返回”空“,在前端添加逻辑判断,如果返回的数据内容为”空“则表示没有数据了,则不能再进行翻页操作,并且提示”暂时没有该信息“。

项目中编写的后端函数如下:

  • 根据公司和岗位查询公司要求信息
# 根据公司岗位,这里的岗位是模糊查询,即算法、数据等类别,查询出公司要求,公司职责或描述
@app.route('/api/getCompanyJobInformationWithOfset',methods=['POST'])
def showCompanyJobInformationWithOfset():
  • 根据公司和岗位查询公司优质面经
# 前端显示相应公司后端岗位的优秀面经
@app.route('/api/getExperienceWithOfset',methods=['POST'])
def showExperience():
  • 根据jieba分词统计得到的各公司的高频考点,从数据库中查询一些技术问题作为模拟面试问答
  •  

总结

综上,我们实现了vue+flask+mysql的整体框架。根据不同的前端展示需求,编写不同的后端代码及sql查询即可。

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

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

相关文章

Linux-引导过程与服务控制

目录 一、Linux操作系统引导过程 1、引导过程总览 2、引导过程详解 2.1、开机自检(BIOS) 2.2、 MBR引导 2.3、GRUB菜单 2.4、加载内核(kernel) 2.5、init进程初始化 3、系统初始化进程 3.1、Systemd单元类型 3.2、运行级别所对应的 Systemd 目…

SherlockChain:基于高级AI实现的智能合约安全分析框架

关于SherlockChain SherlockChain是一款功能强大的智能合约安全分析框架,该工具整合了Slither工具(一款针对智能合约的安全工具)的功能,并引入了高级人工智能模型,旨在辅助广大研究人员针对Solidity、Vyper和Plutus智…

前端 Array.sort() 源码学习

源码地址 V8源码Array 710行开始为sort()相关 Array.sort()方法是那种排序呢&#xff1f; 去看源码主要是源于这个问题 // In-place QuickSort algorithm. // For short (length < 22) arrays, insertion sort is used for efficiency.源码中的第一句话就回答了我的问题…

Potato(土豆)一款轻量级的开源文本标注工具(二)

示例项目&#xff08;模版&#xff09; Potato 旨在提高数据标注的可复制性&#xff0c;并降低研究人员设置新标注任务的成本。因此&#xff0c;Potato 提供了一系列预定义的示例项目&#xff0c;并欢迎公众向项目中心贡献。如果您使用 Potato 进行了自己的标注工作&#xff0…

海思平台使用ITTP_Stream调试sensor

目录 相关资料1.ISP相关资料2.MIPI RX相关资料3.sensor资料4.MIPI标准 准备工作1.准备sensor驱动2.准备sample vio3.准备上位机和下位机程序 运行1.只运行HiPQTool1.1.板端运行1.2.PC端运行HiPQTool 2.使用ITTP_Stream2.1.板端运行2.2.打开上位机软件 相关资料 1.ISP相关资料 …

uniapp开发手机APP、H5网页、微信小程序、长列表插件

ml-list 插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id18928 ml-list介绍 1、ml-list 列表组件&#xff0c;包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。 2、ml-list 低代码列表&#xff0c;帮助使用者快速构建列表&#xff0c;简单配置&…

秋招突击——6/26~6/27——复习{二维背包问题——宠物小精灵之收服}——新作{串联所有单词的字串}

文章目录 引言复习二维背包问题——宠物小精灵之收服个人实现重大问题 滚动数组优化实现 新作串联所有单词的字串个人实现参考实现 总结 引言 今天应该是舟车劳顿的一天&#xff0c;头一次在机场刷题&#xff0c;不学习新的东西了&#xff0c;就复习一些之前学习的算法了。 复…

有哪些方法可以恢复ios15不小心删除的照片?

ios15怎么恢复删除的照片&#xff1f;在手机相册里意外删除了重要的照片&#xff1f;别担心&#xff01;本文将为你介绍如何在iOS 15系统中恢复已删除的照片。无需专业知识&#xff0c;只需要按照以下步骤操作&#xff0c;你就能轻松找回宝贵的回忆。 一、从iCloud云端恢复删除…

SRC公益上分的小技巧一

前言 之前发布的文章&#xff0c;例如SRC中的一些信息收集姿势- Track 知识社区 - 掌控安全在线教育 - Powered by 掌控者 里面就有提到若依系统&#xff0c;默认账号密码非常简单 是 admin / admin123 但是&#xff0c;往往我们去挖掘的时候很容易出现 这说明了若依系统的门…

【Linux:文件描述符】

文件描述符&#xff1a; 文件描述符的分配原则&#xff1a;最小未分配原则 每一个进程中有一个task_struct结构体&#xff08;PCB)&#xff0c;而task_struct中含有struct file_sturct*file的指针&#xff0c;该指针指向了一个struct files_struct的结构体该结构体中含有一个f…

三大工作流引擎技术Activiti、Flowable、Camunda选型指南

文章目录 前言1 流程引擎发展历程2 流程引擎主要概念BPM (Business Process Management)BPMN (Business Process Model and Notation)CMMN (Case Management Model and Notation)DMN (Decision Model and Notation)事件&#xff08;Event&#xff09;顺序流&#xff08;Sequenc…

用一个实例看如何分享大量照片 续篇二,关于Exif (Exchangeable Image File) - 可交换图像文件

续篇二&#xff1a;说说关于照片隐含的 Exif (Exchangeable Image File) 可交换图像文件 数码照片的Exif 参数有很多&#xff0c;重要的Exif信息&#xff1a;拍摄日期、时间、拍摄器材、GPS信息。 当然这主要对自己的档案有意义&#xff0c;如果放到网上还是建议抹去这些信息。…

Bad owner or permissions on C:\\Users\\username/.ssh/config > 过程试图写入的管道不存在。

使用windows连接远程服务器出现Bad owner or permissions 错误 问题&#xff1a; 需要修复文件权限 SSH 配置文件应具有受限权限以防止未经授权的访问 确保只有用户对该.ssh/config文件具有读取权限 解决方案&#xff1a; 在windows下打开命令行&#xff0c;通过以下命令打开文…

C++编程(四)this指针 常函数 常对象 静态成员

文章目录 一、this指针&#xff08;一&#xff09;概念&#xff08;二&#xff09;显式使用this指针的场景1. 当形参和成员变量名一致时2. 返回对象自身的时候必须要使用this指针3. 在类中销毁一个对象 二、常函数和常对象&#xff08;一&#xff09;常函数1. 概念2. 语法格式 …

python OpenCV 库中的 cv2.Canny() 函数来对图像进行边缘检测,并显示检测到的边缘特征

import cv2# 加载图像 image cv2.imread(4.png)# 使用 Canny 边缘检测算法提取边缘特征 edges cv2.Canny(image, 100, 200)# 显示边缘特征 cv2.imshow(Edges, edges) cv2.waitKey(0) cv2.destroyAllWindows() 代码解析&#xff1a; 导入 OpenCV 库&#xff1a; import cv2加…

PT100(RTD)是什么?2线,3线,4线原理

RTDs - or Resistance Temperature Detectors- (电阻式温度探测器)&#xff0c;是温度型传感器&#xff0c;包含一个电阻&#xff0c;这个阻值可以随温度的变化而变化。在工业的进程中和实验室里已经使用了很多年&#xff0c;以精确&#xff0c;可靠和稳定的特性。 2线制 2线制…

C语言| 数组元素的删除

同数组元素的插入差不多。 数组元素的插入&#xff0c;是先移动要插入元素位置后面的所有元素&#xff0c;再插入新元素&#xff0c;长度1。 C语言| 数组的插入-CSDN博客 数组元素的删除&#xff0c;是先删除元素&#xff0c;再把后面的元素往前移动一位&#xff0c;而本程序…

【智能算法应用】麻雀搜索算法在物流配送中心选址的应用(无待选配送中心)

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.数学模型 模型假设 待定物流配送中心的库存总能满足需求点的需求不考虑从工厂到待定物流配送中心的运输成本不考虑选定区域内待确定…

Vue 解决报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise‘

Vue 报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise’ 排查 控制台报了一个错误 , Uncaught SyntaxError: Unexpected identifier ‘Promise’&#xff0c;网上查到的方法是 缺少符号&#xff0c;语法写法错误&#xff0c;但这些都没有解决我的问题&am…

RTDETR更换优化器——Lion

RTDETR更换Lion优化器 论文&#xff1a;https://arxiv.org/abs/2302.06675 代码&#xff1a;https://github.com/google/automl/blob/master/lion/lion_pytorch.py 简介&#xff1a; Lion优化器是一种基于梯度的优化算法&#xff0c;旨在提高梯度下降法在深度学习中的优化效果…