57uv6Z6g Hexo https://loli.fj.cn/ All rights reserved 2026, 57uv6Z6g 本站所有文章仅作技术研究，请勿非法破坏，请遵守相关法律法规，后果自负]]> 57uv6Z6g 2026-10-11T15:02:42.667Z 57uv6Z6g undefined

前言

Vue3项目实现SSR

下载依赖

1
2
npm install express vue @vue/server-renderer
npm install -D webpack webpack-cli webpack-node-externals vue-loader babel-loader @babel/core @babel/preset-env

客户端

定义客户端

src/client/index.js
1
2
3
4
5
import { createSSRApp } from "vue";
import App from "../App.vue";

const app = createSSRApp(App);
app.mount("#app");

定义Webpack配置

config/client/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  target: "web",
  mode: "development",
  entry: "./src/client/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "../../build/client")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"]
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

通过Webpack打包客户端

1
webpack --config config/client/webpack.config.js

服务器

定义Vue3根组件

src/App.vue
1
<template></template>

定义服务器

  • 渲染Vue3根组件
  • 实现JS水合激活（Hydration）
src/server/app.js
1
2
3
4
5
6
import { createSSRApp } from "vue";
import App from "../App.vue";

export default function createApp() {
  return createSSRApp(App);
}
src/server/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const express = require("express");
const path = require("path");
const { renderToString } = require("@vue/server-renderer");
const createApp = require("./app.js");

const server = express();
server.use(express.static(path.resolve(__dirname, "../client")));
server.get("/", async function (request, response) {
  const app = createApp();
  const appHTML = await renderToString(app);
  response.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      <div id="app">${appHTML}</div>
      <script src="/bundle.js"></script>
    </body>
    </html>
  `);
});
server.listen(3000);

定义Webpack配置

config/server/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const path = require("path");
const nodeExternals = require("webpack-node-externals");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  target: "node",
  mode: "development",
  entry: "./src/server/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "../../build/server"),
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"]
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [new VueLoaderPlugin()],
  externals: [
    nodeExternals({
      allowlist: ["vue", "@vue/server-renderer"]
    })
  ]
}

通过Webpack打包服务器

1
webpack --config config/server/webpack.config.js

启动SSR服务器

  • 先通过Webpack依次打包客户端和服务器，再启动打包好的服务器程序
1
2
3
4
webpack --config config/client/webpack.config.js
webpack --config config/server/webpack.config.js

node build/server/bundle.js

多组件

下载依赖

1
npm install vue-router@4

定义路由

src/views/home.vue
1
<template></template>
src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createRouter } from "vue-router";

const routes = [
  {
    path: "/",
    component: function () {
      return import("../views/home.vue");
    }
  }
];

export default function (history) {
  return createRouter({
    history: history,
    routes: routes
  });
}

使用路由

src/App.vue
1
2
3
4
5
6
<template>
  <router-link to="/">
    <button>home</button>
  </router-link>
  <router-view></router-view>
</template>
src/client/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createSSRApp } from "vue";
import App from "../App.vue";
import createRouter from "../router/index.js";
import { createWebHistory } from "vue-router";

const app = createSSRApp(App);

const router = createRouter(createWebHistory());
app.use(router);

router.isReady().then(function () {
  app.mount("#app");
});
src/server/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const express = require("express");
const path = require("path");
const { renderToString } = require("@vue/server-renderer");
const createApp = require("./app.js");
const createRouter = require("../router/index.js");
const { createMemoryHistory } = require("vue-router");

const server = express();
server.use(express.static(path.resolve(__dirname, "../client")));
server.get("/*", async function (request, response) {
  const app = createApp();
  
  const router = createRouter(createMemoryHistory());
  app.use(router);
  await router.push(request.url || "/");
  await router.isReady();
  
  const appHTML = await renderToString(app);
  response.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      <div id="app">${appHTML}</div>
      <script src="/bundle.js"></script>
    </body>
    </html>
  `);
});
server.listen(3000);

