基于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內網穿透工具實現遠程訪問使用的全部流程,另外由于該服務無需賬號即可在瀏覽器直接訪問,出于安全考慮,建議大家遠程訪問時不要輕易與他人分享地址,感謝您的觀看,有任何問題歡迎留言交流。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/36734.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/36734.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/36734.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

[gpt胡說八道篇] 使用Docker快速啟動Doris

Docker 是一種輕量級的虛擬化技術,我們可以利用 Docker 快速的在本地啟動一個 Doris 的實例,方便進行開發和測試。下面我們來看一下如何操作。 1. 拉取 Docker 鏡像 首先,我們需要從 Docker Hub 上拉取 Doris 的鏡像。打開終端,輸…

Qt Qvariant

QVariant 是 Qt 框架中的一個非常強大的類,它用于存儲各種不同類型的數據,并提供了一種統一的方式來處理這些數據。QVariant 可以存儲大多數基本數據類型,如整數、浮點數、字符串、日期時間等,以及更復雜的數據類型,如…

ChatGPT的原理可以通俗易懂地介紹

ChatGPT的原理可以通俗易懂地介紹如下: 基礎架構: ChatGPT基于OpenAI的GPT(Generative Pre-trained Transformer)模型,尤其是GPT-3的架構進行構建。GPT模型是一種基于Transformer架構的預訓練語言模型,特別…

基于STM32的智能水質監測系統

目錄 引言環境準備智能水質監測系統基礎代碼實現:實現智能水質監測系統 4.1 數據采集模塊4.2 數據處理與分析4.3 控制系統實現4.4 用戶界面與數據可視化應用場景:水質管理與優化問題解決方案與優化收尾與總結 1. 引言 智能水質監測系統通過使用STM32嵌…

RISC-V知識總結 —— 向量(擴展)指令集

