VUE前后端分离 跨域访问后端接口 宝塔Nginx设置反向代理_vue前后端分离 跨域访问后端接口 宝塔nginx设置代理-CSDN博客

mikel阅读(244)

来源: VUE前后端分离 跨域访问后端接口 宝塔Nginx设置反向代理_vue前后端分离 跨域访问后端接口 宝塔nginx设置代理-CSDN博客

VUE打包后生成的文件放到宝塔,能通过IP正常访问
但是调用后端接口的时候还是访问当前的IP
如访问的IP地址是192.168.1.139:8081/login
访问后端的接口是192.168.1.139:8081/api
实际后端接口是192.168.1.139:8199/api
使用宝塔面板的反向代理。
网站设置 里找到反向代理
打开高级功能,里面的代理目录就是后端接口匹配的字符,例如后端接口都是用/api/xxx的形式,就填/api
目标URL填实际后端的接口地址,也可以是本地的127.0.0.1
具体配置:
#PROXY-START/
# 所有静态请求都由nginx处理,存放目录为/www/wwwroot/hat.com
location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {
root    /www/wwwroot/hat.com;
}
location /api
{
    proxy_pass http://127.0.0.1:8199;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
    #Set Nginx Cache
    add_header Cache-Control no-cache;
}
#PROXY-END/
AI写代码
bash
————————————————
                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_43924621/article/details/121039944

Vue项目在宝塔面板上的部署流程-CSDN博客

mikel阅读(283)

来源: Vue项目在宝塔面板上的部署流程-CSDN博客

1. Vue项目执行打包命令进行打包得到dist文件夹

npm run build
AI写代码
2. 打开宝塔主页进入网站,选择添加站点

 

3. 将自己的服务器网址作为域名,默认为80端口,可自行设置备注和根目录,点击提交

 

4. 点击设置->配置文件,加入如下代码(配置跨域问题),点击保存(建议手敲,格式很重要)

location /api {
proxy_pass http://gmall-h5-api.atguigu.cn;
}
AI写代码

5. 点击文件,进入前面设置的地址,将原有文件全部删除

 

6. 将前面打包的dist文件夹里面的文件拖到宝塔文件中,进行上传

 

 

7. 进入nginx文件夹下的conf文件夹,找到nginx.conf文件,双击进入编辑,找到server下的listen,将端口改为前面设置的端口,保存即可(需要部署多个项目时复制多个server进行配置)

 

8. 输入前面设置的域名即可进入制作的项目中
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/weixin_56868125/article/details/128935456

【项目配置】vue3项目上传到宝塔面板,图文保姆级教程!_宝塔部署vue3项目-CSDN博客

mikel阅读(252)

来源: 【项目配置】vue3项目上传到宝塔面板,图文保姆级教程!_宝塔部署vue3项目-CSDN博客

前言
这几天在b站上学习vue3项目,视频的后续也没有提到项目打包上传的事情。自己之前在阿里云买了一年服务器,刚好可以用上。

目录

一、项目打包

二、配置宝塔面板

1、新建站名与基本配置

2、配置伪静态代码

3、上传dist文件夹

4、修改网站目录

三、测试

一、项目打包
在终端打开项目目录,打包一下。

 

 

打包成功后会在目录中生成一个dist文件夹

 

二、配置宝塔面板
(跳过登录的环节,这里默认大家登录成功)

1、新建站名与基本配置

 

 

 

 

 

 

 

2、配置伪静态代码
location / {
if (!-e $request_filename) {
rewrite ^(.*)$ /index.html?s=/$1 last;
break;
}
}

AI写代码
JavaScript
运行
3、上传dist文件夹
(找到站点存放文件的位置)

 

 

 

4、修改网站目录

三、测试
(记得是自己真实的公网ip+放行端口)

 

————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/orbit4/article/details/142213726

[云服务器]linux宝塔面板下配置连接mysql的jdbc配置及设置通过自己的域名来访问web项目_jdbc 配置域名访问-CSDN博客

mikel阅读(169)

来源: [云服务器]linux宝塔面板下配置连接mysql的jdbc配置及设置通过自己的域名来访问web项目_jdbc 配置域名访问-CSDN博客

