构建你的短链接

Posted on 2024-11-15

对短链服务架构研究一番后，小年就突然兴起，为何不自己动手做一个？

要实现一个简单易用的短链服务其实并不复杂，但是考虑到时间和维护成本，如果用Java、Go 来实现的话，可能会比较重、繁琐。

正巧小年最近在学习 React 和 Nextjs ，加上 Vercel 支持免费部署，刚好学以致用，尝试一点不一样的技术栈。

当然，重点是：免费！

按照小年的教程，只需要 10 分钟时间就可以免费部署一个自己的短链服务。

Step 1：Github Fork 项目

打开小年的 Github Repository：short-link，fork 到自己的仓库

Setp 2：注册 Vercel

Setp 3：创建项目

1、创建账号后，进入个人主页 Overview，创建项目

2、选中 Github Fork 的项目 short-link

3、这里默认选中 Next.js，点击 Deploy

Step 4：配置数据库

项目第一次部署后，虽然页面可以访问，但其实功能还不能正常运行，还需要配置Storage。

进到 Storage 创建数据库，类型选择 KV。

然后进入新创建的项目，进入 Storage ，关联刚刚新创建的数据库即可。

Step 5：重新部署

进入项目的部署标签页下，重新部署后，就可以直接使用了。

整个过程大概10min，就可以部署一套属于自己的短链服务。

vercel会为每个project自动生成一个域名，访问域名就能看到最终的效果页面啦~

SEO Google: 添加到 Search Console（有效解决零收录情况）

Posted on 2024-11-11

说明

如果发现搜索结果中一条记录都没有，那么在完成本文指引后，再等待 1 天，再去查询收录情况，就会发现提交的网站已经被收录了。

方法

打开控制台：https://search.google.com/search-console/welcome?hl=zh-cn
根据提示输入域名，添加 DNS 解析，我使用的验证方式是 CNAME，添加完后点击验证
点击左侧导航栏打开刚刚验证完成的网站，刚刚添加的网站，在 1 天后才能查看数据：
![image-20241111100407215](/Users/hoey/Library/Application Support/typora-user-images/image-20241111100407215.png)

查询是否已被收录

打开 Google，在搜索框输入以下内容（将 yourdomain.com 替换为你自己的顶级域名），然后点击搜索按钮：

1	site:yourdomain.com

深入了解 site: 搜索运算符

分析

根据 Google 收录后的条目，大概可以得知，GoogleBot 会先访问添加的网址，进而收集该入口页面的所有的超链接（），然后再访问这些超链接，再收集页面上超链接。

建议：

路径层级最好不要超过两级，也就是说最大层级别超过 /a/b

如果有些网址没有展示在页面上，那么就需要提交站点地图了

自定义图床OneDrive(二)

Posted on 2024-11-02

需求: E5保活+OneDrive(简称od)图床，由于篇幅太长，套域名就不写了。

前置准备:

Debain12 & docker环境
Windows (用来申请rclone访问OD Token)

安装rclone

1
2
3

sudo -v ; curl https://rclone.org/install.sh | sudo bash
# 安装rclone依赖
apt install fuse3

申请AZ客户端ID和密钥

rclone和od对接，需要”客户端ID”和”客户端密钥”这个到面板上申请一个。

访问Azure API管理面板登陆

点击“新注册”注册一个应用程序。

输入名称，勾选权限后注册应用。

注册成功后将跳转到管理页面，记下图中所示的“应用程序(客户端) ID”，供将来挂载使用。

此时点击“证书与密码”→“新客户端密码”，填写说明和截至期限后，添加密码。

添加密码后，我们记录密码值，供将来挂载使用。注意这里一定要将密码记录下来，因为它只显示一次。

接下来，点击“API权限”，为我们的api获取权限。Files中的权限全部勾选。

至此，我们已经申请好了onedrive的api，目前我们已经得到了客户端ID以及客户端密钥。

rclone配置OD

到Windows下载rclone，执行下面的命令获取token

1 2	# windows系统下按win+R调出运行，输入“cmd” rclone.exe authorize "onedrive" "客户端ID" "客户端密钥"

![image-20241102234244003](/Users/hoey/Library/Application Support/typora-user-images/image-20241102234244003.png)

把toekn存下来，后面要用，接下来来配置rclone 并挂在onedrive到本地/mnt/onedrive/

# 配rclone注册远程连接
rclone config
n 
onedrive
35  Microsoft OneDrive
客户端ID
客户端密钥
1  Microsoft Cloud Global
n No (default) 不进行高级配置
n No 不使用自动配置
配置上面从windows存储的token
1 OneDrive Personal or Business
y
y

最终成功结果，如果你哪一步跟不上可以参考这个文档申请onedrive api并使用rclone将其挂载为本地磁盘_rclone onedrive-CSDN博客参考上半部分就行。

mkdir -p /mnt/onedrive/
vim /etc/systemd/system/rclone.service

# 里面的5G需要根据磁盘的大小设置，但是不能超过剩余磁盘空间

[Unit]
Description=rclone

[Service]
User=root
ExecStart=/usr/bin/rclone mount onedrive:/ /mnt/onedrive/ --allow-other --allow-non-empty --vfs-cache-mode writes --vfs-cache-max-size 5G --transfers 3
Restart=on-failure

[Install]
WantedBy=multi-user.target

sudo systemctl daemon-reload
sudo systemctl start rclone
sudo systemctl enable rclone
sudo systemctl status rclone

lsky

mkdir -p /opt/docker/lsky-pro/lsky
cd /opt/docker/lsky-pro 

