00000基础搭建vue+flask前后端分离项目

我完全是参考的这个vue3+flask前后端分离环境速建_flask vue3-CSDN博客

安装了node_js(添加了环境变量)

环境变量

把原来的镜像源换成了淘宝镜像源 npm config set registry https://registry.npmmirror.com/

查看版本证明安装成功 npm - v 

安装npm install -g @vue/cli  (打开cmd在里边输入,没有管在哪个目录)

安装axios 

npm install --save axios

在项目的根目录(前端的文件夹内)/test_fandb/vue_flask

新建一个文件夹/test_fandb/vue/flask,

就是项目的路径 在文件路径全选删去,输入cmd

打开该目录的终端

终端里执行vue create frontend

cd frontend

npm run serve

去访问http://localhost:8080/

在终端 CTRL+C停止服务

vscode打开我们刚刚创建的/test_fandb/vue_flask

修改frontend/src/components/HelloWorld.vue文件

完成一个最简单和后端交互例子

删去<div>里边的一堆超链接

<script>里边修改

又重新在fonted目录打开一个终端

使用npm run build(打包命令)

前端vue项目打包生成dist 文件夹,dist文件夹中就是打包好的静态文件

一切正常的话即可在frontend/dist下看到生成的部署文件

后端

在项目文件夹vue_flask

新建后端文件夹back_end

并在该新建文件夹下创建templates、static文件夹和app.py文件

我是直接对下面这个面板操作的

将前端生成的/public/index.html复制到templates

js、css(在dist目录下)和img(没有则新建个img目录)复制到static下

img没有,可以不弄

favicon.ico需放入static/img下

修改后端的index.html

<%= BASE_URL %>是根目录/

在后端的app.py文件里写入(之前不小心创建成了文件夹)

现在打开2个终端

在后端目录 启动终端输入python app.py

在前端目录启动终端输入npm run serve

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

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

相关文章

使用servlet从数据库中取出中文在页面上显示‘?’的问题

问题描述&#xff1a; 解决方案&#xff1a; 1.Idea控制台中并未出现报错信息&#xff0c;一切正常&#xff0c;此时应该考虑的就是编码格式的问题了 2.设置编码格式为UTF-8 3.问题成功解决

Oracle中实现根据条件对数据的增删改操作——Merge Into

一、需求描述 在我们进行项目开发的过程中&#xff0c;会遇到这样的场景&#xff0c;需要根据某个条件对数据进行增、删、改的操作&#xff1b;遇到这种情况我们有2种方法进行解决&#xff1a; 方法一&#xff1a;①查询指定条件&#xff1b;②根据查询出的指定条件结果在执行…

solr-lucene的解释

什么是solr-lucene Solr是一个基于Apache Lucene的开源搜索平台。Lucene是一个开源的全文搜索引擎库&#xff0c;它提供了一个简单而强大的API&#xff0c;用于索引和搜索文档。Solr通过在Lucene的基础上构建一个更高级的搜索平台&#xff0c;为用户提供了更丰富的功能和易于使…

Unity VisionOS开发流程

Unity开发环境 Unity Pro, Unity Enterprise and Unity Industry 国际版 Mac Unity Editor(Apple silicon) visionOS Build Support (experimental) 实验版 Unity 2022.3.11f1 NOTE: 国际版与国服版Pro账通用&#xff0c;需要激活Pro的许可证。官方模板v0.6.2,非Pro版本会打…

灵途科技助力家电智能创新

从智能家电到个护健康&#xff0c;科技无时无刻不在刷新我们对智慧生活的认知&#xff0c;我们也从未像今天这样近距离贴近智慧生活的朴素本质——传感技术。灵途科技专注光电感知技术&#xff0c;持续为智能家电客户提供成熟的全方位感知解决方案。步入发展第八年&#xff0c;…

I2C系列(三):软件模拟I2C读写24C02

一.目标 PC 端的串口调试软件通过 RS-485 与单片机通信&#xff0c;控制单片机利用软件模拟 I2C 总线对 EEPROM&#xff08;24C02&#xff09; 进行任意读写。 二.硬件简述 2.1 24C02硬件参数 24C02器件地址为0x50&#xff0c;存储容量为256字节&#xff0c;存储单元地址位数…

DMA知识

提示&#xff1a;文章 文章目录 前言一、背景二、 2.1 2.2 总结 前言 前期疑问&#xff1a; 本文目标&#xff1a; 一、背景 2024年3月26日23:32:43 今天看了DMA存储器到存储器的DMA传输和存储器到外设的DMA实验&#xff0c;在keil仿真可以看到效果。还没有在protues和开发…

【文献分享】PY-Nodes 程序:使用 Nelder-Mead 的单纯形法在材料中搜索节点的从头开始的 Python 代码

题目&#xff1a;PY-Nodes: An ab-initio python code for searching nodes in a material using Nelder-Mead’s simplex approach 链接&#xff1a;Redirecting PY-Nodes&#xff1a;使用 Nelder-Mead 的单纯形法在材料中搜索节点的从头开始的 Python 代码 随着拓扑半金…

说说webpack的热更新是如何做到的?原理是什么?

文章目录 一、是什么二、实现原理三、总结参考文献 一、是什么 HMR全称 Hot Module Replacement&#xff0c;可以理解为模块热替换&#xff0c;指在应用程序运行过程中&#xff0c;替换、添加、删除模块&#xff0c;而无需重新刷新整个应用 例如&#xff0c;我们在应用运行过…

echarts 柱形图如何让其中一个柱子的颜色跟其他柱子不同

如何让其中一个柱子的颜色跟其他柱子不同 series: [{data: [120,// 使用对象的形式&#xff0c; value代表当前值, itemStyle设置样式{value: 200,itemStyle: {color: #a90000}},150,80,70,110,130],type: bar}]设置单个柱子颜色&#xff1a; 柱形图单个柱子颜色: https://e…

yolov5+pyside6+登录+用户管理目标检测可视化源码

一、软件简介 这是基于yolov5目标检测实现的源码&#xff0c;提供了用户登录功能界面&#xff1b; 用户需要输入正确的用户名和密码才可以登录。如果是超级管理员&#xff0c;可以修改普通用户的信息&#xff0c;并且在检测界面的右上角显示【管理用户】按钮。 支持图片、视频、…

系统架构设计-构建系统应用

1. 系统架构目标与设计原则 在设计系统架构时&#xff0c;我们的目标是确保系统具有以下特点&#xff1a; 可靠性&#xff1a;系统能够持续稳定运行&#xff0c;保证业务可用性。可伸缩性&#xff1a;系统能够根据负载变化自动扩展或收缩&#xff0c;以应对不同的流量需求。容…