完成

]]> https://loli.fj.cn/2026/10/11/Vue3%E9%A1%B9%E7%9B%AE%E5%AE%9E%E7%8E%B0SSR/ 2026-10-11T08:54:17.000Z 前言

Vue3项目实现SSR

]]> 【笔记】Vue3项目实现SSR 2026-10-11T15:02:42.667Z 57uv6Z6g undefined

前言

Nodejs使用util工具模块

引入依赖

1
const util = require("util");

将函数转换为支持Promise的函数

1
2
let fn = function (fn) {}
fn = util.promisify(fn);

完成

]]> https://loli.fj.cn/2026/10/07/Nodejs%E7%9A%84%E5%B7%A5%E5%85%B7/ 2026-10-07T09:16:15.000Z 前言

Nodejs使用util工具模块

]]> 【笔记】Nodejs的工具 2026-10-11T15:02:42.633Z 57uv6Z6g undefined

前言

Download and extract a git repository (GitHub, GitLab, Bitbucket) from node.（Gitlab）

下载依赖

1
npm install -D download-git-repo

引入依赖

1
const download = require("download-git-repo");

克隆Git项目

direct:：Github需要进行探测
#main：指定分支，缺省值为master

1
download("direct:https://github.com/example/example.git#main", "./", { clone: true }, function (err) {});

完成

]]> https://loli.fj.cn/2026/10/07/download-git-repo%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-10-07T09:04:11.000Z 前言

Download and extract a git repository (GitHub, GitLab, Bitbucket) from node.（Gitlab）

]]> 【笔记】download-git-repo学习笔记 2026-10-11T15:02:42.680Z 57uv6Z6g undefined

前言

Nodejs开发脚手架项目

配置环境变量

  • 修改配置文件，定义可执行文件路径
package.json
1
2
3
4
5
{
  "bin": {
    "name": "index.js"
  }
}
  • 向环境变量添加软链接
1
npm link

获取命令行参数

1
name arg1 arg2
1
console.log(process.env); // ["node", "name", "arg1", arg2""]

通过Commander处理命令行参数

  • The complete solution for node.js command-line interfaces.（Github）

下载依赖

1
npm install commander

引入依赖

1
const { program } = require("commander");
1
const program = require("commander");

处理参数

版本

1
2
const version = require("package.json").version;
program.version(version);
1
name --version
包含简写
1
2
const version = require("package.json").version;
program.version(version, "-v --version");
1
name -v

说明文档

1
2
3
4
5
program.on("--help", function () {
  console.log("");
  console.log("Others:");
  console.log("  text");
});
1
2
3
4
5
6
7
Usage: index [options]

Options:
  -v --version  output the version number

Others:
  text

其他参数

1
name -o .
1
2
program.option("-o --out");
console.log(program.opts().o); // "."
包含帮助文档描述

"desc"：描述

1
program.option("-o --out", "desc");
  • 使用--help查看帮助文档时会提示描述
1
name --help
1
2
3
4
5
Usage: index [options]

Options:
  -v --version  output the version number
  -o --out      desc

处理命令

1
2
3
program
  .command("create <project> [---others]")
  .action(function (project) {});

包含说明文档描述

"desc"：描述

1
2
3
4
program
  .command("create <project> [---others]")
  .description("desc")
  .action(function (project) {});
  • 使用--help查看帮助文档时会提示描述
1
name --help
1
2
3
4
5
6
7
Usage: index [options]

Options:
  -v --version  output the version number

Commands:
  create <project> [...others]  desc

完成

]]> https://loli.fj.cn/2026/10/06/Nodejs%E5%BC%80%E5%8F%91%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE/ 2026-10-06T13:27:33.000Z 前言

Nodejs开发脚手架项目

]]> 【笔记】Nodejs开发脚手架项目 2026-10-11T15:02:42.633Z 57uv6Z6g undefined

前言