vim docker-compose.yml
# 18088 & 18089可以自定义
services:
  lsky-pro:
    image: hisatri/lsky:latest
    container_name: lsky-pro
    restart: unless-stopped
    ports:
      - "18088:8088"
      - "18089:8089"
    volumes:
      - $PWD/lsky:/var/www/html
      - /mnt/onedrive:/onedrive
    environment:
      - HTTPS_PORT=8088
      - WEB_PORT=8089

docker-compose up -d

访问localhost:18089

数据库选择sqllite，存储目录留空不填写，自己设置个邮箱和密码。

角色组

存储策略

picgo

插件->lankong

设置

![image-20241102235848350](/Users/hoey/Library/Application Support/typora-user-images/image-20241102235848350.png)

Auth token的获取方法：

照着这个放一个post请求就可以了。

http://pic.yihao.de/api/v1/tokens?email=&password=

微软E5账号介绍

Posted on 2024-10-31

Microsoft 365 E5是一款综合性的商业应用套件，它包含一系列的生产力应用和服务。E5版特别提供了一些高级的安全、合规性、语音和分析能力【7†source】。E5包括以下的应用和服务：

Word
Excel
PowerPoint
Outlook
OneNote
SharePoint
OneDrive (5T)
Microsoft Teams
Power BI Pro
Windows【9+source】

喜当爹

Posted on 2024-10-27

意不意外、惊不惊喜，就是这么快。

自定义图床

Posted on 2024-10-27

之前用的阿里云图床，后来产生的费用让人难以维持，下面用TG+CF的方案实现一个图床，自己试了一下很好用

https://img.yihao.de/

一、GitHub

按照github的代码部署一下，操作如readme一样

0-RTT/telegraph

二、 worder.js

我这边自行稍微改造了一点

export default {
  async fetch(request, env) {
    const { pathname } = new URL(request.url);
    const domain = env.DOMAIN;
    const DATABASE = env.DATABASE;
    const USERNAME = env.USERNAME;
    const PASSWORD = env.PASSWORD;
    const adminPath = env.ADMIN_PATH;
    const enableAuth = env.ENABLE_AUTH === 'true';
    const TG_BOT_TOKEN = env.TG_BOT_TOKEN;
    const TG_CHAT_ID = env.TG_CHAT_ID;

    switch (pathname) {
      case '/':
        return await handleRootRequest(request, USERNAME, PASSWORD, enableAuth);
      case `/${adminPath}`:
        return await handleAdminRequest(DATABASE, request, USERNAME, PASSWORD);
      case '/upload':
        return request.method === 'POST' ? await handleUploadRequest(request, DATABASE, enableAuth, USERNAME, PASSWORD, domain, TG_BOT_TOKEN, TG_CHAT_ID) : new Response('Method Not Allowed', { status: 405 });
      case '/bing-images':
        return handleBingImagesRequest();
      case '/delete-images':
        return handleDeleteImagesRequest(request, DATABASE);
      default:
        return await handleImageRequest(request, DATABASE, TG_BOT_TOKEN);
    }
  }
};

let isAuthenticated = false;

function authenticate(request, USERNAME, PASSWORD) {
  const authHeader = request.headers.get('Authorization');
  if (!authHeader) return false;
  return isValidCredentials(authHeader, USERNAME, PASSWORD);
}

