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

使用 1panel面板 部署 springboot 和 vue

news 2025/11/10 0:51:01

代码仓库：还没弄

目录

  • 网站介绍
  • 安装步骤
  • 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

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/11/8 5:08:11

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/10/16 1:31:30

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/11/9 2:26:31

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/11/7 20:34:41

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/11/8 6:45:42