若依前后端分离版运行教程、打包教程、部署教程

  1. 后端打包教程

注意:需要先运行redis

2、前端运行教程

2.1安装依赖

2.2运行

打开浏览器查看,地址:http://localhost:80

3、前端打包教程

3.1打包

3.2运行打包好的文件,先找到打包好的文件

这是nginx的文件结构

将打包好的文件放到html目录下

这是index.html文件所在目录

配置nginx代理规则

启动nginx

启动后进入浏览器查看,地址:http://localhost:80/

以下是重启nginx的命令:nginx -s reload

以下是重启nginx的命令:nginx -s reload
nginx  启动
nginx -s stop  停止
nginx -s quit  安全退出
nginx -s reload  重新加载配置文件  如果我们修改了配置文件,就需要重新加载。
ps aux|grep nginx  查看nginx进程

接口异常是因为请求发送不到后端

发现向后端请求  “生成验证码”  时发送到了http://localhost/prod-api/captchaImage

而后端端口是8080,本机地址是localhost,也可以用127.0.0.1表示

按ctrl+shift+f键,找到生成二维码的接口

发现这个控制器类没有配置访问地址,只有方法配置了访问地址,所以想要进入该方法,就应该发请求到localhost:80/captchaImage

所以前端应该要配置nginx代理规则:将所有以/prod-api/开头的请求全部代理到http://127.0.0.1:8080/

比如:http://localhost/prod-api/captchaImage会代理到,会变成http://localhost/captchaImage

个人猜想:应该是把http://127.0.0.1:8080/prod-api/改成了http://127.0.0.1:8080/,后面的内容没变