async function handleRootRequest(request, USERNAME, PASSWORD, enableAuth) {
  const cache = caches.default;
  const cacheKey = new Request(request.url);
  if (enableAuth) {
      if (!authenticate(request, USERNAME, PASSWORD)) {
          return new Response('Unauthorized', { status: 401, headers: { 'WWW-Authenticate': 'Basic realm="Admin"' } });
      }
  }
  const cachedResponse = await cache.match(cacheKey);
  if (cachedResponse) {
      return cachedResponse;
  }
  const response = new Response(`
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Telegraph图床-基于Workers的图床服务">
  <meta name="keywords" content="Telegraph图床,Workers图床, Cloudflare, Workers,telegra.ph, 图床">
  <title>Telegraph图床-基于Workers的图床服务</title>
  <link rel="icon" href="https://p1.meituan.net/csc/c195ee91001e783f39f41ffffbbcbd484286.ico" type="image/x-icon">
  <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-fileinput/5.2.7/css/fileinput.min.css" rel="stylesheet" />
  <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" />
  <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.4/css/all.min.css" type="text/css" rel="stylesheet" />
  <style>
      body {
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          position: relative;
      }
      .background {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-size: cover;
          z-index: -1;
          transition: opacity 1s ease-in-out;
          opacity: 1;
      }
      .card {
          background-color: rgba(255, 255, 255, 0.8);
          border: none;
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          padding: 20px;
          width: 90%;
          max-width: 400px;
          text-align: center;
          margin: 0 auto;
          position: relative;
      }
      .uniform-height {
          margin-top: 20px;
      }
      #viewCacheBtn {
          position: absolute;
          top: 10px;
          right: 10px;
          background: none;
          border: none;
          color: rgba(0, 0, 0, 0.1);
          cursor: pointer;
          font-size: 24px;
          transition: color 0.3s ease;
      }
      #viewCacheBtn:hover {
          color: rgba(0, 0, 0, 0.4);
      }
      #cacheContent {
          margin-top: 20px;
          max-height: 200px;
          border-radius: 5px;
          overflow-y: auto;
      }
      .cache-title {
          text-align: left;
          margin-bottom: 10px;
      }
      .cache-item {
          display: block;
          cursor: pointer;
          border-radius: 4px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          transition: background-color 0.3s ease;
          text-align: left;
          padding: 10px;
      }
      .cache-item:hover {
          background-color: #e9ecef;
      }
      .project-link {
          font-size: 14px;
          text-align: center;
          margin-top: 5px;
          margin-bottom: 0;
      }
      textarea.form-control {
          max-height: 200px;
          overflow-y: hidden;
          resize: none;
      }
  </style>
</head>
<body>
  <div class="background" id="background"></div>
  <div class="card">
      <div class="title">Telegraph图床</div>
      <button type="button" class="btn" id="viewCacheBtn" title="查看历史记录"><i class="fas fa-clock"></i></button>
      <div class="card-body">
          <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
              <div class="file-input-container">
                  <input id="fileInput" name="file" type="file" class="form-control-file" data-browse-on-zone-click="true" multiple>
              </div>
              <div class="form-group mb-3 uniform-height" style="display: none;">
                  <button type="button" class="btn btn-light mr-2" id="urlBtn">URL</button>
                  <button type="button" class="btn btn-light mr-2" id="bbcodeBtn">BBCode</button>
                  <button type="button" class="btn btn-light" id="markdownBtn">Markdown</button>
              </div>
              <div class="form-group mb-3 uniform-height" style="display: none;">
                  <textarea class="form-control" id="fileLink" readonly></textarea>
              </div>
              <div id="cacheContent" style="display: none;"></div>
          </form>
      </div>
      <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
      <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-fileinput/5.2.7/js/fileinput.min.js" type="application/javascript"></script>
      <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-fileinput/5.2.7/js/locales/zh.min.js" type="application/javascript"></script>
      <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/toastr.js/2.1.4/toastr.min.js" type="application/javascript"></script>
      <script>
          async function fetchBingImages() {
              const response = await fetch('/bing-images');
              const data = await response.json();
              return data.data.map(image => image.url);
          }

          async function setBackgroundImages() {
              const images = await fetchBingImages();
              const backgroundDiv = document.getElementById('background');
              if (images.length > 0) {
                  backgroundDiv.style.backgroundImage = 'url(' + images[0] + ')';
              }
              let index = 0;
              let currentBackgroundDiv = backgroundDiv;
              setInterval(() => {
                  const nextIndex = (index + 1) % images.length;
                  const nextBackgroundDiv = document.createElement('div');
                  nextBackgroundDiv.className = 'background next';
                  nextBackgroundDiv.style.backgroundImage = 'url(' + images[nextIndex] + ')';
                  document.body.appendChild(nextBackgroundDiv);
                  nextBackgroundDiv.style.opacity = 0;
                  setTimeout(() => {
                      nextBackgroundDiv.style.opacity = 1;
                  }, 50);
                  setTimeout(() => {
                      document.body.removeChild(currentBackgroundDiv);
                      currentBackgroundDiv = nextBackgroundDiv;
                      index = nextIndex;
                  }, 1000);
              }, 5000);
          }

          $(document).ready(function() {
              let originalImageURLs = [];
              let isCacheVisible = false;
              initFileInput();
              setBackgroundImages();

              function initFileInput() {
                  $("#fileInput").fileinput({
                      theme: 'fa',
                      language: 'zh',
                      browseClass: "btn btn-primary",
                      removeClass: "btn btn-danger",
                      showUpload: false,
                      showPreview: false,
                  }).on('filebatchselected', handleFileSelection)
                    .on('fileclear', handleFileClear);
              }

              async function handleFileSelection() {
                  const files = $('#fileInput')[0].files;
                  for (let i = 0; i < files.length; i++) {
                      await uploadFile(files[i]);
                  }
              }

              async function uploadFile(file) {
                  try {
                      toastr.info('上传中...', '', { timeOut: 0 });
                      const interfaceInfo = {
                          acceptTypes: 'image/*,video/*',
                          maxFileSize: 20 * 1024 * 1024
                      };
                      const acceptedTypes = interfaceInfo.acceptTypes.split(',');
                      const isAcceptedType = acceptedTypes.some(type => {
                          return type.includes('*') ? file.type.startsWith(type.split('/')[0]) : file.type === type;
                      });
                      if (!isAcceptedType) {
                          toastr.error('仅支持图片或视频格式的文件。');
                          return;
                      }
                      if (file.size > interfaceInfo.maxFileSize) {
                          if (file.type.startsWith('video/') || file.type === 'image/gif') {
                              toastr.error('文件必须≤20MB');
                              return;
                          } else {
                              toastr.info('正在压缩...', '', { timeOut: 0 });
                              const compressedFile = await compressImage(file);
                              file = compressedFile;
                          }
                      }
                      const formData = new FormData($('#uploadForm')[0]);
                      formData.set('file', file, file.name);
                      const uploadResponse = await fetch('/upload', { method: 'POST', body: formData });
                      const responseData = await handleUploadResponse(uploadResponse);
                      if (responseData.error) {
                          toastr.error(responseData.error);
                      } else {
                          originalImageURLs.push(responseData.data);
                          $('#fileLink').val(originalImageURLs.join('\\n\\n'));
                          $('.form-group').show();
                          adjustTextareaHeight($('#fileLink')[0]);
                          toastr.success('文件上传成功！');
                          saveToLocalCache(responseData.data, file.name);
                      }
                  } catch (error) {
                      console.error('处理文件时出现错误:', error);
                      $('#fileLink').val('文件处理失败！');
                      toastr.error('文件处理失败！');
                  } finally {
                      toastr.clear();
                  }
              }

              async function handleUploadResponse(response) {
                  if (response.ok) {
                      return await response.json();
                  } else {
                      const errorData = await response.json();
                      return { error: errorData.error };
                  }
              }

              $(document).on('paste', function(event) {
                  const clipboardData = event.originalEvent.clipboardData;
                  if (clipboardData && clipboardData.items) {
                      for (let i = 0; i < clipboardData.items.length; i++) {
                          const item = clipboardData.items[i];
                          if (item.kind === 'file') {
                              const pasteFile = item.getAsFile();
                              uploadFile(pasteFile);
                              break;
                          }
                      }
                  }
              });

              async function compressImage(file, quality = 0.5, maxResolution = 20000000) {
                  return new Promise((resolve) => {
                      const image = new Image();
                      image.onload = () => {
                          const width = image.width;
                          const height = image.height;
                          const resolution = width * height;
                          let scale = 1;
                          if (resolution > maxResolution) {
                              scale = Math.sqrt(maxResolution / resolution);
                          }
                          const targetWidth = Math.round(width * scale);
                          const targetHeight = Math.round(height * scale);
                          const canvas = document.createElement('canvas');
                          const ctx = canvas.getContext('2d');
                          canvas.width = targetWidth;
                          canvas.height = targetHeight;
                          ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
                          canvas.toBlob((blob) => {
                              const compressedFile = new File([blob], file.name, { type: 'image/jpeg' });
                              toastr.success('图片压缩成功！');
                              resolve(compressedFile);
                          }, 'image/jpeg', quality);
                      };
                      const reader = new FileReader();
                      reader.onload = (event) => {
                          image.src = event.target.result;
                      };
                      reader.readAsDataURL(file);
                  });
              }

              $('#urlBtn, #bbcodeBtn, #markdownBtn').on('click', function() {
                  const fileLinks = originalImageURLs.map(url => url.trim()).filter(url => url !== '');
                  if (fileLinks.length > 0) {
                      let formattedLinks = '';
                      switch ($(this).attr('id')) {
                          case 'urlBtn':
                              formattedLinks = fileLinks.join('\\n\\n');
                              break;
                          case 'bbcodeBtn':
                              formattedLinks = fileLinks.map(url => '[img]' + url + '[/img]').join('\\n\\n');
                              break;
                          case 'markdownBtn':
                              formattedLinks = fileLinks.map(url => '![image](' + url + ')').join('\\n\\n');
                              break;
                          default:
                              formattedLinks = fileLinks.join('\\n');
                      }
                      $('#fileLink').val(formattedLinks);
                      adjustTextareaHeight($('#fileLink')[0]);
                      copyToClipboardWithToastr(formattedLinks);
                  }
              });

              function handleFileClear(event) {
                  $('#fileLink').val('');
                  adjustTextareaHeight($('#fileLink')[0]);
                  hideButtonsAndTextarea();
                  originalImageURLs = [];
              }

              function adjustTextareaHeight(textarea) {
                textarea.style.height = '1px';
                textarea.style.height = (textarea.scrollHeight > 200 ? 200 : textarea.scrollHeight) + 'px';
                
                if (textarea.scrollHeight > 200) {
                    textarea.style.overflowY = 'auto';
                } else {
                    textarea.style.overflowY = 'hidden';
                }
            }            

              function copyToClipboardWithToastr(text) {
                  const input = document.createElement('textarea');
                  input.value = text;
                  document.body.appendChild(input);
                  input.select();
                  document.execCommand('copy');
                  document.body.removeChild(input);
                  toastr.success('已复制到剪贴板', '', { timeOut: 300 });
              }

              function hideButtonsAndTextarea() {
                  $('#urlBtn, #bbcodeBtn, #markdownBtn, #fileLink').parent('.form-group').hide();
              }

              function saveToLocalCache(url, fileName) {
                  const timestamp = new Date().toLocaleString('zh-CN', { hour12: false });
                  const cacheData = JSON.parse(localStorage.getItem('uploadCache')) || [];
                  cacheData.push({ url, fileName, timestamp });
                  localStorage.setItem('uploadCache', JSON.stringify(cacheData));
              }

              $('#viewCacheBtn').on('click', function() {
                  const cacheData = JSON.parse(localStorage.getItem('uploadCache')) || [];
                  const cacheContent = $('#cacheContent');
                  cacheContent.empty();
                  if (isCacheVisible) {
                      cacheContent.hide();
                      $('#fileLink').val('');
                      $('#fileLink').parent('.form-group').hide();
                      isCacheVisible = false;
                  } else {
                      if (cacheData.length > 0) {
                          cacheData.reverse();
                          cacheData.forEach((item) => {
                              const listItem = $('<div class="cache-item"></div>')
                                  .text(item.timestamp + ' - ' + item.fileName)
                                  .data('url', item.url);
                              cacheContent.append(listItem);
                              cacheContent.append('<br>');
                          });
                          cacheContent.show();
                      } else {
                          cacheContent.append('<div>还没有记录哦！</div>').show();
                      }
                      isCacheVisible = true;
                  }
              });

              $(document).on('click', '.cache-item', function() {
                  const url = $(this).data('url');
                  originalImageURLs = [];
                  $('#fileLink').val('');
                  originalImageURLs.push(url);
                  $('#fileLink').val(originalImageURLs.map(url => url.trim()).join('\\n\\n'));
                  $('.form-group').show();
                  adjustTextareaHeight($('#fileLink')[0]);
              });
          });
      </script>
</body>
</html>  
`, { headers: { 'Content-Type': 'text/html;charset=UTF-8' } });
  await cache.put(cacheKey, response.clone());
  return response;
}