由于之前自己的云服务器在搭建网站的时候就已经安装好了MySQL,所以我对自己服务器的MySQL其实并不怎么熟悉,jdbc一些简单东西也折腾了很久,特记录一些
一.配置连接mysql的jdbc
首先改下自己jdbc工具类的链接名等,我的是配置文件就改配置文件了,主要需要注意url改成自己服务器的公网IP地址
#mysql properties
driverName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://IP地址:3306/web_test?&useSSL=false&serverTimezone=UTC
user=mizuhokaga
password=1234567
AI写代码
python
运行
1
2
3
4
5
user和password来自宝塔数据库面板不是本地数据库root与root密码!,我们自己新建一个数据库(用原有的还得在phpMyAdmin中改权限),我命名为web_test,注意设置权限:所有人
这是设置用户名和密码就是jdbc配置文件的user和password!
在发布项目之前最好在navicat等工具里进行连接测试,连接成功再发表项
二.设置通过自己的域名来访问web项目
这里我使用的是我的二级域名
①阿里云控制台云解析DNS中添加网站
这个就不多说了
AI写代码
1
②宝塔添加网站并设置反向代理
先宝塔添加网站,之后设置反向代理
AI写代码
1
这样就可以通过域名访问项目了,当然也可以通过ip
————————————————
                            本文为博主原创文章,转载请显著位置标明出处,未经博主允许不得用于商业目的。
原文链接:https://blog.csdn.net/qq_44831907/article/details/104834232

Java报错:org.springframework.jdbc.CannotGetJdbcConnectionException,Could not get JDBC Connection;-CSDN博客

mikel阅读(203)

来源: Java报错:org.springframework.jdbc.CannotGetJdbcConnectionException,Could not get JDBC Connection;-CSDN博客

关于这个报错:org.springframework.jdbc.CannotGetJdbcConnectionException,Could not get JDBC Connection;因为不能获取JDBC连接,主要有2大错误:

一.数据库配置文件错误
查看项目的jdbc.propertise文件,是否全部写正确了。查看数据库名,用户名,密码是否正确

正确的配置如下:

jdbc.driver=com.mySQL.jdbc.Driver
jdbc.url=jdbc:mySQL://localhost:3306/database?useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=root
AI写代码
java
运行

二. 驱动版本的问题
mysql-connector-java 5.0/1.x版本的连接参数为:

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/database?useUnicode=true&characterEncoding=utf-8
username=root
password=root
AI写代码
java
运行
mysql-connector-java 8.0.x 版本的连接参数为:

driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/database?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
username=root
password=root
AI写代码
java
运行
注意事项:

“username(用户名)”和”password(密码)”要和本电脑的一致。
在xml中配置时,需要把”url”内容中的”&”全部换成”&”,不然会报错,点我了解错误详情。
例如:”useUnicode=true&characterEncoding=utf-8″中的”&”换成”&”
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/wls666/article/details/89886656

SpringBoot项目部署到宝塔面板的详细过程_宝塔部署springboot项目-CSDN博客

mikel阅读(216)

SpringBoot项目部署到宝塔面板的详细过程

来源: SpringBoot项目部署到宝塔面板的详细过程_宝塔部署springboot项目-CSDN博客

前言
本次以SmartAdmin项目为例,通过宝塔面板部署,对部署过程进行一个完整演示,不同项目的部署也可能略有不同

准备工具:可正常登录宝塔面板、SpringBoot项目(本文以SmartAdmin的开源项目为例)、Navicat Premium 17(或者其他数据库管理软件,亦或者是数据库的SQL脚本)、IntelliJ IDEA 2024.2.3。

本项的部署以测试环境为例,涉及到配置相关的,可以根据自己的项目按需修改即可。上传流程建议按照文档流程,先上传数据库再上传后端,最后在上传前端和移动端。本文主要介绍如何上传后端项目。

本文使用到的项目为SmartAdmin的开源项目,用户可在此基础上添加自己的各种Api或者前端页面,项目地址:SmartAdmin | 1024创新实验室

项目的部署总体来说分为三步,第一步是上传数据库;第二步是对项目在本地进行必要的修改,并打包上传;第三步是在服务器启动项目。本文就是围绕上述步骤进行的,部署的环境为test环境,实际过程可参考下文,对于不同项目的部署,每一小节之后都会有具体说明:

一、上传数据库
1、SQL脚本的获取
如果本身就有SQL脚本,可忽略这一步。

以Navicat为例,不同软件操作方式可能不完全一样。首先打开Navicat,找到项目对应的数据库smart_admin_v3,右键点击数据库,然后转存为SQL文件,注意需要选择转存结构和数据。

 

然后选择一个本地路径保存即可。

2、上传数据库
首先在宝塔面板新建数据库,设置名称和密码(与后文对应即可),这里名称设置为了smart_admin_v3,密码设置成了123456。输入数据库名之后,用户名默认自动输入,与数据库名保持一致。

 

建好之后点击管理跳转到phpMyAdmin数据库管理页面。

 

或者点击phpMyAdmin均可访问。

 

在点击新建的smart_admin_v3架构,点击SQL,把我们刚才转存的SQL文件的内容手动复制进来。可以通过记事本或者其他的IDE打开第一步转存的SQL文件,全选,然后复制到phpMyAdmin页面。

 

然后ctrl+A选中所有SQL语句,点击执行即可。

 

二、项目的修改与打包
项目的修改主要是修改一些项目配置,最重要的是数据库地址。smartAdmin项目使用了.env文件进行环境管理,这里我们只需要修改运行环境,并且修改相应运行环境的配置文件即可。如果你的项目没有.env文件或者你部署之后就完事了,不用考虑运维的话,也可以直接修改当前文件的配置文件。

1、修改后端配置
找到sa-base目录下的resourc目录,本项目使用测试环境,故再打开test目录内yaml文件,这里主要修改数据库连接信息。

 

数据库地址可以选择本地(127.0.0.1),因为服务器的数据库和后端项目是在同一个服务器。下面数据库用户名和密码修改为上一章新建的数据库的用户名和密码即可。

 

其他配置可能也需要修改,但是那些配置不影响部署,这里暂时忽略。

既然都已经到部署这一步了,想必大家都已经知道如何在本地启动项目,如何修改数据库的配置了。不清楚的可以看这篇文章

快速在本地运行SpringBoot项目的流程介绍_怎么运行springboot项目-CSDN博客

上面介绍的主要是修改数据库配置,不同项目目录结构可能不太相同。可以使用搜索功能搜索jdbc就可以找到数据库配置的位置了。

2、打包后端项目
Smart admin官网文档给的打包指令如下:

开发环境:mvn clean package -Dmaven.test.skip=true -P dev

测试环境:mvn clean package -Dmaven.test.skip=true -P test

预发布环境:mvn clean package -Dmaven.test.skip=true -P pre

生产环境:mvn clean package -Dmaven.test.skip=true -P prod

实际在黑框运行时mvn clean package -Dmaven.test.skip=true -P test指令时会报错。这里选择手动修改pom文件更改环境,关闭测试,然后使用它的生命周期进行打包:

找到根目录下的pom文件,最下面定义了运行环境,其中有

<activation>
<activeByDefault>true</activeByDefault>
</activation>

字样的代码,默认给了dev环境,这里把他剪切到test标签下,如下图。

 

记得刷新maven!而且记得打包之后把这个配置再改回来!改完之后务必再刷新一遍Maven!

然后点击IEDE右侧的maven,禁用测试,先执行一遍clean,在执行package。

 

这时就可以在sa-admin的target目录下,找到一个以.jar结尾的jar包,这个jar包就是我们打包好的jar包。

 

将此jar包上传到宝塔面板,这里上传的目录是/home/smart_admin_v3/2025.3.10目录下:

 

如果你的项目不需要修改运行环境,可以直接执行声明周期里跳过测试(可选)、clean、package。

三、启动项目
1、添加java项目
打开网站,选择java项目,添加java项目,目录选择刚才上传的jar包,勾选放行端口(如果没有勾选,后续也可在安全内手动放行),改一下项目名字(可选),选一下jdk版本(本项目使用的1.8,如果没有你项目需要的jdk,可以在宝塔面板自行下载)后启动项目

 

多切换几下页面等待一会儿,当显示放行的端口时即启动成功。

 

