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

基于Vue 3.x与TypeScript的PPTIST本地部署与无公网IP远程演示文稿

文章目录

    • 前言
    • 1. 本地安装PPTist
    • 2. PPTist 使用介绍
    • 3. 安装Cpolar内网穿透
    • 4. 配置公网地址
    • 5. 配置固定公网地址

前言

本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist,并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。

PPTist 是一个基于Vue3.x和TypeScript构建的在线演示文稿应用,模仿了微软PowerPoint 的大部分常用功能。它允许用户在线编辑和展示 PPT,并支持将文件导出为 PPTX 格式。除此之外,还支持绘制各种图形和图表,支持插入视频和音频,与移动端使用,目前项目在github上面收获了5.6K star!

自己在本地部署PPTist的优势是无需安装和购买许可,也大大减少了在不同设备上出现的兼容性问题。不过只能本地使用也有一定局限性,但只要安装内网穿透工具就能轻松解决没有公网IP,也能远程访问本地服务的问题。

1719299881503

1. 本地安装PPTist

接下来教大家如何在Windows系统本地安装 PPTist

项目地址:https://github.com/pipipi-pikachu/PPTist

首先需要从github上克隆 PPTist(如果没有安装git的话,进入git官网进行下载windows版本 https://git-scm.com/downloads)

image-20240506142150939

打开终端,从github下载项目到本地,执行下面的命令:

git clone https://github.com/pipipi-pikachu/PPTist.git

image-20240625152907269

然后进入项目目录:

cd PPTist

然后安装依赖:

npm install

image-20240625154000788

最后运行项目即可:

npm run dev

1719301237351

可以看到运行成功,出现项目地址: http://localhost:5173

通过浏览器访问,即可开始在线创建编辑与展示幻灯片。

image-20240625155013029

2. PPTist 使用介绍

PPTist 提供了在线演示和编辑的功能,整体观感非常干净美观。

左上角为主菜单,包括了导入、导出与快捷键介绍功能。

image-20240625155640951

image-20240625160115841

中间的主编辑区上方,则是插入文字,图片,表格与音视频功能。

image-20240625160026742

右侧则是可以对PPT进行整体设计,切换效果选择等操作。

image-20240625160515865

点击当前文稿可对当前页面进行样式编辑,位置调整,添加动画等操作。

image-20240625155953876

3. 安装Cpolar内网穿透

作为一个开源的在线PPT演示应用,PPTist提供了与桌面版 PowerPoint 相似的功能和极其快捷方便的用户体验,不需要安装任何软件,跨平台兼容性强。

目前我们在本机安装了PPTist,但如果没有公网IP的话,只能在本地局域网环境使用,有一定局限性。如果出差在外想要远程使用的话,可以结合Cpolar内网穿透生成公网地址,免去了本地重新部署过程,只需要使用公网地址直接就可以访问本地部署的PPTist,进行演示。

下面是安装cpolar步骤:

Cpolar官网地址: https://www.cpolar.com

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的Cpolar

img

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

img

4. 配置公网地址

接下来配置一下本地 PPTist 的公网地址,

登录后,点击左侧仪表盘的隧道管理——创建隧道,

创建一个 PPTist 的公网http地址隧道:

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择 http
  • 本地地址:5173
  • 域名类型:免费选择随机域名
  • 地区:选择China Top

点击创建

image-20240625161411946

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,分别是http和https。

image-20240625161941543

使用任意一个上面Cpolar生成的公网地址,在电脑或任意设备在浏览器进行登录访问,即可成功看到 PPTist 界面,这样一个可以远程访问的公网地址就创建好了,使用了Cpolar的公网域名,无需自己购买云服务器,即可在公网访问本地部署的服务了!

image-20240625162402262

小结

由于刚才创建的是随机的公网地址,24小时会发生变化。另外它的网址是由随机字符生成,不容易记忆。如果你有长期远程访问本地部署服务的需求,或者想把域名变成固定,好记的二级子域名,并且不想每次都重新创建隧道来访问你在本地部署的服务,我们可以选择创建一个固定的公网地址来解决这个问题。

5. 配置固定公网地址

我们接下来为其配置固定的HTTP端口地址,该地址不会变化,方便分享给别人长期查看你的本地服务,而无需每天重复修改服务器地址。

配置固定http端口地址需要将cpolar升级到专业版套餐或以上。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。

image-20240625162601023

保留成功后复制保留成功的二级子域名的名称:myppt(大家可以自定义)

image-20240625162629519

返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道 PPTist ,点击右侧的编辑:

image-20240625162724288

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20240625162810498

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名:

image-20240625162836062

最后,我们使用固定的公网地址在任何浏览器打开访问,可以看到成功访问 PPTist,这样一个固定且永久不变的二级子域名公网地址就设置好了。

image-20240625163008747

以上就是如何在Windows系统电脑本地部署开源在线演示文稿应用PPTist,并结合cpolar内网穿透工具实现远程访问使用的全部流程,另外由于该服务无需账号即可在浏览器直接访问,出于安全考虑,建议大家远程访问时不要轻易与他人分享地址,感谢您的观看,有任何问题欢迎留言交流。

相关文章:

基于Vue 3.x与TypeScript的PPTIST本地部署与无公网IP远程演示文稿

文章目录 前言1. 本地安装PPTist2. PPTist 使用介绍3. 安装Cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist,并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。 PPTist …...

PHP的基本语法有哪些?

PHP的基本语法包括以下几个方面&#xff1a; PHP标记&#xff1a;PHP脚本以<?php开始&#xff0c;以?>结束。这是PHP文件的默认文件扩展名是.php。 变量和常量&#xff1a;变量以$符号开头&#xff0c;其后是变量的名称。常量使用define()函数定义&#xff0c;例如def…...

CSS的媒体查询:响应式布局的利器

关于CSS的媒体查询 CSS媒体查询是CSS层叠样式表(Cascading Style Sheets)中的一个核心功能&#xff0c;它使得开发者能够根据不同的设备特性和环境条件来应用不同的样式规则。这是实现响应式网页设计的关键技术&#xff0c;确保网站或应用能够在多种设备上&#xff0c;包括桌面…...

汇聚荣做拼多多运营第一步是什么?

汇聚荣做拼多多运营第一步是什么?在众多电商平台中&#xff0c;拼多多凭借其独特的社交电商模式迅速崛起&#xff0c;吸引了大量消费者和商家的目光。对于希望在拼多多上开店的商家而言&#xff0c;了解如何进行有效运营是成功的关键。那么&#xff0c;汇聚荣做拼多多运营的第…...

NeRF从入门到放弃4: NeuRAD-针对自动驾驶场景的优化

NeuRAD: Neural Rendering for Autonomous Driving 非常值得学习的一篇文章&#xff0c;几乎把自动驾驶场景下所有的优化都加上了&#xff0c;并且也开源了。 和Unisim做了对比&#xff0c;指出Unisim使用lidar指导采样的问题是lidar的垂直FOV有限&#xff0c;高处的东西打不…...

docker环境部署ruoyi系统前后端分离项目

创建局域网 docker network create net-ry 安装Redis 1 安装 创建两个目录 mkdir -p /data/redis/{conf,data} 上传redis.conf文件到/data/redis/conf文件夹中 cd /data/redis/conf 3.2 配置redis.conf文件 配置redis.conf文件&#xff1a; redis.conf文件配置注意&…...

UI(二)控件

文章目录 PatternLockProgressQRCodeRadioRatingRichTextScollBarSearchSelectSlideSpanStepper和StepperItemTextTextAreaTextClockTextInputTextPickerTextTimerTimePickerToggleWeb PatternLock PatternLock是图案密码锁组件&#xff0c;以九宫格图案的方式输入密码&#x…...

【图像分类】Yolov8 完整教程 |分类 |计算机视觉

目标&#xff1a;用YOLOV8进行图像分类。 图像分类器。 学习资源&#xff1a;https://www.youtube.com/watch?vZ-65nqxUdl4 努力的小巴掌 记录计算机视觉学习道路上的所思所得。 1、文件结构化 划分数据集&#xff1a;train,val,test 知道怎么划分数据集很重要。 文件夹…...

PyCharm 2024.1最新变化

PyCharm 2024.1 版本带来了一系列激动人心的新功能和改进&#xff0c;以下是一些主要的更新亮点: Hugging Face 模型和数据集文档预览&#xff1a;在 PyCharm 内部快速获取 Hugging Face 模型或数据集的详细信息&#xff0c;通过鼠标悬停或使用 F1 键打开文档工具窗口来预览。 …...

金融行业专题|某头部期货基于 K8s 原生存储构建自服务数据库云平台

为了进一步提升资源交付效率&#xff0c;不少用户都将数据库应用从物理环境迁移到容器环境。而对于 Kubernetes 部署环境&#xff0c;用户不仅需要考虑数据库在性能方面的需求&#xff0c;还要为数据存储提供更安全、可靠的高可用保障。 近期&#xff0c;某头部期货机构基于 S…...

DELL服务器 OpenManage监控指标解读

监控易是一款专业的IT基础设施监控软件&#xff0c;通过SNMP等多种方式&#xff0c;实时监控服务器、网络设备等IT资源的各项性能指标。对于DELL服务器 OpenManage&#xff0c;监控易提供了全面的监控解决方案&#xff0c;确保服务器的稳定运行。 一、网络连通性监控&#xff…...

vscode下无法识别node、npm的问题

node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 因为node是在cmd安装的&#xff0c;是全局安装的&#xff0c;并不是在这个项目里安装的。 解决方案&#xff1a; 1.在vscode的控制台&#xff0c;针对一个项目安装特定版本的node&#xff1b; 2.已经…...

C语言之字符串处理函数

文章目录 1 字符串处理函数1.1 输入输出1.1.1 输出函数puts1.1.2 输入函数gets 1.2 连接函数1.2.1 stract1.2.2 strncat 1.3 复制1.3.1 复制strcpy1.3.2 复制strncpy1.3.3 复制memcpy1.3.4 指定复制memmove1.3.5 指定复制memset1.3.6 新建复制strdup1.3.7 字符串设定strset 1.4…...

昇思25天学习打卡营第4天|onereal

今天学习的内容是&#xff1a;ResNet50迁移学习 以下内容拷贝至教程&#xff0c;实话实话看不懂&#xff0c;迷迷糊糊都运行jupyter里的代码。走完程序&#xff0c;训练生成了一些图片。 ResNet50迁移学习 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少…...

restTemplate使用总结

1、配置类 Configuration public class RestTemplateConfig() {Beanpublic RestTemplate restTemplate(ClientHttpRequestFactory factory) {return new RestTemplate(factory);}Beanpublic ClientHttpRequestFactory simpleClientHttpRequestFactory() {HttpComponentsClient…...

【云服务器介绍】选择指南 腾讯云 阿里云全配置对比 搭建web 个人开发 app 游戏服务器

​省流目录&#xff1a;适用于博客建站&#xff08;2-4G&#xff09;、个人开发/小型游戏[传奇/我的世界/饥荒]&#xff08;4-8G&#xff09;、数据分析/大型游戏[幻兽帕鲁/雾锁王国]服务器&#xff08;16-64G&#xff09; 1.京东云-618专属活动 官方采购季专属活动地址&#x…...

PostgreSQL 高级SQL查询(三)

1. JOIN 操作 1.1 内连接&#xff08;INNER JOIN&#xff09; 内连接用于返回两个表中存在匹配关系的记录。基本语法如下&#xff1a; SELECT columns FROM table1 INNER JOIN table2 ON table1.column table2.column;例如&#xff0c;从 users 表和 orders 表中检索所有用…...

麒麟系统安装Redis

一、背景 如前文&#xff08;《麒麟系统安装MySQL》&#xff09;所述。 二、下载Redis源码 官方未提供麒麟系统的Redis软件&#xff0c;须下载源码编译。 下载地址&#xff1a;https://redis.io/downloads 6.2.14版本源码下载地址&#xff1a;https://download.redis.io/re…...

Java-方法引用

方法引用概念 把已经有的方法拿过来用&#xff0c;当做函数式接口中抽象方法的方法体 前提条件 1、引用处必须是函数式接口 2、被引用的方法必须已经存在 3、被引用方法的形参和返回值 需要跟抽象方法保持一致 4、被引用方法的功能要满足当前需求 方法引用格式示例 方…...

华为---配置基本的访问控制列表(ACL)

11、访问控制列表&#xff08;ACL&#xff09; 11.1 配置基本的访问控制列表 11.1.1 原理概述 访问控制列表ACL(Access Control List)是由permit或deny语句组成的一系列有顺序的规则集合&#xff0c;这些规则根据数据包的源地址、目的地址、源端口、目的端口等信息来描述。A…...

Apple Intelligence,我们能得到什么?(上)

苹果公司WWDC 2024发布会&#xff0c;苹果AI成为最吸睛的焦点。不过&#xff0c;苹果的AI不是大家口中的AI&#xff0c;而是苹果独有的概念&#xff1a;Apple Intelligence&#xff0c;苹果智能。 所谓Apple Intelligence&#xff0c;被定义为iPhone、iPad和Mac的个人智能系统…...

【数据库中的存储桶】

存储桶是对象存储系统中的一个核心概念&#xff0c;起源于Amazon S3&#xff08;Simple Storage Service&#xff09;并被其他对象存储解决方案&#xff08;如MinIO、Google Cloud Storage等&#xff09;广泛采用。在传统的文件系统中&#xff0c;我们通常使用目录和子目录来组…...

多选项卡的shiny

下面是一个包含多个选项卡的 Shiny 应用程序示例代码。在这个例子中&#xff0c;我们创建了一个包含三个选项卡的 Shiny 应用程序&#xff0c;每个选项卡中都有不同的内容。 library(shiny)# Define UI ui <- fluidPage(titlePanel("多选项卡 Shiny 应用"),tabse…...

Python项目Django框架发布相关

1.Nginx配置 server { listen 80; server_name 域名地址;location / { uwsgi_pass 0.0.0.0:4563;// 运行地址include uwsgi_params;} location /static{ // 静态文件路径alias /www/wwwroot/djserverproject/static;}}server { listen 443; server_name 域名地址;ssl_certific…...

kettle使用手册 安装9.0版本 建议设置为英语

0.新建转换的常用组件 0. Generate rows 定义一个字符串 name value就是字符串的值 0.1 String operations 字段转大写 去空格 1. Json input 来源于一个json文件 1.json 或mq接收到的data内容是json字符串 2. Json output 定义Jsonbloc值为 data, 左侧Fieldname是数据库…...

golang string、byte[]以及rune的基本概念,用法以及区别

在 Go 语言中&#xff0c;string、byte[] 和 rune 是处理文本和字符的三种不同数据类型。它们有各自的用途和特点&#xff0c;下面将详细介绍它们的基本概念、用法以及区别。 1. string 基本概念 字符串类型&#xff1a;string 是 Go 语言中的一种基本类型&#xff0c;用于表…...

全国211大学名单及排名

序号 名称 省份 985 211 双一流 1 北京大学 北京 是 是 是 2 清华大学 北京 是 是 是 3 复旦大学 上海 是 是 是 4 上海交通大学 上海 是 是 是 5 浙江大学 浙江 是 是 是 6 国防科技大学 湖南 是 是 是 7 中国人民大学 北京 是 …...

ASR 语音识别相关

ASR 语音识别 ASR&#xff08;Automatic Speech Recognition&#xff0c;自动语音识别&#xff09;是一种能够将语音转换为文本的技术。这种技术使得计算机能够“听懂”我们说的话&#xff0c;并将它们记录下来。这项技术被广泛应用于日常生活中的各种场景&#xff0c;比如语音…...

kotlin require和assert 区别

在 Kotlin 中&#xff0c;require 和 assert 是两种用于验证条件的方法&#xff0c;主要区别在于它们的使用场景和触发机制。 require require 用于函数参数的验证。如果条件不满足&#xff0c;它会抛出 IllegalArgumentException 异常。这通常用于对公共 API 的输入参数进行…...

考研:数学一/二 和英语一/二 有什么区别

考研数学一/二 区别&#xff1a; 考试内容&#xff1a; 数学一&#xff1a;考查内容包括高等数学、线性代数、以及概率论与数理统计&#xff0c;覆盖的知识面较为全面&#xff0c;题目难度也相对较高。数学二&#xff1a;考试内容包含高等数学和线性代数&#xff0c;不包括概率…...

建设个定制网站需要多少钱/google网站推广

目录 一、导图 二、RCE漏洞简介 三、代码执行漏洞示例 四、命令执行漏洞示例 五、漏洞的产生条件 <网站原码层面> <网站应用层面> 六、漏洞检测 七、黑盒-应用层面-漏洞实例 八、白盒-代码层面-漏洞实例 九、黑盒-RCE公开漏洞-漏洞实例 十、漏洞产生的…...

来宾网站制作/网站开发的步骤

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2021年安全员-B证&#xff08;陕西省&#xff09;报名考试为正在备考安全员-B证&#xff08;陕西省&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的安全员-B证&#xff08;陕西省&#xff09;考…...

网页设计与网站建设指标点/镇江网站seo

我们很容易被漂亮的代码吸引&#xff0c;也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不&#xff0c;我就收集了一系列形如 “是否为……&#xff1f;” 的判断的boolean函数。 isNull: function(a){return a null; }, isUndefined: function(a){re…...

游戏币销售网站建设/互联网精准营销

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼程序:ORG 0000HLJMP MAINORG 000BHLJMP TIMEORG 1000HHOUR1 EQU 10hHOUR2 EQU 12hMIN1 EQU 14hMIN2 EQU 16hSEC1 EQU 18HCOUNT EQU 20HNUM1 EQU 22HNUM2 EQU 24HLL4 EQU 26Hs1 bit P1.0s2 bit P1.1s3 bit P1.2s4 bit P1.3A1 EQU 36…...

php mysql的网站开发/免费的关键词挖掘工具

最近临时一个负责公司官网的妹纸请假&#xff0c;于是临时接手了下官网的项目&#xff0c;官网都是静态页面&#xff0c;算是很简单的&#xff0c;但发现页面挺多&#xff0c;而每个页面总有部分是和其他页面一模一样的&#xff0c;比如页头、页尾等&#xff0c;这样就导致一个…...

汕头建站网站模板/阿里云域名查询和注册

首先&#xff0c;假设有一个表T&#xff0c;创建在文件组OldFilegroup上&#xff0c;现在要将表T移到新的文件组NewfileGroup上。1、处理主键的情形&#xff0c;即聚集索引和主键建在相同的字段上假设有一个主键名称为PK_T&#xff0c;首先删除主键&#xff1a;alter table T d…...