async function handleAdminRequest(DATABASE, request, USERNAME, PASSWORD) {
  if (!authenticate(request, USERNAME, PASSWORD)) {
    return new Response('Unauthorized', { status: 401, headers: { 'WWW-Authenticate': 'Basic realm="Admin"' } });
  }
  return await generateAdminPage(DATABASE);
}

function isValidCredentials(authHeader, USERNAME, PASSWORD) {
  const base64Credentials = authHeader.split(' ')[1];
  const credentials = atob(base64Credentials).split(':');
  const username = credentials[0];
  const password = credentials[1];
  return username === USERNAME && password === PASSWORD;
}

async function generateAdminPage(DATABASE) {
  const mediaData = await fetchMediaData(DATABASE);
  const mediaHtml = mediaData.map(({ url }) => {
    const fileExtension = url.split('.').pop().toLowerCase();
    const timestamp = url.split('/').pop().split('.')[0];
    if (fileExtension === 'mp4') {
      return `
      <div class="media-container" data-key="${url}" onclick="toggleImageSelection(this)">
        <div class="media-type">视频</div>
        <video class="gallery-video" style="width: 100%; height: 100%; object-fit: contain;" data-src="${url}" controls>
          <source src="${url}" type="video/mp4">
          您的浏览器不支持视频标签。
        </video>
        <div class="upload-time">上传时间: ${new Date(parseInt(timestamp)).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}</div>
      </div>
      `;
    } else {
      return `
      <div class="image-container" data-key="${url}" onclick="toggleImageSelection(this)">
        <img data-src="${url}" alt="Image" class="gallery-image lazy">
        <div class="upload-time">上传时间: ${new Date(parseInt(timestamp)).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}</div>
      </div>
      `;
    }
  }).join('');
  
  const html = `
  <!DOCTYPE html>
  <html>
    <head>
      <title>图库</title>
      <link rel="icon" href="https://p1.meituan.net/csc/c195ee91001e783f39f41ffffbbcbd484286.ico" type="image/x-icon">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
      }
      .header {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
      }
      .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
      }
      .image-container, .media-container {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        aspect-ratio: 1 / 1;
        transition: transform 0.3s, box-shadow 0.3s;
      }
      .media-type {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 5px;
        border-radius: 5px;
        font-size: 14px;
        z-index: 10;
        cursor: pointer;
      }
      .image-container .upload-time, .media-container .upload-time {
        position: absolute;
        bottom: 10px;
        left: 10px;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 5px;
        border-radius: 5px;
        color: #000;
        font-size: 14px;
        z-index: 10;
        display: none;
      }
      .image-container:hover, .media-container:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
      }
      .gallery-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.3s;
        opacity: 0;
      }
      .gallery-image.loaded {
        opacity: 1;
      }
      .media-container.selected, .image-container.selected {
        border: 2px solid #007bff;
        background-color: rgba(0, 123, 255, 0.1);
      }
      .footer {
        margin-top: 20px;
        text-align: center;
        font-size: 18px;
        color: #555;
      }
      .delete-button {
        background-color: #ff4d4d;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px 15px;
        cursor: pointer;
        transition: background-color 0.3s;
        width: auto;
      }
      .delete-button:hover {
        background-color: #ff1a1a;
      }
      .hidden {
        display: none;
      }
      @media (max-width: 600px) {
        .gallery {
          grid-template-columns: repeat(2, 1fr);
        }
        .header {
          flex-direction: row;
          align-items: center;
        }
        .header-right {
          margin-left: auto;
        }
        .footer {
          font-size: 16px;
        }
        .delete-button {
          width: 100%;
          margin-top: 10px;
        }
      }
      </style>
      <script>
        let selectedCount = 0;
        const selectedKeys = new Set();
        function toggleImageSelection(container) {
          const key = container.getAttribute('data-key');
          container.classList.toggle('selected');
          const uploadTime = container.querySelector('.upload-time');
          if (container.classList.contains('selected')) {
            selectedKeys.add(key);
            selectedCount++;
            uploadTime.style.display = 'block';
          } else {
            selectedKeys.delete(key);
            selectedCount--;
            uploadTime.style.display = 'none';
          }
          updateDeleteButton();
        }
        function updateDeleteButton() {
          const deleteButton = document.getElementById('delete-button');
          const countDisplay = document.getElementById('selected-count');
          countDisplay.textContent = selectedCount;
          const headerRight = document.querySelector('.header-right');
          if (selectedCount > 0) {
            headerRight.classList.remove('hidden');
          } else {
            headerRight.classList.add('hidden');
          }
        }
        async function deleteSelectedImages() {
          if (selectedKeys.size === 0) return;
          const response = await fetch('/delete-images', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(Array.from(selectedKeys))
          });
          if (response.ok) {
            alert('选中的媒体已删除');
            location.reload();
          } else {
            alert('删除失败');
          }
        }
        document.addEventListener('DOMContentLoaded', () => {
          const images = document.querySelectorAll('.gallery-image[data-src]');
          const options = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
          };
          const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.onload = () => img.classList.add('loaded');
                observer.unobserve(img);
              }
            });
          }, options);
          images.forEach(image => {
            imageObserver.observe(image);
          });
        });
      </script>
    </head>
    <body>
      <div class="header">
        <div class="header-left">
          <span>媒体文件 ${mediaData.length} 个</span>
          <span>已选中: <span id="selected-count">0</span>个</span>
        </div>
        <div class="header-right hidden">          
          <button id="delete-button" class="delete-button" onclick="deleteSelectedImages()">删除选中</button>
        </div>
      </div>
      <div class="gallery">
        ${mediaHtml}
      </div>
      <div class="footer">
        到底啦
      </div>
    </body>
  </html>
  `;
  return new Response(html, { status: 200, headers: { 'Content-Type': 'text/html; charset=utf-8' } });
}

