一、事情的缘起

今天一个朋友向我推荐了小红书上的一个视频,我看了一下这是一个在演示TypeWords项目的视频。这个项目是Github上采用vue来编写的一个开源项目。我进入该项目后看到了给出的样例网址2study.top,然后到上面看了一下。我发现这是一个通过打字来练习记单词的网站。页面配的有发音、可以记录打错的单词、还可以收藏单词,通过反复练习错误的单词,直到你全部掌握它的拼写。这里面的词库是开放性的,可以自由上传,也可以选用其中的四级词汇、六级词汇、编程词汇等。软件的界面如下:

软件界面

看到这个网站,感叹作者的设计十分巧妙,就想自己也架设一下。这里要说明的是本人对vue语言一窍不通,更是对node.js,npm了解甚少,唯一知道的是可以通过1panel,利用反向代理架设一个网站。之前我也写过如何用利用1panel架设一个静态的网站:

​编辑如何安装1panel并架设一个静态网站4 赞同 · 0 评论文章

今天我就想利用这个机会,借助DeepSeek和Github上的安装指引,来架设一个开源项目。

二、操作过程

1. 准备一台服务器。

首先,我们得有一个Linux服务器,并拿到这经的一个ssh权限,通过FinalShell我们登录到这个服务器上,如下图所示:

SSH登陆服务器

2. 安装Git工具

为了把远程的项目克隆到本地,我们需要安装一个git工具。首先我们要更新一下:

apt update
apt install git

如果实在不会,就可以问一下DeepSeek。

3. 克隆项目到本地

首先,在FinalShell里,我们进入到root的根目录,其实进入服务器后默认就是根目录,然后新建一个目录TypeWords,接下来用下面命令切换到这个目录。

cd TypeWords

然后就用git工具克隆

git clone https://github.com/zyronon/TypeWords

等一会儿就可以看到TypeWords目录里就已经下载好了程序,如下图所示:

克隆安装文件

4. 安装Node.js 和 npm(运行项目依赖)

为了在服务器上运行此项目,我们还需要安装Node.js和npm,同时为了让服务器后台持续运行这个项目,我们还要安装进程管理工具pm2。以上安装可以在root根目录下进行,安装方法如下:

apt install -y git nodejs npm
npm install -g pm2  # 全局安装 PM2

5. 安装项目

首先进入到TypeWords这个目录,安装网站

npm install

6. 启动项目

安装完项目,为了让它能在后台持续运行,我们可以用pm2这个进程管理工具:

PM2 会监控进程,崩溃时自动重启,并记录日志。使用pm2的代码是

pm2 start npm --name "你的项目名称" -- start

这里我们在根目录,运行以下代码:

pm2 start npm --name TypeWords --start

接下来,我们用pm2 list来查询进程,可以看到status是online,占用内存是80.7mb。

pm2管理进程

如果想验证是否成功,可以用以下代码:

pm2 logs

更多pm2的命令可以见下面列表。

pm2 logs                  # 查看实时日志
pm2 list                 # 查看运行中的进程
pm2 save                 # 保存当前进程列表(重启后自动恢复)
pm2 startup              # 设置 PM2 开机自启(需 root 权限)

7. 绑定网站

现在,我们可以通过ip:3000这样访问项目,但是这样的网址不容易记,我们需要把它绑定到一个域名上。

于是,我们进入另一台服务器上的1panel中,找到网站——反向代理,建立一个反向代理网站,代理地址就填写我们刚才用到的服务器的ip:3000,域名你可以用自己的域名,并把这个域名解析到1panel所在的服务器IP上。

申请反向代理

然后,我们还要去【网站】同级菜单点【证书】,为域名申请一个免费的证书,这个过程中如果没有Acme帐户,可以免费申请一个。我们在域名的配置当中,添加这个证书。

申请证书

接下来,我们在网站设置里启用HTTPS,选择已有证书,最后一路确定就配置成功了。

添加证书

最后,通过打开网站,可以看到这个项目已经成功运行了。

项目成功运行

三、学后总结