2、设置域名
找到刚才的启动的项目后方有一个设置,点击设置

 

为此项目添加一个域名,需要注意域名格式。这里添加的是test.zh-online.tech,域名需要在服务器解析之后才能正常使用,我们服务器使用的是腾讯云,因此就需要在腾讯云解析此域名。需要记住这个域名,后面前端项目和移动端项目要用到。

 

四、总结
相比之下后端部署还是比较简单的。部署时先上传数据库,在上传后端项目。后端项目打包之前需要修改配置文件,最关键的是修改数据库相关的配置,其他的配置按需修改。最后就是部署了,部署时域名需要在服务器解析域名(本文未介绍)才可正常使用。

关于前端部署可以看:
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/qq_73427280/article/details/146280389

SpringBoot项目部署到宝塔面板的详细过程

mikel阅读(292)

通过宝塔面板部署SpringBoot项目可以简化服务器管理流程,以下是具体步骤:

1. 上传数据库

  • 获取SQL脚本:使用数据库管理工具(如Navicat)将项目数据库导出为SQL文件。
  • 创建数据库:在宝塔面板中,新建数据库并设置名称和密码。
  • 导入SQL文件:通过phpMyAdmin,将SQL脚本内容复制并执行,完成数据库导入。

2. 修改与打包项目

修改配置文件

  • 修改application.yml.env文件中的数据库连接信息:

spring:

datasource:

url: jdbc:mysql://127.0.0.1:3306/your_database_name

username: your_username

password: your_password

  • 确保其他配置(如端口号、环境变量)符合部署需求。

打包项目

  • 使用Maven命令打包SpringBoot项目:

mvn clean package -Dmaven.test.skip=true -P prod

  • 打包完成后,在target目录下找到生成的.jar文件。

3. 部署与启动项目

上传Jar包

  • 将打包好的.jar文件上传至宝塔面板指定目录,例如:/home/project_name/.

添加Java项目

  1. 在宝塔面板中选择“Java项目”。
  2. 添加新项目,选择上传的.jar文件路径。
  3. 配置JDK版本(如1.8或17),并勾选“放行端口”。
  4. 启动项目,等待显示端口号后确认运行成功。

4. 配置域名与代理

  • 在宝塔面板中为项目绑定域名,并确保域名已在DNS解析中配置。
  • 使用Nginx反向代理,将域名请求转发到SpringBoot服务监听的端口。

5. 验证与优化

  • 通过域名访问测试服务是否正常运行。
  • 定期检查日志,确保服务稳定性。

通过以上步骤,您可以快速完成SpringBoot项目在宝塔面板上的部署。

maven配置报错The JAVA_HOME environment variable is not defined correctly,this environment variable is_this environment variable is needed to run this pr-CSDN博客

mikel阅读(129)

来源: maven配置报错The JAVA_HOME environment variable is not defined correctly,this environment variable is_this environment variable is needed to run this pr-CSDN博客

maven配置报错The JAVA_HOME environment variable is not defined correctly,this environment variable is needed to run this program.的解决方法
配置maven的系统环境变量后,mvn -version提示

那肯定是JAVA_HOME配置的不对,于是查看了一下

没发现有什么问题,于是找度娘,以下是博主DistressRroke _chen的方法,似乎不使用我的问题

于是又看到了另外一个方法

尝试后依然没有解决,然后仔细看我的JAVA_HOME到底哪里不一样,后来发现是它的后面有个“;”,然后将其删除

再次mvn -v

————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/HarryMing/article/details/121160829

用VScode运行Vue项目详细全过程(node.js环境的配置)-CSDN博客

mikel阅读(286)

来源: 用VScode运行Vue项目详细全过程(node.js环境的配置)-CSDN博客

在用VScode运行Vue项目前,我们需要先配置node.js环境,就类似于使用eclipse前需要配置Java环境的这个过程。

一、安装node.js并配置环境变量
1、安装

从官网下载安装包,解压到指定位置,就相当于安装完成了。然后在解压后的目录下新建node_global和node_cache这两个文件夹。

node_global:npm全局安装位置

node_cache:npm缓存路径

 

2、配置环境变量