async function fetchMediaData(DATABASE) {
  const result = await DATABASE.prepare('SELECT url, fileId FROM media').all();
  const mediaData = result.results.map(row => {
    const timestamp = parseInt(row.url.split('/').pop().split('.')[0]);
    return { fileId: row.fileId, url: row.url, timestamp: timestamp };
  });
  mediaData.sort((a, b) => b.timestamp - a.timestamp);
  return mediaData.map(({ fileId, url }) => ({ fileId, url }));
}

async function handleUploadRequest(request, DATABASE, enableAuth, USERNAME, PASSWORD, domain, TG_BOT_TOKEN, TG_CHAT_ID) {
  try {
    const formData = await request.formData();
    const file = formData.get('file');
    if (!file) throw new Error('缺少文件');
    if (enableAuth && !authenticate(request, USERNAME, PASSWORD)) {
      return new Response('Unauthorized', { status: 401, headers: { 'WWW-Authenticate': 'Basic realm="Admin"' } });
    }
    const uploadFormData = new FormData();
    uploadFormData.append("chat_id", TG_CHAT_ID);
    let fileId;
    if (file.type.startsWith('image/gif')) {
      const newFileName = file.name.replace(/\.gif$/, '.jpeg');
      const newFile = new File([file], newFileName, { type: 'image/jpeg' });
      uploadFormData.append("document", newFile);
    } else {
      uploadFormData.append("document", file);
    }
    const telegramResponse = await fetch(`https://api.telegram.org/bot${TG_BOT_TOKEN}/sendDocument`, { method: 'POST', body: uploadFormData });
    if (!telegramResponse.ok) {
      const errorData = await telegramResponse.json();
      throw new Error(errorData.description || '上传到 Telegram 失败');
    }
    const responseData = await telegramResponse.json();
    if (responseData.result.video) fileId = responseData.result.video.file_id;
    else if (responseData.result.document) fileId = responseData.result.document.file_id;
    else if (responseData.result.sticker) fileId = responseData.result.sticker.file_id;
    else throw new Error('返回的数据中没有文件 ID');
    const fileExtension = file.name.split('.').pop();
    const timestamp = Date.now();
    const imageURL = `https://${domain}/${timestamp}.${fileExtension}`;
    await DATABASE.prepare('INSERT INTO media (url, fileId) VALUES (?, ?) ON CONFLICT(url) DO NOTHING').bind(imageURL, fileId).run();
    return new Response(JSON.stringify({ data: imageURL }), { status: 200, headers: { 'Content-Type': 'application/json' } });
  } catch (error) {
    console.error('内部服务器错误:', error);
    return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } });
  }
}