在计算领域中，Shebang（也称为Hashbang）是一个由井号和叹号构成的字符序列#!，位于脚本文件开头。类Unix系统直接执行脚本时，会根据它指定的程序启动解释器，并把脚本路径交给解释器。（维基百科）

定义Shebang

指定解释器全局路径

Shell

1
#!/bin/sh

通过环境变量指定解释器

Shell

1
#!/usr/bin/env sh

PowerShell（Linux）

1
#!/usr/bin/env pwsh

Python3

1
#!/usr/bin/env python3

Ruby

1
#!/usr/bin/env ruby

PHP

1
2
#!/usr/bin/env php
<?php ?>

Nodejs

1
#!/usr/bin/env node

Perl

1
#!/usr/bin/env perl

Dart

1
2
3
#!/usr/bin/env dart

void main(List<String> args) {}

通过Shebang中定义的解释器执行代码

1
2
chmod +x <file_name>.sh
./<file_name>.sh

完成

]]> https://loli.fj.cn/2026/10/06/Shebang%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-10-06T13:05:52.000Z 前言

在计算领域中，Shebang（也称为Hashbang）是一个由井号和叹号构成的字符序列#!，位于脚本文件开头。类Unix系统直接执行脚本时，会根据它指定的程序启动解释器，并把脚本路径交给解释器。（维基百科）

]]> 【笔记】Shebang学习笔记 2026-10-11T15:02:42.652Z 57uv6Z6g undefined

前言

This package contains an OCR engine - libtesseract and a command line program - tesseract.（Github）

下载依赖

tesseract-lang：全语言语言包

1
brew install tesseract tesseract-lang

OCR识别图片

-l <language>：指定语言

eng：英语
chi_sim：简体中文
chi_sim+eng：简体中文和英语，简体中文是主要语言

stdout：输出到控制台

1
tesseract <file_input> stdout -l eng

./<file_output_name>：输出到文件

1
tesseract <file_input> ./<file_output_name> -l eng

完成

]]> https://loli.fj.cn/2026/10/06/tesseract%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-10-06T04:25:59.000Z 前言

This package contains an OCR engine - libtesseract and a command line program - tesseract.（Github）

]]> 【笔记】tesseract学习笔记 2026-10-11T15:02:42.686Z 57uv6Z6g undefined

前言

MacOS部署Tailscale作为网关

MacOS加入到Tailscale网络

传送门

MacOS配置IP转发网路

1
tailscale set --advertise-routes=192.168.0.0/24

在Tailscale控制台中授权MacOS的IP转发网络

  • 勾选配置的IP转发网络->Save

完成

]]> https://loli.fj.cn/2026/10/04/MacOS%E9%83%A8%E7%BD%B2Tailscale%E4%BD%9C%E4%B8%BA%E7%BD%91%E5%85%B3/ 2026-10-04T13:00:54.000Z 前言

MacOS部署Tailscale作为网关

]]> 【笔记】MacOS部署Tailscale作为网关 2026-10-11T15:02:42.625Z 57uv6Z6g 116298811198797842

前言

Vite是一个由尤雨溪编写的本地开发服务器。它被默认用于Vue和React的项目模板，支持TypeScript与JSX并在内部使用Rolldown进行打包构建。（维基百科）

下载依赖

1
npm install -D vite

基本命令

启动服务器

1
vite

打包

1
vite build

打包并预览

1
vite preview

创建项目

1
npm create vite

配置文件

vite.config.js
1
2
3
4
5
import { defineConfig } from "vite";

export default defineConfig({
  plugins: []
});
  • 简写
vite.config.js
1
2
3
export default {
  plugins: []
};

打包JS文件

  • 直接引入JS文件
1
import "<js_file_name>";

打包CSS文件

  • 直接引入CSS文件
1
import "<css_file_name>";

通过PostCSS转换CSS文件

下载依赖

1
npm install -D postcss postcss-preset-env

打包Less文件

下载依赖

1
npm install -D less

引入Less

1
import "<less_file_name>";

打包Vue文件

Vue2

下载依赖

1
npm install -D underfin/vue-plugin-vue2

