在线剪切板

Luck 字数: 7316 阅读耗时: 18 分钟 2024/12/11 博客独享热度: 36 评论: 0

前言

因为一些场景的需要，写了一个简易的在线粘贴板，后端使用python，前端使用vite+vue。目前已经开源到github。
在线使用地址：https://clip.xudj.top/

后端项目

后端使用python写一些日常接口还是非常简单和易上手的。

项目命名clipboard，定义了两个接口：保存粘贴板和查询粘贴板列表。保存接口使用redis进行数据存储，默认存储时间15分钟。

github地址> https://github.com/good2luck/clipboard

前端项目

前端使用了vite + vue进行开发的，页面样式都比较简单。

项目命名clipboard-app。
github地址> https://github.com/good2luck/clipboard-app

开发与部署

前端项目

1、创建项目
命令行执行> pnpm create vite@latest clipboard-app --template vue
2、编译
命令行执行> pnpm i
3、本地运行
命令行执行> pnpm dev
4、生产环境执行> pnpm build，成功的资源路径为lipboard-app/dist/*

如果pnpm报错不支持，可以使用如下方式处理：
1、命令行执行> npm install -g pnpm@8
2、验证是否安装成功> pnpm -v

如果报错如下，说明node版本过低，需要升版：

ERROR: This version of pnpm requires at least Node.js v16.14
The current version of Node.js is v12.22.9
Visit https://r.pnpm.io/comp to see the list of past pnpm versions with respective Node.js version support.

可以使用nvm进行node版本管理，安装步骤如下：
1、命令行执行> git clone https://github.com/nvm-sh/nvm.git
2、进入项目nvm> cd nvm
3、安装，命令行执行> ./install.sh
4、根据提示执行 export 命令：设置环境变量&加载核心脚步&加载自动补全功能：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

5、安装并使用18+新版node，命令行执行> nvm install 18
6、再次执行 pnpm -v 显示正常即可。

后端项目

python项目比较简单
1、创建一个项目名为clipboard的工程及解释器。
2、定义一个requirements.txt文件，加入需要的三方包
3、命令行执行进行下载> pip install -r requirements.txt
4、开发接口
5、后台启动命令，在项目目录下> nohup python app.py > py_output.log 2>&1 &

nginx配置

# XXXX：前端项目目录
# YYYY：后端服务端口

location / {
          root /var/www/clip.xudj.top/html/XXXX;  # 替换为dist文件夹的实际路径
          index index.html index.htm;  # 指定默认页面
          try_files $uri $uri/ /index.html;  # 支持Vue单页面
}

location /api/v1/ {
                # try_files $uri $uri/ =404;
                proxy_set_header HOST $host;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                
                proxy_pass http://127.0.0.1:YYYY;
}

重启nginx命令> systemctl restart nginx
如果只改nginx配置，检测配置执行命令> nginx -t；重新加载执行命令> nginx -s reload。

使用

1、保存

输入密码 -> 输入文本 -> 保存

2、查询

输入密码 -> 查询 -> copy