async function handleImageRequest(request, DATABASE, TG_BOT_TOKEN) {
  const requestedUrl = request.url;
  const cache = caches.default;
  const cacheKey = new Request(requestedUrl);
  const cachedResponse = await cache.match(cacheKey);
  if (cachedResponse) return cachedResponse;
  const result = await DATABASE.prepare('SELECT fileId FROM media WHERE url = ?').bind(requestedUrl).first();
  if (result) {
    const fileId = result.fileId;
    const getFileResponse = await fetch(`https://api.telegram.org/bot${TG_BOT_TOKEN}/getFile?file_id=${fileId}`);
    if (!getFileResponse.ok) return new Response(null, { status: 404 });
    const fileData = await getFileResponse.json();
    const filePath = fileData.result.file_path;
    const telegramFileUrl = `https://api.telegram.org/file/bot${TG_BOT_TOKEN}/${filePath}`;
    const response = await fetch(telegramFileUrl);
    if (response.ok) {
      const fileExtension = requestedUrl.split('.').pop().toLowerCase();
      let contentType = 'text/plain';
      if (fileExtension === 'jpg' || fileExtension === 'jpeg') contentType = 'image/jpeg';
      if (fileExtension === 'png') contentType = 'image/png';
      if (fileExtension === 'gif') contentType = 'image/gif';
      if (fileExtension === 'webp') contentType = 'image/webp';
      if (fileExtension === 'mp4') contentType = 'video/mp4';
      const headers = new Headers(response.headers);
      headers.set('Content-Type', contentType);
      headers.set('Content-Disposition', 'inline');
      const responseToCache = new Response(response.body, { status: response.status, headers });
      await cache.put(cacheKey, responseToCache.clone());
      return responseToCache;
    }
  }
  const notFoundResponse = new Response(null, { status: 404 });
  await cache.put(cacheKey, notFoundResponse.clone());
  return notFoundResponse;
}

async function handleBingImagesRequest(request) {
  const cache = caches.default;
  const cacheKey = new Request('https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=5');
  const cachedResponse = await cache.match(cacheKey);
  if (cachedResponse) return cachedResponse;
  const res = await fetch(cacheKey);
  const bingData = await res.json();
  const images = bingData.images.map(image => ({ url: `https://www.dmoe.cc/random.php` }));
  const returnData = { status: true, message: "操作成功", data: images };
  const response = new Response(JSON.stringify(returnData), { status: 200, headers: { 'Content-Type': 'application/json' } });
  await cache.put(cacheKey, response.clone());
  return response;
}