1. 这个项目功能强大,交互性强,但是界面不是特别漂亮,也没有用户管理,换个电脑又得从头再来,所以后期可以优化界面的色彩搭配,添加用记管理系统,记录学生的学习进度,甚至还以加入vip会员系统。

2. 项目在网页端运行没有问题,但是在手机端运行出现界面混乱的情况,后期还需要进一步优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/91134.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/91134.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/91134.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7.14 Java基础|String 和StringBuilder

补充注意:1、StringBuilder 的 append 方法可以接收整数类型的参数,并将其自动转换为字符串后添加到 StringBuilder 中2、该方法适用于所有基本数据类型(如 long、double 等)和对象(通过调用其 toString() 方法&#x…

React 第六十九节 Router中renderMatches的使用详解及注意事项

前言 renderMatches 是 React Router 的一个高级实用函数,用于根据路由匹配结果渲染对应的组件树。它提供了对路由渲染过程的底层控制能力,特别适用于自定义路由渲染逻辑的场景。 一、基本概念和功能 renderMatches 函数的作用是将路由匹配结果转换为 Re…

esp8266-01S实现PPM波形

esp8266-01虽然小众&#xff0c;但是功能可不能少。因航模需要让ESP8266-01生成PPM波形。#include <ESP8266WiFi.h> #include <Ticker.h> // 仅用于延时函数替代#define PPM_PIN 2 // 使用 GPIO2 (需断开串口上传时的连接) #define CHANNELS 4 // PPM通道数量…

使用 pytest 测试框架构建自动化测试套件之一

pytest 是一个非常灵活且强大的测试框架&#xff0c;它支持简单的单元测试到复杂的功能测试。显著特点是其简洁的语法&#xff0c;可以无需继承 TestCase 类直接使用函数来编写测试用例&#xff0c;并通过 assert语句 进行断言。还支持参数化测试、丰富的插件系统。 pytest自动…

nacos docker 配置

docker.io/nacos 项目中国可用镜像列表 | 高速可靠的 Docker 镜像资源 1、Docker 拉取镜像 docker pull nacos/nacos-server:v2.1.0 2、创建宿主机挂载目录 mkdir -p /mydata/nacos/logs/ mkdir -p /mydata/nacos/conf/ AI写代码 3、启动nacos并复制文件到宿主机&#xff0…

Django 模板(Template)

1. 模板简介 作为 Web 开发框架,Django 提供了模板,可以很便利的动态生成 HTML。模版系统致力于表达外观,而不是程序逻辑。 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一个视图可以使用任意一个模板,一个模板可以供多个视图使用。 模板包含: HTM…

Word 文字编辑状态下按回车换行后是非正文格式

在Word里编辑时&#xff0c;按回车后新段落突然变成标题1、标题2这类格式&#xff0c;不再是正文样式&#xff0c;这通常是因为「正文」的样式设置出了问题——可能被默认设置成“后续段落自动应用标题1/标题2格式”了。 修改方法很简单&#xff1a; 找到并打开「正文」样式的修…

PySide6 UI 灵活性:QToolBar 的浮动与停靠及 QSplitter 的可调整面板

PySide6 UI 灵活性&#xff1a;QToolBar 的浮动与停靠及 QSplitter 的可调整面板 在现代桌面应用程序开发中&#xff0c;提供灵活且用户友好的界面至关重要。PySide6&#xff08;Qt for Python&#xff09;提供了强大的工具来构建这样的界面。本文将深入探讨两个关键的 PySide6…

B4016 树的直径

B4016 树的直径 - 洛谷 题目描述 给定一棵 n 个结点的树&#xff0c;树没有边权。请求出树的直径是多少&#xff0c;即树上最长的不重复经过一个点的路径长度是多少。 输入格式 第一行输入一个正整数 n&#xff0c;表示结点个数。 第二行开始&#xff0c;往下一共 n - 1 行…

【一维 前缀和+差分】

一、一维前缀和 1.1 定义 给定一个数组 a[1..n]&#xff0c;其前缀和数组 pre[1..n] 定义为&#xff1a; pre[i]a[1]a[2]⋯a[i] pre[i] a[1] a[2] \dots a[i] pre[i]a[1]a[2]⋯a[i] 即 pre[i] 表示原数组从第 1 项到第 i 项的和。 1.2 构建 int a[N], pre[N]; for (int i …

Spring Boot 双数据源配置

文章目录什么是双数据源&#xff1f;为什么需要双数据源&#xff1f;核心实现原理完整示例注意什么是双数据源&#xff1f; 双数据源是指在一个应用程序中同时配置和使用两个不同的数据库连接。比如&#xff1a; 一个连接订单数据库&#xff0c;处理业务数据一个连接用户中心…

【Java】【力扣】102.二叉树层序遍历

思路一个辅助队列&#xff08;初始化队列&#xff1a;根节点入队&#xff09;一个节点 出队&#xff0c;他的左右孩子入队循环 直到队列为空举例代码public List<List<Integer>> levelOrder(TreeNode root) {if (rootnull){return new ArrayList<List<Intege…

为什么有些PDF无法复制文字?原理分析与解决方案

在日常办公和学习中&#xff0c;我们经常会从PDF文件中复制文字&#xff0c;用于编辑、引用、整理笔记。但你是否也遇到过这样的情况&#xff1a;有些PDF中的文字根本无法选中&#xff0c;更无法复制粘贴&#xff1f; 看起来像是“文字”&#xff0c;但操作上却完全无效——这…

LabVIEW浏览器ActiveX事件交互

​程序围绕 WebBrowser ActiveX 控件&#xff0c;借 “Reg Event Callback” 注册标题变更回调&#xff0c;“Callback - Title Change.vi” 处理标题数据&#xff0c;“Monitor...” 响应 URL 变更&#xff0c;“Unregister...” 清理资源&#xff0c;实现浏览器事件交互与管控…

C++后端面试八股文

一、C 语言基础与底层原理请解释 new / delete 和 malloc / free 的区别和联系&#xff0c;以及使用它们时需要注意什么new 和 delete 是C的​​运算符&#xff08;Operator&#xff09;​​。这意味着它们可以被类&#xff08;通过 operator new 和 operator delete&#xff0…

基础分类模型及回归简介(一)

一、先搞懂两个核心任务&#xff1a;分类和回归咱们生活中总遇到要 “判断” 或 “预测” 的事&#xff1a;比如看到一个水果&#xff0c;判断是苹果还是橘子 —— 这就是分类&#xff08;结果是 “类别”&#xff09;&#xff1b;比如根据西瓜的大小、颜色&#xff0c;猜它能卖…

【LeetCode 热题 100】114. 二叉树展开为链表——(解法二)分治

Problem: 114. 二叉树展开为链表 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。 展开后的单链表应该与二叉树 先序…

【WPF】WPF 自定义控件 实战详解,含命令实现

&#x1f9e9;《WPF 自定义控件》实战详解本文将围绕如何编写一个自定义控件&#xff08;如带右键菜单的图片控件 ImageView&#xff09;&#xff0c;逐步讲解其定义、命令绑定与 ContextMenu 中常见的语法技巧。&#x1f9f1; 一、创建一个 WPF 自定义控件的步骤 WPF 中自定义…

Flink 2.0 DataStream算子全景

在实时流处理中&#xff0c;Apache Flink的DataStream API算子是构建流处理 pipeline 的基础单元。本文基于Flink 2.0&#xff0c;聚焦算子的核心概念、分类及高级特性。 一、算子核心概念&#xff1a;流处理的"原子操作 1. 数据流拓扑&#xff08;Stream Topology&#x…

Flask 入门到实战(2):使用 SQLAlchemy 打造可持久化的数据层

Flask 入门到实战&#xff1a;使用 SQLAlchemy 打造可持久化的数据层一、前言&#xff1a;为什么用 Flask-SQLAlchemy&#xff1f; 在 Python Web 开发中&#xff0c;操作数据库的方式主要有两种&#xff1a; 直接写 SQL&#xff08;繁琐且难维护&#xff09;使用 ORM&#xff…