修改配置文件

vite.config.js
1
2
3
4
5
6
7
8
import { defineConfig } from "vite";
import vue from "underfin/vue-plugin-vue2";

export default defineConfig({
  plugins: [
    vue()
  ]
});

Vue3

下载依赖

1
npm install -D @vitejs/plugin-vue

修改配置文件

vite.config.js
1
2
3
4
5
6
7
8
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue()
  ]
});

Vue3 JSX

下载依赖

1
npm install -D @vitejs/plugin-vue-jsx

修改配置文件

vite.config.js
1
2
3
4
5
6
7
8
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue()
  ]
});

完成

]]> https://loli.fj.cn/2026/09/27/Vite%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-09-27T23:32:36.000Z 前言

Vite是一个由尤雨溪编写的本地开发服务器。它被默认用于Vue和React的项目模板，支持TypeScript与JSX并在内部使用Rolldown进行打包构建。（维基百科）

]]> 【笔记】Vite学习笔记 2026-10-11T15:02:42.666Z 57uv6Z6g undefined

前言

womprat is a portable Windows (ARM64 and Intel) SSH terminal, browser, VNC viewer, and RDP viewer for your tailnet.（Github）

Windows上通过rcarmo/womprat实现临时加入Tailscale网络

下载依赖

1
certutil -urlcache -split -f https://github.com/rcarmo/womprat/releases/download/v0.3.2/womprat-windows-amd64.exe

获取登录密钥

  • 填写Description->勾选Reusable允许反复使用->Generate key

  • 复制密钥->Done

启动womprat

1
.\womprat-windows-amd64.exe

首次启动

  • 首次进入需要输入上一步骤获取的密钥（密钥信息会存储在%AppData%\womprat，以后无需再次输入密钥）->Connect

建立SSH连接

  • 输入ssh://<username>@<ip>:22->Go建立远程连接

完成

  • 截图纪念

]]> https://loli.fj.cn/2026/09/15/womprat%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-09-15T21:43:30.000Z 前言

womprat is a portable Windows (ARM64 and Intel) SSH terminal, browser, VNC viewer, and RDP viewer for your tailnet.（Github）

Windows上通过rcarmo/womprat实现临时加入Tailscale网络

]]> 【笔记】womprat学习笔记 2026-10-11T15:02:42.686Z 57uv6Z6g undefined

前言

Tailscale Inc. is a software company based in Toronto, Ontario. Tailscale develops an open-source software-defined mesh virtual private network (VPN) and a web-based management service. The company provides a zero config VPN as a service under the same name.

下载依赖

MacOS

1
brew install tailscale

启动服务

1
sudo brew services start tailscale

登录

1
sudo tailscale up

完成

]]> https://loli.fj.cn/2026/09/15/Tailscale%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-09-15T07:30:18.000Z 前言

Tailscale Inc. is a software company based in Toronto, Ontario. Tailscale develops an open-source software-defined mesh virtual private network (VPN) and a web-based management service. The company provides a zero config VPN as a service under the same name.

]]> 【笔记】Tailscale学习笔记 2026-10-11T15:02:42.661Z 57uv6Z6g undefined

前言

Debian上部署RustDesk中继服务器

下载依赖

1
wget https://github.com/rustdesk/rustdesk-server/releases/download/1.1.6-2/rustdesk-server-hbbr_1.1.6_amd64.deb https://github.com/rustdesk/rustdesk-server/releases/download/1.1.6-2/rustdesk-server-hbbs_1.1.6_amd64.deb

安装

1
dpkg -i rustdesk-server-hbbr_1.1.6_amd64.deb rustdesk-server-hbbs_1.1.6_amd64.deb

部署hbbr中继服务器

1
hbbr

部署hbbs信令服务器

1
hbbs -r <ip>:21117
  • 从服务器日志中获取Key
1
INFO [src/rendezvous_server.rs:1243] Key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • 从服务器文件中获取Key
1
cat id_ed25519.pub
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

