当前位置： 首页 > news >正文

使用 1panel面板 部署 springboot 和 vue

news 2025/9/18 23:43:51

代码仓库：还没弄

目录

  • 网站介绍
  • 安装步骤
  • 1. 准备云服务器
  • 2. 准备域名（可跳过）
  • 3. 安装1panel面板
  • 4. 服务器开放端口
  • 5. 进入1panel面板
  • 6. 安装并启动软件（服务器和面板开放端口）
  • 7. 打包并上传项目
    • 7.1 打包 Java项目（springboot ）项目并上传（端口我设置的是9090）
    • 7.2 打包 vue 项目并上传（端口我设置的是8200）
  • 8. 上传 并 创建Java运行环境（服务器和面板开放端口）
  • 9. 上传 并 添加网站 - 静态网站（vue）（服务器和面板开放端口）
  • 10. 数据库配置
  • 11. 修改项目里的数据库配置 并 重启Java服务
  • 12. 刷新对应网站，即可访问

网站介绍

仿照别人项目做了个基于 springboot 和 vue 的网站，在腾讯云服务器上，通过 宝塔面板 部署了该项目。

项目的技术栈：Vue3、Vite5、Axios、Element Plus、Wangeditor5、Highlightjs、Spring Boot2、Mybatis、MySQL8

安装步骤

1. 准备云服务器

买一个低配置的云服务器就行，哪家的都行

选择常见linux的发型版本，centos、debian、ubuntu 啥的都行

在这里插入图片描述

2. 准备域名（可跳过）

买个普通的域名，并接上服务器

国内域名需要备案，尽量写：个人学习项目，这样容易过

3. 安装1panel面板

前往1panel官网，准备安装

https://repository-proxy.fit2cloud.com/1panel/index.html

在这里插入图片描述

在这里插入图片描述

进入云服务器控制台，登录终端，并切换到root用户，再粘贴安装命令，进行安装

在这里插入图片描述

密码要是不知道or忘了，可去云服务器重置密码（上图红框处）

在这里插入图片描述

等待安装完成（约几分钟）

期间会要求配置一些选项，如文件保存路径、面板端口号、面板登录账号和密码

建议修改成好记忆的，当然也可以无脑回车按默认的来。不过不论如何，都建议保存到某个文件中，以防忘记。

如果你忘了面板信息也没事，登录终端，切换到root用户，输入以下命令

1pctl user-info

即可查看

在这里插入图片描述

4. 服务器开放端口

上面设置的端口号（假定是22），要在服务器那开放端口

在这里插入图片描述

写入22（假定是），然后保存

在这里插入图片描述

5. 进入1panel面板

访问面板地址，并输入用户名和密码。登录前后还需要同意协议

在这里插入图片描述

6. 安装并启动软件（服务器和面板开放端口）

先配置镜像加速，否则可能会安装失败

应用商店 - 已安装 - 快速跳转 - 镜像加速 - 设置

https://docker.1panel.live
https://ghcr.nju.edu.cn
https://docker.nju.edu.cn

返回应用商店 - 安装 OpenResty、MySQL、phpMyAdmin 这三款软件，并启动

在这里插入图片描述

可在 应用商店 - 已安装 - 查看各软件的端口，并在 云服务器 和 面板中开放该端口

在这里插入图片描述

在服务器开放端口

在这里插入图片描述

在面板开放端口

主机 - 防火墙 - 创建端口规则

在这里插入图片描述

7. 打包并上传项目

7.1 打包 Java项目（springboot ）项目并上传（端口我设置的是9090）

点击 m（maven） - 双击package，等待片刻，即可完成打包，最终是打包成了jar或者war文件

在这里插入图片描述

之后上传到面板文件

7.2 打包 vue 项目并上传（端口我设置的是8200）

修改后端端口（改成服务器的）

在这里插入图片描述

vscode软件 - NPM脚本 - build ，最后生成的是一个dist文件夹

在这里插入图片描述

之后上传到面板文件

8. 上传 并 创建Java运行环境（服务器和面板开放端口）

把 jar包之类的东西上传到面板文件中

网站 - 运行环境 - Java - 创建运行环境

运行目录 - 选中到 jar包

启动命令：java -jar xxx.jar （xxx,jar改成你自己jar包的名字）

端口号自己设置一下（可以设置成一样的），我这里设置的是9090

在这里插入图片描述

服务器和面板记得开放端口，前面说过方法，这里不重复

9. 上传 并 添加网站 - 静态网站（vue）（服务器和面板开放端口）

网站 - 网站 - 创建环境 - 静态网站

主域名处写下域名和端口就行，比如我写的是：106.53.164.141:8200

代号（就是网站目录的名称）自行设置

之后进入网站目录，把 dist文件夹上传上来