資源1:晏明 - RISC-V向量擴展指令架構及LLVM自動向量化支持 - 202112118 - 第13屆開源開發工具大會(OSDTConf2021)_嗶哩嗶哩_bilibili資源2:張先軼 - 基于RISC-V向量指令集優化基礎計算軟件生態【第12屆開源開發工具大會(OSDT2020&#xff09…

設計模式(實際項目)-狀態機模式

需求背景:存在狀態流轉的預約單 一.數據庫設計 CREATE TABLE appointment (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 主鍵id,appoint_type int(11) NOT NULL COMMENT 預約類型(0:線下查房...),appoint_user_id bigint(20) NOT NULL COMMENT 預約人…

研導智能科技——AI輔助科研產品開發

人工智能(AI)技術的飛速發展為科研領域帶來了革命性的變化。本公司致力于開發基于人工智能的科研輔助產品,旨在通過智能化手段提高科研人員的工作效率和研究質量。目前,我們成功開發了研導學術平臺(www.zhiyanxueshu.c…

Linux運維:MySQL數據庫(1)

1.信息與數據: 數據是信息的載體,信息是數據的內涵。數據庫就是存儲數據的倉庫,并長期存儲在計算機磁盤中,可由多個用戶和應用程序共享的數據集合,就是數據庫。 2.數據庫中的數據的特點: 2.1.數據是按照某…

RuleApp1.4.6文章社區客戶端 廣告聯盟支持Docx導入

支持編譯為安卓,蘋果,小程序,H5網頁的社區客戶端代碼,包括文章模塊,用戶模塊,動態模塊,支付模塊,聊天模塊,廣告模塊,商城模塊等基礎功能,包含VIP會…

C++的模板(九):模板的實例化問題

前文子系統中的例子&#xff0c; SubSystem內部用了STL庫的map模板: template <class Event, class Response> class SubSystem{ public:map<Event*, Response*> table; public:void bind(Event *e, Response *r);void unbind(Event *e); public:int OnMessage(E…

10位時間戳、13位時間戳、17位時間戳,以及在JavaScript中的格式轉換

一、介紹 1、10位時間戳 2、13位時間戳 3、17位時間戳 4、時間戳轉換工具 二、13位時間戳的轉換 1、轉標準日期 2、轉格式化日期 三、10位時間戳的轉換 1、轉標準日期 2、轉格式化日期 四、17位時間戳的轉換 1、解析思路 2、解析過程 &#xff08;1&#xff09;統…

C++系統編程篇——Linux第一個小程序--進度條

&#xff08;1&#xff09;先引入一個概念&#xff1a;行緩沖區 \r和\n \r表示回車 \n表示回車并換行 ①代碼一 #include<stdio.h> #include<unistd.h> int main()…

django學習入門系列之第三點《偽類簡單了解》

文章目錄 hover&#xff08;偽類&#xff09;after&#xff08;偽類&#xff09;往期回顧 hover&#xff08;偽類&#xff09; 偽類指的是用冒號加的 hover樣式指的是&#xff0c;當用戶光標移動到設定區域后&#xff0c;所執行的用法 如&#xff1a; <!DOCTYPE html>…

【C語言】函數無參數有返回值、有參數無返回值、有參數有返回值

文章目錄 前言C語言函數的分類和使用無參數有返回值的函數有參數無返回值的函數有參數有返回值的函數 總結 前言 在C語言中&#xff0c;函數是一種重要的組織代碼的方式。根據函數的參數和返回值&#xff0c;我們可以將函數分為三類&#xff1a;無參數有返回值、有參數無返回值…

清理未使用的鏡像和容器

刪除未使用的鏡像和容器&#xff1a; docker system prune -a清理構建緩存&#xff1a; Docker 會緩存構建過程中使用的中間鏡像&#xff0c;可以通過以下命令清理它們&#xff1a; docker builder prune定期清理舊鏡像&#xff1a; 定期運行以下命令清理舊鏡像&#xff1a; …

通過代理從ARDUINO IDE直接下載開發板包

使用免費代理 實現ARDUINO IDE2.3.2 下載ESP8266/ESP32包 免費代理 列表 測試代理是否可用的 網站 有時&#xff0c;代理是可用的&#xff0c;但依然有可能找不到開發板管理器的資料包。 可以多換幾個代理試試。 代理的配置 文件 -> 首選項 -> 網絡 進入后做如下配置…

2024百度之星第二場-小度的01串

補題鏈接&#xff1a; 碼蹄集 一道經典線段樹板子題。 區間修改01置換&#xff0c;區間查詢子串權值。 唯一區別&#xff0c;權值要求的是相鄰字符都不同所需修改的最小字符個數。 我們在線段樹節點上分別維護當前連續區間&#xff1a; 奇數位是0的個數&#xff08;j0&…

K8S兩種安裝方式如何選擇?

K8S兩種安裝方式如何選擇&#xff1f;\nKubeadm VS kubernetes 二進制\n\n1、kubeadm 方式部署&#xff08;推薦&#xff09;\n推薦理由&#xff1a;\n\n官方推薦&#xff1a;kubeadm 是 Kubernetes 官方提供的工具&#xff0c;用于快速搭建生產級別的 Kubernetes 集群&#xf…

python讀取hdf4文件

記錄一下使用xarray讀取hdf4&#xff08;not hdf5&#xff09;過程中遇到的問題. 目的: 讀取hdf4 file的matadata遇到的問題&#xff1a;使用xarray.open_dataset()失敗解決方法&#xff1a;使用pyhdf.SD代替 import os from pyhdf.SD import SD, SDC import xarray as xr im…

ios CCNSDate.m

// // CCNSDate.h // CCFC // // Created by xichen on 11-12-17. // Copyright 2011年 ccteam. All rights reserved. //#import <Foundation/Foundation.h>interface NSDate(cc)// 獲取系統時間(yyyy-MM-dd HH:mm:ss.SSS格式)(NSString *)getSystemTimeStr;// prin…