从0开始搭建vue + flask 旅游景点数据分析系统( 六):搭建后端flask框架

这一期开始开发header部分,预期实现两个目标:

  • 创建 Flask 项目
  • 导入旅游数据
  • 后端实现旅游数据的查询

1 python 环境 & 开发环境

python 安装和pycharm安装需要去网上找包,建议python使用3.8 或者3.9版本

2 新建项目

我们新建一个文件夹叫tour-flask, 然后用pycharm去打开。

创建文件夹app,然后再里面创建三个文件 init.py , routes.py 和 config.py

在根目录下创建run.py 和依赖文件requirements.txt

然后分别写几个文件:

__init__.py

from flask import Flaskdef create_app():app = Flask(__name__)from .routes import main as main_blueprintapp.register_blueprint(main_blueprint)return app

config.py

class Config:pass

routes.py

from flask import Blueprint, jsonifymain = Blueprint('main', __name__)@main.route('/test', methods=['GET'])
def test():data = [{'id': 1, 'name': 'John'}, {'id': 2, 'name': 'Jane'}]return jsonify(data)

requirements.txt

Flask

run.py

from app import create_appapp = create_app()if __name__ == '__main__':app.run(debug=True, port=8080)

然后启动run.py ,第一个Flask程序就已经搞定了!

在这里插入图片描述

3 前端与后端对接

下面测试一下前端与后端的对接,打开前端项目,安装axios

npm install axios

创建一个文件夹api,新建文件request.js,这个是对axios进行封装:

import axios from 'axios'const service =  axios.create({baseURL: '/api',timeout: 1200,
})export default service

然后新建一个文件tour.js:

import request from '@/api/request'// 测试
export function test() {return request({url: '/test',method: 'get'})
}

下面直接修改Dashboard.vue,添加以下部分测试:

import {test} from "@/api/tour"mounted() {test().then(res=>{console.log(res.data)})}

修改vue.config.js 添加以下内容:

