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

news2024/11/19 20:39:27

我完全是参考的这个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.coloradmin.cn/o/1547534.html

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

相关文章

caffe | 使用caffe SSD制作VOC07112 lmdb数据集

git clone -b ssd https://github.com/weiliu89/caffe.git caffe_ssdcd caffe_ssdcp caffe/Makefile.config caffe_ssd/# 把 cuda 和 cudnn 关了&#xff0c;用 cpu 版本的就好了 make -j32 make pycaffemake test -j8 make runtest -j8 vim ~/.bashrc# 加入 export LD_LIBRAR…

Day49:WEB攻防-文件上传存储安全OSS对象分站解析安全解码还原目录执行

目录 文件-解析方案-目录执行权限&解码还原 目录执行权限 解码还原 文件-存储方案-分站存储&OSS对象 分站存储 OSS对象存储 知识点&#xff1a; 1、文件上传-安全解析方案-目录权限&解码还原 2、文件上传-安全存储方案-分站存储&OSS对象 文件-解析方案-目…

数据分析之Power Pivot多表数据建模

Power Pivot 介绍&#xff1a; 可以融合多个数据表可夺标关联搭建复杂数据模型一次建模&#xff0c;一键刷新DAX函数编写公式计算可将数据模型轻松移植到PBI和SQL中 1.将数据导入power pivot(power pivot------添加到数据模型) 2.导入其他表格&#xff0c;并有一定的关联 导入…

Cesium for UE-03-添加数据集(倾斜摄影)

继续上一章节&#xff0c;在创建了项目和关卡的基础上添加倾斜摄影 重新打开上次的项目和关卡 如果你已经关掉了上次的项目和关卡&#xff0c;可以重新打开ue&#xff0c;然后选择 选择 文件-打开关卡&#xff0c;在弹出的窗口中&#xff0c;选择 上次的关卡&#xff0c;并点击…

web学习笔记(四十五)Node.js

目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3 node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3 向文件写入指定内容 2.4 创…

【双指针】Leetcode 有效三角形的个数

题目解析 611. 有效三角形的个数 算法讲解 回顾知识&#xff1a;任意两数之和大于第三数就可以构成三角形 算法 1&#xff1a;暴力枚举 int triangleNumber(vector<int>& nums) {// 1. 排序sort(nums.begin(), nums.end());int n nums.size(), ret 0;// 2. 从…

基于ACO蚁群优化的UAV最优巡检路线规划算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 蚂蚁移动和信息素更新 4.2 整体优化过程 5.完整程序 1.程序功能描述 基于ACO蚁群优化法的UAV最优巡检路线规划。蚁群优化算法源于对自然界蚂蚁寻找食物路径行为的模拟。在无人机巡检路…

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…

SQL109 纠错4(组合查询,order by..)

SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state MI UNION SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state IL ORDER BY cust_name;order by子句&#xff0c;必须位于最后一条select语句之后

【C语言】C语言运算符优先级详解

文章目录 &#x1f4dd;前言&#x1f309;运算符优先级简述 &#x1f320;逻辑与和逻辑或&#x1f309;赋值和逗号运算符 &#x1f320;位运算&#x1f309;条件表达式&#x1f309;位运算与算术运算结合&#x1f309;混合使用条件表达式和赋值运算符&#x1f309; 逗号运算符的…

图像处理与视觉感知---期末复习重点(4)

文章目录 一、图像复原与图像增强1.1 概述1.2 异同点 二、图像复原/退化模型2.1 模型图简介2.2 线性复原法 三、彩色基础四、彩色模型五、彩色图像处理 一、图像复原与图像增强 1.1 概述 1. 图像增强技术一般要利用人的视觉系统特性&#xff0c;目的是取得较好的视觉效果&…

DMA知识

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

雷卯推荐多种系列汽车级TVS供您选择

1. 车规级TVS的应用 2.车规级TVS系列表格如下 3.方案推荐 12V汽车电源浪涌保护方案 方案优点&#xff1a;用于满足前装汽车的ISO7637-2 5A5BA测试&#xff0c;可采用单独大功率的TVS或PTCTVS的组合方案&#xff0c;满足ISO10605-2&#xff0c; 等级4&#xff0c;接触放电15K…

使用ai智能写作场景之gpt整理资料,如何ai智能写作整理资料

Ai智能写作助手&#xff1a;Ai智能整理资料小助手 Ai智能整理资料小助手可试用3天&#xff01; 通俗的解释一下怎么用ChatGPT来进行资料整理&#xff1a; 搜寻并获取指定数量的特定领域文章&#xff1a; 想像你在和我说话一样&#xff0c;告诉我你想要多少篇关于某个话题的文…

【QT+QGIS跨平台编译】之九十五:【QGIS_App跨平台编译】—【错误处理:找不到标识符QwtPolarPoint】

文章目录 一、找不到标识符QwtPolarPoint二、原因分析三、错误处理一、找不到标识符QwtPolarPoint 报错信息如下: 二、原因分析 未找到QWT_POLAR_VERSION 从而执行的函数: mypMarker->setPosition( QwtPolarPoint( currentInfo.azimuth, currentInfo.elevation )

Java 面试宝典:什么是可见性?volatile 是如何保证可见性的?

大家好&#xff0c;我是大明哥&#xff0c;一个专注「死磕 Java」系列创作的硬核程序员。 本文已收录到我的技术网站&#xff1a;https://skjava.com。有全网最优质的系列文章、Java 全栈技术文档以及大厂完整面经 什么是可见性&#xff1f; 可见性是指一个线程对共享变量所作…

数据结构(五)单链表专题

在开始之前&#xff0c;我先来给大家讲一下顺序表与链表的区别&#xff1a; 它们在堆上存储的差异&#xff1a; 我们可以很容易的知道&#xff0c;循序表是连续的有序的&#xff0c;但链表是杂乱的&#xff0c;它们通过地址彼此联系起来。 1. 链表的概念及结构 概念&#xff1…

阳光倒灌高准直汽车抬头显示器HUD太阳光模拟器

阳光倒灌高准直汽车抬头显示器HUD太阳光模拟器是一种高级别的模拟设备&#xff0c;用于模拟太阳光的光谱、强度及照射角度&#xff0c;应用于太阳能电池板、光伏系统等领域的研究和测试。其参数包括光谱范围、光强度、光源、照射角度、均匀性和稳定性&#xff0c;可根据需求调整…

java Web会议信息管理系统 用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 jsp 会议信息管理系统是一套完善的web设计系统&#xff0c;对理解JSP java SERLVET mvc编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&am…

数据结构——队列(C语言版)

前言&#xff1a; 在学习完数据结构顺序表和链表之后&#xff0c;其实我们就可以做很多事情了&#xff0c;后面的栈和队列&#xff0c;其实就是对前面的顺序表和链表的灵活运用&#xff0c;今天我们就来学习一下队列的原理和应用。 准备工作&#xff1a;本人习惯将文件放在test…