完成

]]> https://loli.fj.cn/2026/09/14/%E9%83%A8%E7%BD%B2RustDesk%E4%B8%AD%E7%BB%A7%E6%9C%8D%E5%8A%A1%E5%99%A8/ 2026-09-14T22:13:04.000Z 前言

Debian上部署RustDesk中继服务器

]]> 【笔记】部署RustDesk中继服务器 2026-10-11T15:02:42.725Z 57uv6Z6g undefined

前言

Sub2API 是一个 AI API 网关平台，用于分发和管理 AI 产品订阅的 API 配额。用户通过平台生成的 API Key 调用上游 AI 服务，平台负责鉴权、计费、负载均衡和请求转发。（Github）

部署Sub2API

Windows

下载项目

1
2
3
certutil -urlcache -split -f https://github.com/Wei-Shaw/sub2api/releases/download/v0.2.0/sub2api_0.2.0_windows_amd64.zip
"C:\Program Files\7-Zip\7z.exe" x sub2api_0.2.0_windows_amd64.zip -osub2api
cd sub2api

启动服务

1
2
SET TZ=UTC
.\sub2api.exe

首次登录

Docker

下载项目

1
2
git clone https://github.com/Wei-Shaw/sub2api.git
cd sub2api/deploy

修改配置文件

  • 复制默认配置文件
1
cp .env.example .env
  • 生成密钥
1
openssl rand -hex 32
1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • 修改配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# PostgreSQL password (REQUIRED)
POSTGRES_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# JWT Secret (RECOMMENDED - keeps users logged in after restart)
JWT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# TOTP Encryption Key (RECOMMENDED - preserves 2FA after restart)
TOTP_ENCRYPTION_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Optional: Admin account
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=

# Optional: Custom port
SERVER_PORT=8080

创建数据目录

1
mkdir -p data postgres_data redis_data

启动服务

1
docker compose -f docker-compose.local.yml up -d

获取初始密码

1
docker compose -f docker-compose.local.yml logs sub2api | grep "admin password"
1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

首次登录

邮箱：admin@example.com
密码：上一步骤获取的初始密码

Sub2API账号配置

订阅账号

配置分组

  • 分组管理->创建分组

  • 设置名称->设置平台->设置计费类型为订阅（配额）->创建

配置订阅

  • 订阅管理->分配订阅

  • 配置订阅时长

按量计费账号

配置分组

  • 分组管理->创建分组

  • 设置名称->设置平台->设置计费类型为标准（余额）->创建

充值余额

  • 用户管理->更多->充值

  • 配置充值余额->确认

大模型平台账号配置

配置代理（可选）

  • IP管理->添加代理

  • 配置代理->创建

配置账号

OpenAI

Plus账号登录
  • 账号管理->添加账号

  • 定义账号名称

  • 平台选择OpenAI->账号类型选择OAuth

  • 选择代理（可选）

  • 选择分组->下一步

  • 生成授权链接

  • 访问授权链接->回填授权成功的回调链接->完成授权

API密钥
  • 账号管理->添加账号

  • 定义账号名称

  • 平台选择OpenAI->账号类型选择API Key

  • 选择分组->创建

生成API密钥

  • API密钥->创建密钥

  • 定义密钥名称->选择密钥分组->创建

  • 在其他支持OpenAI兼容的提供商时，使用当前URL作为提供商，使用当前API密钥作为密钥

完成

  • 截图纪念

]]> https://loli.fj.cn/2026/09/03/%E9%83%A8%E7%BD%B2Sub2API/ 2026-09-03T00:13:56.000Z 前言

Sub2API 是一个 AI API 网关平台，用于分发和管理 AI 产品订阅的 API 配额。用户通过平台生成的 API Key 调用上游 AI 服务，平台负责鉴权、计费、负载均衡和请求转发。（Github）

]]> 【笔记】Sub2API学习笔记 2026-10-11T15:02:42.725Z 57uv6Z6g undefined

前言

Git排除学习笔记