在系统变量里添加一个名为NODE_HOME的变量,值为node.js的安装路径

 

然后在path中添加:%NODE_HOME%和%NODE_HOME%\node_global这两个变量

 

环境变量配置好后,打开cmd,输入node -v和npm -v,若显示出版本号,说明安装配置成功。

 

3、配置npm全局模块路径和cache默认安装位置

这一步是将前面安装之后新建的两个文件夹node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来

打开cmd,将执行目录切换到node.js的安装目录,分别执行以下命令,最好以管理员身份运行cmd,不然可能导致无法识别。

(注意!!从这一步开始的以下所有关于npm的在cmd里的命令操作都要切换到node.js的安装目录下执行)

npm config set prefix “D:\Program Files\node-v10.16.0\node_global”

npm config set cache “D:\Program Files\node-v10.16.0\node_cache”

 

 

注意,路径用的引号是英文状态下的双引号,不是单引号,也不是中文的双引号。

4、修改npm镜像

使用npm的官网镜像下载依赖包速度太慢,为了提高速度,这里我们使用npm淘宝镜像,同样是在cmd中,将执行目录切换到node.js的安装目录,执行以下命令

npm install -g cnpm –registry=https://registry.npm.taobao.org

5、安装vue-cli脚手架

以上都设置好后,重新打开cmd,执行以下命令,然后等待安装完成就行。

(!!!现在好像把cnpm禁用了,如果执行报错的话,就试试用npm,以下涉及到cnpm的,凡是不能执行,都先试试换npm)

cnpm install -g @vue/cli

注意!!以上所有的安装过程,在node版本上可能会出现坑,最好安装稳定版本node10,之前安装失败过一次,装的是node12,然后在第5步装vue脚手架的时候,一直报错如下图,看了网上的经验,说是node版本问题,换成10之后果然就解决了

 

二、在VScode上跑clone来的vue项目
能正常运行的vue项目的目录里都有一个名为node_modules的文件夹,里面存放了运行这个vue项目需要的所有依赖包,一般来讲,从网上直接clone来的别人的项目目录里是不会包含node_modules文件夹的,因为占得内存太大。所以要想运行别人的项目,必须先重新给它下载依赖包。

打开VScode,点击file/open folder,选择项目文件夹,点击打开,按Ctrl+shift+Y呼出终端,执行以下命令,等待npm安装完成

(因为前面已经设置好了cnpm,所以这里可以直接用cnpm替换npm进行安装)

cnpm install

 

npm安装完成后,项目目录下就会出现node_modules文件夹了

 

然后执行cnpm run dev,运行vue项目

cnpm run dev

 

出现以上就代表项目成功运行,在浏览器中输入http://localhost:8090即可看到项目主界面。

 

注意!!如果你用dev出现以下图中的错,那么就把命令换成cnpm run serve试试,因为dev/start是老项目的执行方法,新项目一般是serve

 

PS: 端口号是可以自己修改的,在这里是8090,设置的端口最好不要和其他程序端口一样,以免产生冲突。

在项目目录下找到config文件夹,打开config里的index.js文件,里面可以设置端口。

————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/D_gloria/article/details/118699912

SpringBoot项目访问网页空白页报错:Whitelabel Error PageThis application has no explicit mapping for /error - guohao施 - 博客园

mikel阅读(168)

来源: SpringBoot项目访问网页空白页报错:Whitelabel Error PageThis application has no explicit mapping for /error – guohao施 – 博客园

刚开始搭建Spring Boot 微服务,页面报

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Sat Feb 29 16:42:04 CST 2020
There was an unexpected error (type=Not Found, status=404).
No message available

 经过排查,总结原因有三

方法1:看是否在\src\test\java\com\example\demo目录下创建了controller包,在controller包里创建Controller类

 

方法2:是否地址输入错误

http://localhost:8080/demo

这里的“/demo”取决于HelloController类中 @RequestMapping(“/demo”) 引号里的内容!

 

方法3:是否正确编辑XXXXXApplication类

新建的springboot项目,其中的XXXXApplication类是不跟controller包同一级别的,是需要将XXXXApplication类放在上一层中,像我这样的新手就往往直接拉出来,

忽略了修改所在的包路径