配置代码如下


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;server {listen       80; #监听80端口server_name  localhost; #服务器的ipv4地址#charset koi8-r;#access_log  logs/host.access.log  main;location / { #默认首页,访问/时,返回html/dist目录下的index.html(即访问localhost:80/时,返回html/dist目录下的index.html)root   html/dist;index  index.html index.htm;try_files $uri $uri/ /index.html; #加上这一行,页面刷新就不会出现404}location /prod-api/ { #表示当请求的路径以 "/prod-api/" 开头时,应用后续的配置规则。proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://127.0.0.1:8080/; #表示将请求转发到本地的 127.0.0.1:8080 地址。}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {#    listen       8000;#    listen       somename:8080;#    server_name  somename  alias  another.alias;#    location / {#        root   html;#        index  index.html index.htm;#    }#}# HTTPS server##server {#    listen       443 ssl;#    server_name  localhost;#    ssl_certificate      cert.pem;#    ssl_certificate_key  cert.key;#    ssl_session_cache    shared:SSL:1m;#    ssl_session_timeout  5m;#    ssl_ciphers  HIGH:!aNULL:!MD5;#    ssl_prefer_server_ciphers  on;#    location / {#        root   html;#        index  index.html index.htm;#    }#}}

重启nginx后刷新浏览器,成功了

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

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

相关文章

SpringAi 会话记忆功能

在使用chatGPT,豆包等产品后,就会发现他们的会话有“记忆”功能。 那么我们用API接口的话,这个是怎么实现的呢? 属于比较粗暴的方式,把之前的内容与新的提示词一起再次发给大模型。让我们看到他们有记忆功能。 下面介绍…

基于Python的经济循环模型构建与可视化案例

一、代码结构概览 该代码构建了一个包含经济数据生成、可视化分析和政策模拟的交互式经济系统仿真平台,主要包括三大模块: 多部门经济数据生成:模拟包含产业关联的复杂经济数据 增强型可视化:提供多维度的经济数据分析视图 Das…

第十六届蓝桥杯大赛软件赛省赛 Python 大学 B 组 部分题解

题面链接Htlang/2025lqb_python_b 个人觉得今年这套题整体比往年要简单许多,但是G题想简单了出大问题,预估50101015120860,道阻且长,再接再厉 A: 攻击次数 答案:103?181?题目没说明白每回合是…

C++基础精讲-05

文章目录 1.构造函数初始化列表1.1 初始化列表的使用1.2 有参构造函数的默认值 2.对象所占空间大小2.1 大小的计算2.2 内存对齐机制 3. 析构函数3.1 基本概念3.2 总结 4.valgrind工具集4.1 介绍4.2 memcheck的使用 5. 拷贝构造函数5.1 拷贝构造函数定义5.2 浅拷贝/深拷贝5.3 拷…

文章记单词 | 第28篇(六级)

一,单词释义 shirt /ʃɜːt/ n. 衬衫;衬衣commonly /ˈkɒmənli/ adv. 通常地;一般地;普遍地pick /pɪk/ v. 挑选;采摘;捡起;选择;n. 选择;鹤嘴锄;精华com…

安装低版本Pytorch GPU

网上很多教程都是自动安装,不指定版本,其实有大问题。而且torch、torchvision、torchaudio的版本必须是对应,所以一旦版本不对,就可能会出现各种问题。 其实Pytorch官网就已经给出了安装低版本的教程 登入Pytorch官网 点击previo…

2025认证杯挑战赛B题【 谣言在社交网络上的传播 】原创论文讲解(含完整python代码)

大家好呀,从发布赛题一直到现在,总算完成了认证杯数学中国数学建模网络挑战赛第一阶段B题目谣言在社交网络上的传播完整的成品论文。 本论文可以保证原创,保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半…

并发编程--互斥锁与读写锁

并发编程–互斥锁与读写锁 文章目录 并发编程--互斥锁与读写锁1. 基本概念2. 互斥锁2.1 基本逻辑2.2 函数接口2.3示例代码12.4示例代码2 3. 读写锁3.1 基本逻辑3.2示例代码 1. 基本概念 互斥与同步是最基本的逻辑概念: 互斥指的是控制两个进度使之互相排斥&#x…

亲手打造可视化故事线管理工具:开发全流程、难点突破与开发过程经验总结

亲手打造可视化故事线管理工具:开发全流程、难点突破与开发过程经验总结 作为还没入门的业余编程爱好者,奋战了2天,借助AI开发一款FLASK小工具,功能还在完善中(时间轴可以跟随关联图缩放,加了一个用C键控制…

网络攻防技术-虚拟机安装和nmap端口扫描

文章是博主上实验课做的实验和心得体会,有些高深的地方我可能也比较一知半解,欢迎来交流。全文参考课程所习得,纯粹梳理知识点和分享,如有不妥请联系修改。 文章侧重实验部分,也会讲述实验相关的理论知识。理论后期如果…

中断的硬件框架

今天呢,我们来讲讲中断的硬件框架,这里会去举3个开发板,去了解中断的硬件框架: 中断路径上的3个部件: 中断源 中断源多种多样,比如GPIO、定时器、UART、DMA等等。 它们都有自己的寄存器,可以…

动手学深度学习:手语视频在VGG模型中的测试

前言 其他所有部分同上一篇AlexNet一样,所以就不再赘诉,直接看VGG搭建部分。 模型 VGG是第一个采取块进行模块化搭建的模型。 def vgg_block(num_convs,in_channels,out_channels):layers[]for _ in range(num_convs):layers.append(nn.Conv2d(in_ch…

信息学奥赛一本通 1498:Roadblocks | 洛谷 P2865 [USACO06NOV] Roadblocks G

【题目链接】 ybt 1498:Roadblocks 洛谷 P2865 [USACO06NOV] Roadblocks G 【题目考点】 1. 图论:严格次短路径 严格次短路的路径长度必须大于最短路的路径长度。 非严格次短路的路径长度大于等于最短路的路径长度。 【解题思路】 每个交叉路口是一…

Arm CPU安全通告:基于TrustZone的Cortex-M系统面临多重故障注入攻击

安全之安全(security)博客目录导读 目录 一、概述 二、致谢 三、参考文献​​​​​​Black Hat USA 2022 | Briefings Schedule 四、版本历史 一、概述 Arm注意到BlackHat 2022大会官网发布的演讲摘要《糟糕..!我又一次故障注入成功了!——如何突…

【频域分析】包络分析

【频域分析】包络分析 算法配置页面 可以一键导出结果数据 报表自定义绘制 获取和下载【PHM学习软件PHM源码】的方式 获取方式:Docshttps://jcn362s9p4t8.feishu.cn/wiki/A0NXwPxY3ie1cGkOy08cru6vnvc

ElMessage

以下是关于 ElMessage 的详细说明和使用方法: 什么是 ElMessage ElMessage 是 Element Plus 提供的一个全局消息提示组件,用于在页面上显示短暂的消息提示。它可以用于显示成功、警告、错误等不同类型的消息。 基本用法 1. 引入 ElMessage 在使用 E…

全面解析 KaiwuDB 数据库的数据类型

在现代数据库管理系统中,数据类型的选择至关重要。它不仅决定了数据存储的效率,还影响到查询的速度和数据的一致性。KaiwuDB,作为一款开源的分布式数据库,提供了多种数据类型,以适应不同的业务需求和存储要求。本文将全…

【计网】网络交换技术之分组交换(复习自用,重要1)

复习自用的,处理得比较草率,复习的同学或者想看基础的同学可以看看,大佬的话可以不用浪费时间在我的水文上了 另外两种交换技术可以直接点击链接访问相关笔记: 电路交换 报文交换 一、分组交换的定义 1.定义 分组交换&#x…

C++ STL及Python中等效实现

一. STL 概述 STL 包含以下核心组件: 容器(Containers):存储数据的结构,如数组、链表、集合等。迭代器(Iterators):用于遍历容器的接口,类似指针。算法(Alg…

python-63-前后端分离之图书管理系统的Flask后端

文章目录 1 flask后端1.1 数据库实例extension.py1.2 数据模型models.py1.3 .flaskenv1.4 app.py1.5 运行1.6 测试链接2 关键函数和文件2.1 请求视图类MethodView2.2 .flaskenv文件3 参考附录基于flask形成了图书管理系统的后端,同时对其中使用到的关键文件.flaskenv和函数类M…