devServer: {port: 8999, // 端口号配置// open: true // 自动打开浏览器proxy: {"/api": {target: "http://localhost:8080",changeOrigin: true,ws: false,pathRewrite: {"^/api": ""}}}},

4 测试

然后把前端服务重新启动下,现在我们的端口启动在8999上了,因为上面改了端口,然后利用浏览器的开发者模式查看控制台,可以看到console.log打印出来的日志是访问后端的localhost:8080/test接口的结果

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

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

相关文章

还没排上 SearchGPT ?比 Perplexity 更好用的国产开源平替了解一下?

有 AI 在的科技圈,似乎没有中场休息。除了大模型发布不断,各家科技大厂也在寻找着第一个「杀手级」AI 应用的落脚之地。 OpenAI 首先瞄准的是谷歌 1750 亿美元的搜索业务市场。7 月 25 日,OpenAI 带着 AI 搜索引擎——SearchGPT 高调入场。在演示 demo 中,搜索引擎的使用体…

贪吃蛇(使用QT)

贪吃蛇小游戏 一.项目介绍**[贪吃蛇项目地址](https://gitee.com/strandingzy/QT/tree/zyy/snake)**界面一:游戏大厅界面二:关卡选择界面界面三:游戏界面 二.项目实现2.1 游戏大厅2.2关卡选择界面2.3 游戏房间2.3.1 封装贪吃蛇数据结构2.3.2 …

【CTFWP】ctfshow-web40

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 题目介绍:题目分析:payload:payload解释:payload2:payload2解释:flag 题目介绍: …

第一阶段面试问题(后半部分)

1. c语言中const *p的用法 (1)const int *p; 或 int const *p; 指向常量整数的指针,通过这个指针不能修改它所指向的整数值,但可以修改指针本身来指向其他地址 const int a 10; const int *p &a; // *p 20; // 错误&…

vector中 resize()和reserve()

1.resize()改变容器大小 resize除了预留内存以外,还会调用容器元素的构造函数,不仅分配了N个对象的内存,还会构造N个对象。从这个层面上来说,resize()在时间效率上是比reserve()低的。 2.reserve()容器大小管理 用于预留内存。 …

Flask目录结构路由重定向简单实例讲解——轻量级的 Python Web 框架

假设一个flask目录结构如下: my_flask_app/ │ ├── app.py ├── routes/ │ ├── __init__.py │ ├── ZhejiangProvince/ │ │ ├── __init__.py │ │ ├── la.py │ │ └── el.py │ ├── GuangdongProvince/ │ │ ├…

C语言项目实战FTP文件传输(windows网络编程基础)

文章目录 前言一、客户端和服务端介绍二、客户端和服务器之间进行通信的过程客户端和服务器建立通信的流程通信过程的示例图流程说明 三、客户端代码编写代码解释 四、服务端代码编写代码解释 总结 前言 本篇文章开始将带大家来学习FTP文件传输助手的项目实现,这个…

【单片机毕业设计选题24099】-室内空气质量检测及净化系统

系统功能: 系统上电后OLED显示“欢迎使用请稍后”两秒后进入正常界面显示, 第一行显示温湿度和MQ2值 第二行显示采集到的甲醛值 第三行显示采集到的PM2.5值 第四行显示设定的PM2.5值 短按B4按键增加PM2.5设定阈值 短按B5按键减小PM2.5设定阈值 如果PM2.5采集…

达梦数据库dsc集群动态添加节点

前提条件:在安装好的的dsc集群:达梦数据库dsc集群保姆级部署文档_达梦数据库文档-CSDN博客上动态添加节点 1、环境信息 扩展节点信息: 操作环境:VMware Workstation 16 Pro dmdsc集群 机器ip 主机名 操作系统 资源配置 实…

【传知代码】基于标签相关性的多标签学习(论文复现)

在当今信息爆炸的时代,数据中包含的标签信息对于理解和分析复杂问题至关重要。在诸如文本分类、图像识别和推荐系统等应用中,如何有效地利用标签相关性提升多标签学习的效果成为了研究的热点之一。基于标签相关性的多标签学习方法,通过挖掘不…

JAVA项目基于SpringBoot的外卖点餐管理系统

目录 一、前言 二、技术介绍 三、系统实现 四、论文参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着生活节…

Flink笔记整理(六)

Flink笔记整理(六) 完整系列在公众号:是十三不是四十三,欢迎关注~ 文章目录 Flink笔记整理(六)八、状态管理8.1 Flink中的状态概述状态的分类 8.2 按键分区状态(Keyed State)值状态…

Windows 添加自定义服务实现开机(用户登录之前)自动运行 Python 脚本

实现效果 使用 Python 编写的一个脚本, 希望在 Windows 系统启动时, 用户登录之前就自动运行. 准备工作 首先确保 Python 脚本可以手动正常运行, 演示起见, 编写下面的一个简单的脚本用于在 C 盘根目录中生成一个包含脚本运行时间戳的文本文件. Python 脚本存放在 C:\Python…

python爬虫实践

两个python程序的小实验(附带源码) 题目1 爬取http://www.gaosan.com/gaokao/196075.html 中国大学排名,并输出。提示:使用requests库获取页面的基本操作获取该页面,运用BeautifulSoup解析该页面绑定对象soup&#x…

搭建jenkins一键部署java项目

一、搭建jenkins 链接: https://pan.baidu.com/s/1jzx15PiyI8EhLd_vg7q8bw 提取码: ydhl 复制这段内容后打开百度网盘手机App,操作更方便哦 直接使用docker导入镜像,运行就好 docker run -di --name jenkins -p 8080:8080 -v /home/jenkins_home:/var/je…

【人工智能】NLP入门指南:自然语言处理基础全解析

文章目录 前言一、NLPNLP(自然语言处理)NLU(自然语言理解)NLG(自然语言生成) 二、分词1.什么是分词2.常见的分词工具3.jieba分词 三、词向量1.什么是词向量2.文本张量表示方法3.常见的词向量模型3.1 ont-ho…

15.4 zookeeper java client之Curator使用(❤❤❤❤❤)

Curator使用 1. 为什么使用Curator对比Zookeeper原生2. 集成Curator2.1 依赖引入curator-frameworkcurator-recipes2.2 `yml`配置连接信息2.3 CuratorConfig配置类2.4 Curator实现Zookeeper分布式锁业务2.4.1 业务:可重入锁和不可重入锁可重入锁和不可重入锁InterProcessMutex …

scratch魔法门 2024年6月scratch四级 中国电子学会图形化编程 少儿编程等级考试四级真题和答案解析

目录 scratch魔法门 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、pyt…

基于JAVA的美甲店员工管理系统,源码、部署+讲解

摘 要 随着社会科技的飞速发展和进步,网络技术的应用已经深入到生活的方方面面。在这样的背景下,企事业单位的绩效考评体系也受到了极大的影响和冲击。传统的绩效考评方式已经无法满足现代社会的高效需求,因此,研发一款智能化、高…

42 PCB布线叠层与阻抗介绍43 PCB布线过孔添加与设置44 差分对添加与设置45 布线间距规则与介绍

42 PCB布线叠层与阻抗介绍&&43 PCB布线过孔添加与设置&44 差分对添加与设置&&45 布线间距规则与介绍 第一部分 42 PCB布线叠层与阻抗介绍1 板子是怎么来的。2 四层板为例,做叠层和阻抗计算。 第二部分 43 PCB布线过孔添加与设置介绍PCBEdotor中…