将排除配置上传到Git仓库

.gitignore
1
dist/

本地排除配置

.git/info/exclude
1
dist/

完成

]]> https://loli.fj.cn/2026/09/02/Git%E6%8E%92%E9%99%A4/ 2026-09-02T22:18:36.000Z 前言

Git排除学习笔记

]]> 【笔记】Git排除 2026-10-11T15:02:42.586Z 57uv6Z6g undefined

前言

Mermaid is an open-source JavaScript-based diagramming and charting software that generates diagrams from text-based descriptions.（维基百科）

在Markdown中使用Mermaid

流程图

```mermaidgraph TD  Collection --> List  Collection --> Set  Collection --> Map```
graph TD  Collection --> List  Collection --> Set  Collection --> Map

自定义样式

1
2
3
4
5
6
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

  style Collection fill:#f0f8ff,stroke:#696969;
1
2
3
4
5
6
7
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

  classDef important fill:#f0f8ff,stroke:#696969;
  class List,Set,Map important;

超链接

1
2
3
4
5
6
graph TD
  Collection --> List
  Collection --> Set
  Collection --> Map

  click Collection href "https://example.com/" "提示";

在HTML中使用Mermaid

  • Mermaid会自动渲染class="mermaid"的元素
1
2
3
4
5
6
7
8
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>

<div class="mermaid">
  graph TD
    Collection --> List
    Collection --> Set
    Collection --> Map
</div>

手动渲染元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>

<div id="app">
  graph TD
    Collection --> List
    Collection --> Set
    Collection --> Map
</div>

<script>
  mermaid.initialize({ startOnLoad: false });
  mermaid.run({
    nodes: [document.getElementById("app")],
  }).then(function () {
    console.log();
  }).catch(function (err) {
    console.log(err);
  });
</script>

完成

参考文献

Mermaid官方文档

]]> https://loli.fj.cn/2026/08/26/Mermaid%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/ 2026-08-26T03:47:50.000Z 前言

Mermaid is an open-source JavaScript-based diagramming and charting software that generates diagrams from text-based descriptions.（维基百科）

]]> 【笔记】Mermaid学习笔记 2026-10-11T15:02:42.626Z 57uv6Z6g undefined

前言

Rollup通过PluginReplace插件实现打包时注入环境变量

下载依赖

1
npm install -D @rollup/plugin-replace

配置文件中使用环境变量

rollup.config.js
1
console.log(process.env.NODE_ENV);

打包时注入环境变量

1
rollup -c --environment NODE_ENV:development
1
rollup -c --environment NODE_ENV:production

完成

]]> https://loli.fj.cn/2026/08/25/Rollup%E7%9A%84PluginReplace%E6%8F%92%E4%BB%B6/ 2026-08-25T17:35:06.000Z 前言

Rollup通过PluginReplace插件实现打包时注入环境变量

]]> 【笔记】Rollup的PluginReplace插件 2026-10-11T15:02:42.648Z 57uv6Z6g undefined

前言

Rollup通过RollupPluginLiveReload插件实现自动打包

下载依赖

1
npm install -D rollup-plugin-livereload

修改配置文件

rollup.config.js
1
2
3
4
5
6
7
const liveReload = require("rollup-plugin-livereload");

module.exports = {
  plugins: [
    liveReload()
  ]
};

自动打包

1
rollup -c -w

完成

]]> https://loli.fj.cn/2026/08/25/Rollup%E7%9A%84RollupPluginLiveReload%E6%8F%92%E4%BB%B6/ 2026-08-25T17:29:46.000Z 前言

Rollup通过RollupPluginLiveReload插件实现自动打包

]]> 【笔记】Rollup的RollupPluginLiveReload插件 2026-10-11T15:02:42.648Z 57uv6Z6g undefined

前言

WPS更换会员图标

Windows

  • 右键WPS->属性->更改图标->%LocalAppData%\Kingsoft\WPS Office\版本号\office6\wpsofficeicon.dll->选择会员图标->确定->确定

