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.mfbz.cn/a/491913.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

web自动化测试系列-selenium的运行原理和常用方法介绍(二)

目录 1.selenium的运行原理 2.常用方法介绍 接上文 &#xff1a;web自动化测试系列-selenium的安装和运行(一)-CSDN博客 在上文中我们编写了一段简单的代码 &#xff0c;可以驱动浏览器访问百度并搜索关键字 。这里我们再把这段代码再拿来加以说明 。 # 1. 导包 from selen…

gitee拉取与推送

&#x1f331;博客主页&#xff1a;青竹雾色间 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 目录 一&#xff0c;从本地推送项目到gitee1.首先我们在gitee上创建一个仓库2.clone远程仓库到本地3.git的三板斧3.1. add - 将代码添加到本地仓库3.2. commit …

入行AI写作第一个月收入2万+复盘分享

AI写作作为一种新兴的创作方式&#xff0c;正逐渐改变着内容产业的生态。在这个领域中&#xff0c;许多人通过自己的努力和智慧&#xff0c;实现了快速的成长和收入的增长。本文将从技术学习与掌握、实践与应用、内容创作与优化、持续学习与创新、总结与复盘这五个方面&#xf…

Python时间序列异常检测库之adtk使用详解

概要 ADTK(Anomaly Detection Toolkit)是一个用于时间序列异常检测的Python库。它提供了一系列工具来识别时间序列数据中的异常模式,适用于多种监测和预测任务。 ADTK简介 ADTK专注于时间序列异常检测,支持多种异常检测算法,包括统计学方法、机器学习模型以及基于规则的…

配置Web运行环境与第一个网页

安装与配置Web环境: 如下使用了VSC作为web的运行环境。 下面是VSC的官网点击进入:Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/download 1.下载 进入官网后可以看到有windows&#xff0c;linux&#xff0c;还有苹果按照自己的系统下载&…

Halcon深度学习项目实战系统教程

Halcon在机器视觉中的价值主要体现在提供高效、可扩展、灵活的机器视觉解决方案,帮助用户解决各种复杂的机器视觉问题,提高生产效率和产品质量。 缩短产品上市时间 Halcon的灵活架构使其能够快速开发出任何类型的机器视觉应用。其全球通用的集成开发环境(HDevelop)有助于降…

CDLKF不锈钢浸入式多级离心泵

一、构造特点与工作原理 CDLKF型不锈钢浸入式多级离心泵采用了先进的设计理念&#xff0c;其结构紧凑&#xff0c;占地面积小。泵体采用优质不锈钢材料&#xff0c;不仅保证了良好的抗腐蚀性和耐磨性&#xff0c;同时也确保了泵的长期稳定运行。 该泵的核心部件是多级离心叶轮&…

数字孪生在教学培训的应用场景

数字孪生技术在教学培训领域的应用场景非常广泛&#xff0c;它通过创建一个真实世界的虚拟副本&#xff0c;为教育和培训提供了全新的方法和手段。以下是一些具体的应用场景&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#…

2024/3/26 C++作业

定义一个矩形类&#xff08;Rectangle&#xff09;&#xff0c;包含私有成员&#xff1a;长(length)、宽&#xff08;width&#xff09;, 定义成员函数&#xff1a; 设置长度&#xff1a;void set_l(int l) 设置宽度&#xff1a;void set_w(int w) 获取长度&#xff1a;int…

centos7 使用docker安装了mongo 怎么设置远程链接,必须使用密码才能连接

docker run -d –name mongodb_container -e MONGO_INITDB_ROOT_USERNAMEroot -e MONGO_INITDB_ROOT_PASSWORDroot -e MONGO_INITDB_DATABASEdataserver -p 27017:27017 \ 无法在mongo容器里编辑文件 如果你无法直接编辑 MongoDB 容器内的配置文件&#xff0c;你可以尝试…

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

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

生成 SSH 公钥

Windows 用户建议使用 Windows PowerShell 或者 Git Bash&#xff0c;在 命令提示符 下无 cat 和 ls 命令。 1、通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519 -C "Gitee SSH Key"-t key 类型 -C 注释 输出&#xff0c;如&#xff1a; 中间…

Redis入门三(主从复制、Redis哨兵、Redis集群、缓存更新策略、缓存穿透、缓存击穿、缓存雪崩)

文章目录 一、主从复制1.单例redis存在的问题2.主从复制是什么&#xff1f;3.主从复制的原理4.主从搭建1&#xff09;准备工作2&#xff09;方式一3&#xff09;方式二 5.python中操作1&#xff09;原生操作2&#xff09;Django的缓存操作 二、Redis哨兵&#xff08;Redis-Sent…

Redis和MySQL如何保持数据一致性?

在高并发的场景下&#xff0c;大量的请求直接访问MySQL很容易造成性能问题。所以&#xff0c;我们都会用Redis来做数据的缓存&#xff0c;削减对数据库的请求。但是&#xff0c;MySQL和Redis是两种不同的数据库&#xff0c;如何保证不同数据库之间数据的一致性就非常关键了。 …

Vue3 新项目默认工程文件理解

Vue3 新项目默认工程文件理解 文章目录 Vue3 新项目默认工程文件理解0、工程文件结构图1、main.ts2、index.html源文件编译后 3、App.vue4、.d.ts 文件作用 0、工程文件结构图 1、main.ts // 引入 createApp 函数 import { createApp } from vue // 引入 style.css 文件&#…

工业镜头常用参数之实效F(Fno.)和像圈

Fno. 工业镜头中常用到的参数F&#xff0c;有时候用F/#&#xff0c;Fno.来表示&#xff0c;指的是镜头通光能力的参数。它可用镜头焦距及入瞳直径来表示&#xff0c;也可通过镜头数值孔径&#xff08;NA&#xff09;和光学放大倍率&#xff08;β&#xff09;来计算。有效Fno.…

FPGA亚稳态学习总结

首先是组合逻辑电路考虑的是竞争冒险&#xff0c;冒险会产生毛刺。重点研究如何去毛刺 时序逻辑电路考虑的是时序不满足会产生的亚稳态问题&#xff1a;如何考量时序满不满足呢&#xff1f;根据不同的场景又有不同的说法。 时序分析的两组基本概念 建立时间与保持时间 1.在…

【Flask开发实战】安装mysql数据库与配置连接

1、安装mysql 通过yum方式安装MySQL服务器&#xff1a; sudo yum install mysql-server 在安装过程中&#xff0c;系统可能会要求确认安装。按下Y键并按回车键继续。 安装完成后&#xff0c;MySQL服务器应已自动启动。可以使用以下命令查看和启动MySQL服务&#xff1a; sudo…

Go语言介绍以及如何在Go语言中操作MySQL数据库

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

卷起来——高级数据分析师

要成为一名高级数据分析师&#xff0c;需要掌握一系列的技能&#xff0c;包括数据处理、统计分析、机器学习、数据可视化以及业务理解等&#xff0c;喜欢或者想往这方面发展的童鞋们&#xff0c;卷起来&#xff0c;点击以下链接中的链接&#xff0c;备注"分析"进群交…
最新文章