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

使用 1panel面板 部署 springboot 和 vue

news 2025/7/14 4:10:03

代码仓库：还没弄

目录

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/6/27 2:57:24

conda相比python好处

Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理&#xff1a…...

编程新知 2025/6/15 5:36:36

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/10 11:31:41

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/7/6 2:55:54

django filter 统计数量 按属性去重

在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...

编程新知 2025/6/24 3:45:54

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/7/13 7:24:52

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...

编程新知 2025/6/21 22:37:01

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/7/9 2:45:58

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析，分为​​已启动​​和​​未启动​​两种场景： 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​：当其他组件（如Activity、Service）通过ContentR…...

编程新知 2025/7/9 2:38:35

python基础语法Ⅰ

python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器，来进行一些算术…...

编程新知 2025/7/13 22:32:27