async function handleDeleteImagesRequest(request, DATABASE) {
  if (request.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 });
  }
  try {
    const keysToDelete = await request.json();
    if (!Array.isArray(keysToDelete) || keysToDelete.length === 0) {
      return new Response(JSON.stringify({ message: '没有要删除的项' }), { status: 400 });
    }
    const placeholders = keysToDelete.map(() => '?').join(',');
    const result = await DATABASE.prepare(`DELETE FROM media WHERE url IN (${placeholders})`).bind(...keysToDelete).run();
    if (result.changes === 0) {
      return new Response(JSON.stringify({ message: '未找到要删除的项' }), { status: 404 });
    }
    const cache = caches.default;
    for (const url of keysToDelete) {
      const cacheKey = new Request(url);
      const cachedResponse = await cache.match(cacheKey);
      if (cachedResponse) {
        await cache.delete(cacheKey);
      }
    }
    return new Response(JSON.stringify({ message: '删除成功' }), { status: 200 });
  } catch (error) {
    return new Response(JSON.stringify({ error: '删除失败', details: error.message }), { status: 500 });
  }
}

三、关于背景修改

下面是两个可用的动漫背景随机图，可以提供修改。

1	const images = bingData.images.map(image => ({ url: `https://www.dmoe.cc/random.php` }));

这行代码里面的url可以改掉就行了。

动漫
www.dmoe.cc/random.php
api.mtyqx.cn/tapi/random.php （挺好看的动漫）

分享几个公用的高清壁纸图片的API | LearnKu 产品论坛

四、关于PicGo

到插件中下载一个【自定义图床】插件，按照下面设置即可

Netcup注册

Posted on 2024-10-25

Netcup可以注册后缀为de的域名一年1.32欧元，续费一样相当划算

另外Netcup有0.84欧元/月的VPS套餐，每个账户只允许申请一台。

探针如下：

1.家宽直连，最好在下午4点到早上6点去试，这样能快一点，德国人在上班。用这个链接去买，感谢justwe佬的分享，应该不是aff

1
2
3

1o：https://www.netcup.de/bestellen/produkt.php?produkt=3422
2o：https://www.netcup.de/bestellen/produkt.php?produkt=3423
4o：https://www.netcup.de/bestellen/produkt.php?produkt=3424

2.一直往下点就行，不行就翻译一下，选择注册帐号，填入你的真实信息，地址不能有“，”全英文，地址选中国，公司可以不填
3.会发一封邮件说工作人员正在审核，问你要不要付款，你可以取消之类的，如果你用家宽的话等5分钟左右会收到两封连在一起的邮件，一封给了你帐号密码，另一封让你去验证身份，你打开验证身份即可，注意一定要在第一次就选择预付款，不要选验证身份
4.去https://www.servercontrolpanel.de/SCP/Home 登录，会发二步验证到你的邮箱，去billing付款，信用卡或者paypal，等机器开通，done！

全程顺利的话半小时解决，我等机器开通等了1个小时，现在只要付钱就能过了，方便多了

findbook的使用方法

Posted on 2024-09-19

我们在searching图书的时候，下载时如果长时间停留0%，那一定是你的网关设置的有问题，只需要按照下面配置即可。

访问下面地址，查看自己的网络状态

https://ipfs.github.io/public-gateway-checker/

将域名复制编辑

https://ipfs.runfission.com
https://4everland.io
https://gateway.pinata.cloud
https://trustless-gateway.link

将上面的内容复制到页面右上角的⚙️中去，然后保存。

重新尝试下载

HSD高频航班累订阅事件说明-ICKI

Posted on 2024-05-21

8类基础数据

Mockjs 造数据写入Mysql

Posted on 2024-05-20

Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的库，常用于前端开发中对接口进行模拟。通过 Mock.js，可以快速生成各种类型的随机数据，包括但不限于文本、数字、日期、布尔值等，从而方便地进行数据模拟和测试。除了数据生成外，Mock.js 也可以拦截前端发送的 Ajax 请求，返回预先设定的模拟数据，使前端开发人员能够在没有后端支持的情况下进行接口调试及开发。

下面我们使用Mockjs生成数据，写入到Mysql数据库

下面是项目目录结构：

.
├── main.js
├── package.json
└── util
    ├── dbutil.js
    └── mockutil.js

提前使用npm或cnpm安装所需要的依赖:

1 2	cnpm install mockjs --save cnpm install mysql --save

数据库建表


CREATE TABLE aoc_flight_info_dw (
    id                  BIGINT AUTO_INCREMENT COMMENT '主键' PRIMARY KEY,
    flight_date         DATE                                 NOT NULL COMMENT '航班日期',
    flight_no           VARCHAR(10)                          NOT NULL COMMENT '航班号',
    dep_airport         VARCHAR(4)                           NOT NULL COMMENT '起飞机场',
    arr_airport         VARCHAR(4)                           NOT NULL COMMENT '到达机场',
    transfer_number     INT(10)    DEFAULT 0                 NOT NULL COMMENT '中转人数',
    etd                 DATETIME                             NOT NULL COMMENT '预计起飞时间',
    eta                 DATETIME                             NOT NULL COMMENT '预计到达时间',
    exist_vip           TINYINT(1) DEFAULT 0                 NOT NULL COMMENT '是否有VIP旅客',
    previous_delay      TINYINT(1) DEFAULT 0                 NOT NULL COMMENT '前段航班是否延误',
    estimate_delay_time INT(10)    DEFAULT 0                 NOT NULL COMMENT '预计延误时间',
    std                 DATETIME                             NOT NULL COMMENT '计划起飞时间',
    sta                 DATETIME                             NOT NULL COMMENT '计划到达时间',
    flight_type         VARCHAR(10)                          NOT NULL COMMENT '航班性质',
    d_or_i              VARCHAR(10)                          NOT NULL COMMENT '国际/国内/地区',
    ac_type             VARCHAR(10)                          NOT NULL COMMENT '机型',
    ac_reg              VARCHAR(10)                          NOT NULL COMMENT '机号',
    warn_level          VARCHAR(10)                          NULL COMMENT '预警航班等级',
    create_time         DATETIME   DEFAULT current_timestamp NOT NULL COMMENT '创建时间',
    update_time         DATETIME   DEFAULT current_timestamp NOT NULL ON UPDATE current_timestamp COMMENT '更新时间',
    CONSTRAINT unq_flight_idx UNIQUE (flight_date, flight_no, dep_airport, arr_airport)
) COMMENT '航班信息表同步数仓' CHARSET = utf8mb4;