在这里插入图片描述

点进去刚刚设置的网站 - 网站目录 - 运行目录选择 /dist - 保存并重载

同时确保 root目录 选到的是 index文件夹（不是的话重选）

在这里插入图片描述

点击配置文件，把下面的代码加进去并保存

location / {try_files $uri $uri/ /index.html last; index index.html; 
}

在这里插入图片描述

服务器和面板记得开放端口，前面说过方法，这里不重复

10. 数据库配置

先确保 mysql 和 phpMyAdmin 这两个端口号都开放

数据库 - 新建数据库

按自己项目情况来填写

权限改为所有人

在这里插入图片描述

管理 - phpMyAdmin - 进入web端musql管理工具

选择数据库 - 导入 - 上传文件

选择sql文件并上传

在这里插入图片描述

向下滑动，点击执行

在这里插入图片描述

11. 修改项目里的数据库配置 并 重启Java服务

之后修改一下项目里的数据库配置并保存

在这里插入图片描述

修改配置后，需要重启Java项目

在这里插入图片描述

12. 刷新对应网站，即可访问

在这里插入图片描述

在这里插入图片描述

相关文章：

使用 1panel面板 部署 springboot 和 vue

代码仓库：还没弄 目录 网站介绍安装步骤1. 准备云服务器2. 准备域名（可跳过）3. 安装1panel面板4. 服务器开放端口5. 进入1panel面板6. 安装并启动软件（服务器和面板开放端口）7. 打包并上传项目7.1 打包 Java项目&#…...

编程日记 2024/8/5 6:29:27

快速体验LLaMA-Factory 私有化部署和高效微调Llama3模型（曙光超算互联网平台异构加速卡DCU）

序言 本文以 LLaMA-Factory 为例，在超算互联网平台SCNet上使用异构加速卡AI 显存64GB PCIE，私有化部署Llama3模型，并对 Llama3-8B-Instruct 模型进行 LoRA 微调、推理和合并。 快速体验基础版本，请参考另一篇博客：快…...

编程日记 2024/8/5 6:28:26

Cocos Creator 3.8.x bundle设置最佳方案

A： 项目开始场景(Start Scene)加载显示最快的Bundle设置方案：不要使用resources文件夹，除了项目开始场景(Start Scene)所在文件夹，将所有文件分类设置成Bundle； B： A方案较为麻烦，项目文件夹多时…...

编程日记 2024/8/5 6:27:25

【论文笔记】4D Millimeter-Wave Radar in Autonomous Driving: A Survey

原文链接：https://arxiv.org/abs/2306.04242 I. 引言 传统毫米波雷达（3D毫米波雷达）测量俯仰角的能力有限，数据通常仅包括距离、水平角和多普勒速度信息。此外，3D雷达数据存在噪声且分辨率低（尤其是水平角…...

编程日记 2024/8/5 6:26:24

搭建 Rancher 服务，配置k8s集群

1. 前提条件 前提条件： 安装docker，要求版本各节点版本一致。网上还有额外的要求：关闭swap、禁用selinux等等。 2. 搭建 Rancher 服务 直接通过docker命令实现即可，很方便。 docker run -d \--name rancher \--restart unles…...

编程日记 2024/8/5 6:25:23

数据恢复的定制之旅：打造SQL Server的专属恢复方案

数据恢复的定制之旅：打造SQL Server的专属恢复方案 在企业运营中，数据的安全性和可靠性是至关重要的。SQL Server作为企业级数据库解决方案，提供了多种数据恢复技术以应对不同的数据丢失场景。然而，面对特定的业务需求和复杂的数…...

编程日记 2024/8/5 6:24:22

Javascript常见算法详解

在JavaScript（JS）中，常见的算法涵盖了多个领域，从基础的数组操作到更复杂的排序、搜索和数据结构算法。下面是一些在JS中常见的算法示例： 1. 排序算法 Java排序算法-CSDN博客 冒泡排序（Bubble Sort&#x…...

编程日记 2024/8/5 6:23:21

MySQL数据管理 - 查询语句

文章目录 查询数据1 查询指定列2 条件查询3 合并查询4 模糊查询5 聚合函数查询6 对值进行排序7 分组查询8 分页查询9 数据库关联查询1 内连接 INNER JOIN2 LEFT JOIN3 右连接 10 数据库子查询参考 查询数据 数据库最常用的操作就是查询，也是数据操作的基础&#xf…...

编程日记 2024/8/5 6:22:20

经典图论算法回顾之Bellman-Ford算法

Dijkstra最短路径算法存在的一个问题是不能处理负权图（详见：经典图论算法回顾之Dijkstra算法。今天要回顾的Bellman-Ford算法（wikipedia：Bellman–Ford algorithm）可以求出有负权图的最短路径，并可以对最短…...