完成

]]> https://loli.fj.cn/2026/08/25/WPS%E6%9B%B4%E6%8D%A2%E4%BC%9A%E5%91%98%E5%9B%BE%E6%A0%87/ 2026-08-25T17:23:15.000Z 前言

WPS更换会员图标

]]> 【笔记】WPS更换会员图标 2026-10-11T15:02:42.667Z 57uv6Z6g undefined

前言

Java的单例模式最佳实践

getInstance()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class Singleton implements Serializable {
    
    private static final long serialVersionUID = 1L;

    private static class Holder {
        private static final Singleton INSTANCE = new Singleton();
    }

    private Singleton() {
        // 防反射攻击：第二次调用构造器时抛异常
        if (Holder.INSTANCE != null) {
            throw new IllegalStateException("单例已存在，禁止反射创建");
        }
    }

    // 防序列化破坏
    protected Object readResolve() {
        return Holder.INSTANCE;
    }

    public static Singleton getInstance() {
        return Holder.INSTANCE;
    }

    public void method() {
        System.out.println();
    }
}

// 调用方式
public class Client {
    public static void main(String[] args) {
        Singleton.getInstance().method();
    }
}

INSTANCE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public enum Singleton {
    INSTANCE;

    // 可选的业务字段
    private String config;

    public void init(String config) {
        this.config = config;
    }

    public static Singleton getInstance() {
        return INSTANCE;
    }

    public void method() {
        System.out.println();
    }
}

// 调用方式
public class Client {
    public static void main(String[] args) {
        Singleton.INSTANCE.init("production");
        Singleton.INSTANCE.method();
    }
}

完成

]]> https://loli.fj.cn/2026/08/20/Java%E7%9A%84%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/ 2026-08-20T22:43:48.000Z 前言

Java的单例模式最佳实践

]]> 【笔记】Java的单例模式最佳实践 2026-10-11T15:02:42.609Z 57uv6Z6g undefined

前言

PostgreSQL忘记密码

修改配置文件

  • 将密码校验方式改为无密码校验
PostgreSQL/18/data/pg_hba.conf
1
2
3
4
5
6
7
8
#local   all             all                                     scram-sha-256
local   all             all                                     trust

#host    all             all             127.0.0.1/32            scram-sha-256
host    all             all             127.0.0.1/32            trust

#host    all             all             ::1/128                 scram-sha-256
host    all             all             ::1/128                 trust

修改密码

  • 重启服务后，无密码登录并修改密码
1
psql -U postgres
1
postgres=# ALTER USER postgres WITH PASSWORD '<password>';

还原配置文件

PostgreSQL/18/data/pg_hba.conf
1
2
3
4
5
local   all             all                                     scram-sha-256

host    all             all             127.0.0.1/32            scram-sha-256

host    all             all             ::1/128                 scram-sha-256

完成

]]> https://loli.fj.cn/2026/08/19/PostgreSQL%E5%BF%98%E8%AE%B0%E5%AF%86%E7%A0%81/ 2026-08-19T22:11:27.000Z 前言

PostgreSQL忘记密码

]]> 【笔记】PostgreSQL忘记密码 2026-10-11T15:02:42.638Z 57uv6Z6g undefined

前言

Rollup通过RollupPluginServe插件实现Web服务器

下载依赖

1
npm install -D rollup-plugin-serve

添加配置文件

port：指定端口号
open：是否自动打开浏览器
contentBase：指定静态资源路径

const serve = require("rollup-plugin-serve");module.exports = {  plugins: [    serve({      port: 80,      open: true,      contentBase: "."    })  ]}## 完成
]]> https://loli.fj.cn/2026/08/18/Rollup%E7%9A%84RollupPluginServe%E6%8F%92%E4%BB%B6/ 2026-08-18T18:50:00.000Z 前言

Rollup通过RollupPluginServe插件实现Web服务器

]]> 【笔记】Rollup的RollupPluginServe插件 2026-10-11T15:02:42.648Z