CREATE INDEX aoc_flight_info_flight_date_idx ON aoc_flight_info_dw (flight_date, ac_reg);


CREATE TABLE aoc_passenger_info_dw (
    id             BIGINT AUTO_INCREMENT COMMENT '主键' PRIMARY KEY,
    aoc_flight_id  BIGINT                                 NOT NULL COMMENT '航班信息表id',
    passenger_name VARCHAR(100) DEFAULT ''                NOT NULL COMMENT '姓名',
    vip_type       VARCHAR(10)  DEFAULT ''                NOT NULL COMMENT 'VIP类型',
    vip_line       VARCHAR(100) DEFAULT ''                NOT NULL COMMENT 'VIP航程',
    create_time    DATETIME     DEFAULT current_timestamp NOT NULL COMMENT '创建时间',
    update_time    DATETIME     DEFAULT current_timestamp NOT NULL ON UPDATE current_timestamp COMMENT '更新时间'
) COMMENT 'VIP旅客信息表数仓同步' CHARSET = utf8mb4;

CREATE INDEX aoc_passenger_info_aoc_flight_id_idx ON aoc_passenger_info_dw (aoc_flight_id);

1. 连接Mysql数据库

var Mysql = require('mysql');

var conn = Mysql.createConnection({
    host   : '172.22.17.38',
    user   : 'u_tqd',
    password : '62w5LjLi',
    port: '3306',
    database: 'tqddb',
});

exports.insert = function(sql, dim_arr){
    conn.connect();
    dim_arr.data.forEach(element=>{
        conn.query(sql, element, function(err, result){
            if(err){
                console.log('err:', err.message);
            }
            console.log('------INSERT-------');
            console.log('res:', result);
            console.log('------SUCCESS-------');
        });
    })
    conn.end();
}

2. 使用mock伪造数据

var Mock = require('mockjs');

exports.aoc_flight_info_dw = Mock.mock({
    "data|500": [
      [
            "@increment(1)",                    // id
            "@date('yyyy-MM-dd')",              // flight_date
            /^HO[0-9]{4}$/,                     // flight_no
            /^[A-Z]{3}$/,                       // dep_airport
            /^[A-Z]{3}$/,                       // arr_airport
            "@integer(0, 20 )",                 // transfer_number
            "@datetime('yyyy-MM-dd HH:mm:ss')", // etd
            "@datetime('yyyy-MM-dd HH:mm:ss')", // eta
            "@integer(0, 1 )",                  // exist_vip
            "@integer(0, 1 )",                  // previous_delay
            "@integer(1800, 18000 )",           // estimate_delay_time
            "@datetime('yyyy-MM-dd HH:mm:ss')", // std
            "@datetime('yyyy-MM-dd HH:mm:ss')", // sta
            "@integer(0, 3 )",                  // flight_type
            /D|I|R/,                            // d_or_i
            /A320|A321|B787|A319/,              // ac_type
            /^[0-9]{4}$/,                       // ac_reg
            "@integer(0, 1 )",                  // warn_level
            "@datetime('yyyy-MM-dd HH:mm:ss')", // create_time
            "@datetime('yyyy-MM-dd HH:mm:ss')", // update_time
        ]
    ]
});

exports.aoc_passenger_info_dw = Mock.mock({
    "data|500": [
      [
         "@increment(1)",                   // id
         "@integer(0, 1000 )",              // aoc_flight_id
         "@cname()",                        // passenger_name
         "@integer(0, 3 )",                 // vip_type
         "@integer(0, 3 )",                 // vip_line
         "@datetime('yyyy-MM-dd HH:mm:ss')",// create_time
         "@datetime('yyyy-MM-dd HH:mm:ss')",// update_time
        ]
    ]
});

3. 编写main

var mockutil = require('./util/mockutil.js');
var dbutil = require('./util/dbutil.js');

function aoc_flight_info_dw(){
    var sql = 'INSERT INTO tqddb.aoc_flight_info_dw (id, flight_date, flight_no, dep_airport, arr_airport, transfer_number, etd, eta, exist_vip, previous_delay, estimate_delay_time, std, sta, flight_type, d_or_i, ac_type, ac_reg, warn_level, create_time, update_time) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);'
    dbutil.insert(sql, mockutil.aoc_flight_info_dw);
}

function aoc_passenger_info_dw(){
    var sql = 'INSERT INTO tqddb.aoc_passenger_info_dw (id, aoc_flight_id, passenger_name, vip_type, vip_line, create_time, update_time) VALUES (?,?,?,?,?,?,?);'
    dbutil.insert(sql, mockutil.aoc_passenger_info_dw);
}

function main(){
    //aoc_flight_info_dw();
    aoc_passenger_info_dw()

}

main();