编程日记 2024/8/5 6:21:19

LinuxC++(10)：调用可执行程序

认识system函数 可以直接用system在代码中实现调用shell命令 /bin/ls -l /tmp表示执行ls -l命令，打开/tmp地址 而前面的/bin/表示这是shell命令，不可少，可以认为，/bin/后面的就是等价于shell里面输入的命令。 然后，cou…...

编程日记 2024/8/5 6:19:16

C语言指针·高级用法超详解（指针运算、野指针、悬空指针、void类型指针、二级以及多级指针）

目录 1. 指针的运算 2. 野指针和悬空指针 2.1 野指针 2.2 悬空指针 3. void类型指针 4. 二级指针和多级指针 4.1 命名规则 4.2 作用 4.2.1 二级指针可以操作一级指针记录的地址 4.2.2 利用二级指针获取变量中记录的数据 1. 指针的运算 文章开始前可以先了…...

编程日记 2024/8/5 6:17:14

SQL注入：MySQL元数据库,外网实战手工SQL注入

MySQL元数据库 MySQL的元数据库是一组特殊的数据库，用于存储MySQL服务器的元数据信息，在sql注入中较为常用为以下两种元数据库： information_schema：这个数据库包含了MySQL服务器上所有其他数据库的元数据信息。例如数据库名、表…...

编程日记 2024/8/5 6:14:10

接口与抽象类有什么区别

接口：只能包含抽象方法，成员变量只能是public static final 类型 是对行为的抽象 先约定再接口再实现 抽象类：包含成员变量和一般方法和抽象方法，当继承时，子类必须实现抽象类中的抽象方法...

编程日记 2024/8/5 6:12:08

【时时三省】unity test 测试框架 使用 code blocks 移植（核心文件：unity.c， unity_fixture.c）

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 目录 1，移植介绍 2，使用 Code::Blocks 17.12 创建工程 3，搬移文件入工程目录 4，更改代码 5，向工程添加文件 6，运…...

编程日记 2024/8/5 6:10:05

安装Docker以及安装过程中的错误解决

一、纯享版教程＋操作截图 环境：centOs 7 FinalShell ！！！此教程针对第一次安装docker的友友，如果已经安装过且报错的朋友，请移步报错合集。 1.卸载旧版本（无论是否安装过都建议执…...

编程日记 2024/8/5 6:08:03

PXE实验

实验前准备 关闭VMware的dhcp 点击 编辑 点击 虚拟网络编辑器 选择 NAT模式 将dhcp取消勾选 准备两台虚拟机 一台试验机，（网络环境正常并且有图形化的界面的rhel7） 一台测试机 init 5 --------------> 开启图形化界面 如…...

编程日记 2024/8/5 6:06:01

Spring - 解析 统一数据格式返回以及统一异常处理

接上篇文章的统一数据格式返回… 文章目录 1. 统一异常处理1.1 使用 2. 统一数据返回和统一异处理是怎么实现的2.1 initHandleAdapters2.2 initHandleExceptionResolvers 1. 统一异常处理 1.1 使用 统一异常处理的两个关键的注解是ControllerAdvice ExceptionHandler Contro…...

编程日记 2024/8/5 6:02:58

用Manim实现——计算和绘制图形下方区域

用Manim实现——计算和绘制图形下方区域 get_area 函数 get_area是一个用于计算和绘制图形下方区域的函数，常用于图形动画库（如 Manim） get_area(graph, x_rangeNone, color(ManimColor(#58C4DD),ManimColor(#83C167)), opacity0.3, bounde…...

编程日记 2024/8/5 6:01:56

MySQL 保姆级教程（十五）： 组合查询

第 17 章 组合查询 17.1 组合查询 MySQL 允许执行多个查询（多条 SELECT 语句），并将结果作为单个查询集返回 17.2 创建组合查询 可用 UNION 操作符来组合数条 SQL 查询 17.2.1 使用 UNION 输入: SELECT user.USER FROM user UNION SELEC…...

编程日记 2024/8/5 6:00:55

《动手做科研》06. 如何产生新的研究想法

地址链接:《动手做科研》06. 如何产生新的研究想法 欢迎加入我的知识星球，定期分享AI论文干货知识！ 导读: 提出好的研究想法是相当困难的，特别是当你刚接触一个领域时——这需要对文献中的空白有所了解。然而，产生研究想法的过程可…...

编程日记 2024/8/5 5:55:49

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...

编程新知 2025/9/14 19:44:52

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...

编程新知 2025/9/18 12:23:43

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...

编程新知 2025/8/22 5:05:39

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/8/22 19:28:03

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/9/12 23:21:57

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/9/16 2:53:51

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/9/16 19:44:37

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/7/7 16:04:22