前言

在开发 Electron + Vue3 应用时，数据持久化是一个常见需求。很多开发者习惯在 Vue 项目中使用 pinia-plugin-persistedstate 插件来实现状态持久化，但在 Electron 应用中，这个方案存在一些问题。

为什么不能直接使用 pinia-plugin-persistedstate？

pinia-plugin-persistedstate 的默认实现是基于浏览器的 localStorage 或 sessionStorage。在 Electron 应用中，这种方案存在以下问题：

1. 进程隔离问题：Electron 采用多进程架构，渲染进程和主进程是隔离的。localStorage 只能在渲染进程中访问，主进程无法直接读取这些数据。

2. 数据安全性问题：localStorage 以明文形式存储数据，敏感信息（如用户 token）存在安全隐患。虽然可以对数据进行加密，但增加了复杂度。

3. 数据存储位置不可控：localStorage 的存储位置由 Chromium 决定，通常在用户目录下的特定位置。如果应用需要自定义存储路径，或者需要在不同机器间迁移数据，这种方式不够灵活。

4. 多用户数据隔离困难：如果应用需要支持多用户登录，并且每个用户的数据需要隔离存储，使用 localStorage 实现起来比较麻烦。

5. 应用更新可能导致数据丢失：在某些情况下（如应用重装、版本更新），localStorage 中的数据可能会丢失。

为了解决这些问题，我们可以使用 electron-store 配合 pinia 来实现更可靠的数据持久化方案。

方案概述

本方案的核心思路是：

• Pinia：负责管理应用的响应式状态
• electron-store：负责在主进程中进行数据持久化
• IPC 通信：通过 Electron 的 IPC 机制，让渲染进程能够访问 electron-store

同时，本方案还支持多用户数据隔离，每个用户的数据存储在独立的命名空间中。

实现步骤

1. 安装依赖

yarn add pinia electron-store

2. 主进程：初始化 electron-store 并注册 IPC 处理器

在主进程中，我们需要初始化 electron-store 并注册 IPC 处理器，让渲染进程可以通过 IPC 调用来访问存储。

// src/main/ipc/storeHandlers.js
import { ipcMain } from 'electron'
import StoreModule from 'electron-store'
import crypto from 'crypto'
const Store = StoreModule.default || StoreModule

let store = null
let encryptionKey = null

// 获取或创建加密密钥
function getEncryptionKey() {
  if (encryptionKey) {
    return encryptionKey
  }

  // 创建一个临时 store 来存储加密密钥
  const keyStore = new Store({
    name: 'app-key-store'
  })

  let savedKey = keyStore.get('encryption_key')

  if (savedKey) {
    encryptionKey = savedKey
    return encryptionKey
  }

  // 生成 256 位随机密钥
  const key = crypto.randomBytes(32).toString('hex')
  keyStore.set('encryption_key', key)
  encryptionKey = key
  return encryptionKey
}

// 初始化 store
function initStore() {
  if (store) return store

  store = new Store({
    name: 'app-config',
    encryptionKey: getEncryptionKey(), // 启用加密
    defaults: {
      currentUserId: '',
      users: {}
    }
  })

  return store
}

// 获取当前用户的数据命名空间
function getCurrentUserData() {
  const s = initStore()
  const currentUserId = s.get('currentUserId')
  if (!currentUserId) {
    return null
  }
  const users = s.get('users') || {}
  return users[currentUserId] || {}
}

// 设置当前用户的数据
function setCurrentUserData(userData) {
  const s = initStore()
  const currentUserId = s.get('currentUserId')
  if (!currentUserId) {
    return false
  }
  const users = s.get('users') || {}
  users[currentUserId] = userData
  s.set('users', users)
  return true
}

export function registerStoreHandlers() {
  initStore()

  // 设置当前用户（登录时调用）
  ipcMain.handle('store-set-current-user', (_, userId) => {
    if (!userId) return false
    const s = initStore()
    s.set('currentUserId', userId)
    return true
  })

  // 清除当前用户（退出登录时调用）
  ipcMain.handle('store-clear-current-user', () => {
    const s = initStore()
    s.set('currentUserId', '')
    return true
  })

  // 获取当前用户ID
  ipcMain.handle('store-get-current-user-id', () => {
    const s = initStore()
    return s.get('currentUserId')
  })

  // 获取值
  ipcMain.handle('store-get', (_, key) => {
    const userData = getCurrentUserData()
    if (!userData) return undefined
    return userData[key]
  })

  // 设置值
  ipcMain.handle('store-set', (_, key, value) => {
    const userData = getCurrentUserData()
    if (!userData) return false
    userData[key] = value
    return setCurrentUserData(userData)
  })

  // 删除值
  ipcMain.handle('store-delete', (_, key) => {
    const userData = getCurrentUserData()
    if (!userData) return false
    delete userData[key]
    return setCurrentUserData(userData)
  })

  // 获取当前用户的所有数据
  ipcMain.handle('store-get-all', () => {
    return getCurrentUserData() || {}
  })
}

3. 预加载脚本：暴露 Store API

在预加载脚本中，我们需要将 store 相关的 API 暴露给渲染进程。

// src/preload/index.js
import { contextBridge, ipcRenderer } from 'electron'

const api = {
  // electron-store API - 支持多用户数据隔离
  store: {
    // 设置当前用户（登录时调用）
    setCurrentUser: userId => ipcRenderer.invoke('store-set-current-user', userId),
    // 清除当前用户（退出登录时调用）
    clearCurrentUser: () => ipcRenderer.invoke('store-clear-current-user'),
    // 获取当前用户ID
    getCurrentUserId: () => ipcRenderer.invoke('store-get-current-user-id'),
    // 数据操作（自动关联到当前用户）
    get: key => ipcRenderer.invoke('store-get', key),
    set: (key, value) => ipcRenderer.invoke('store-set', key, value),
    delete: key => ipcRenderer.invoke('store-delete', key),
    getAll: () => ipcRenderer.invoke('store-get-all')
  }
}

if (process.contextIsolated) {
  contextBridge.exposeInMainWorld('api', api)
}

4. 渲染进程：封装 useElectronStore 组合式函数

为了方便在 Vue 组件和 Pinia Store 中使用，我们封装一个组合式函数。

// src/renderer/src/composables/useElectronStore.js
import { ref, readonly } from 'vue'

export const ELECTRON_STORE_TOKEN = 'token'
export const ELECTRON_STORE_USER = 'user'
export const ELECTRON_STORE_SETTING = 'setting'

export function useElectronStore() {
  const isReady = ref(false)
  const data = ref({})
  const currentUserId = ref('')

  // 检查是否在 Electron 环境
  const isElectron = typeof window !== 'undefined' && window.api && window.api.store

  // 设置当前用户
  async function setCurrentUser(userId) {
    if (!isElectron) return false
    try {
      await window.api.store.setCurrentUser(userId)
      currentUserId.value = userId
      await getAll()
      return true
    } catch (error) {
      console.error('store.setCurrentUser 失败:', error)
      return false
    }
  }

  // 清除当前用户
  async function clearCurrentUser() {
    if (!isElectron) return false
    try {
      await window.api.store.clearCurrentUser()
      currentUserId.value = ''
      data.value = {}
      return true
    } catch (error) {
      console.error('store.clearCurrentUser 失败:', error)
      return false
    }
  }

  // 获取当前用户ID
  async function getCurrentUser() {
    if (!isElectron) return ''
    try {
      const userId = await window.api.store.getCurrentUserId()
      currentUserId.value = userId
      return userId
    } catch (error) {
      console.error('store.getCurrentUserId 失败:', error)
      return ''
    }
  }

  // 获取值
  async function get(key, defaultValue = undefined) {
    if (!isElectron) return defaultValue
    try {
      const value = await window.api.store.get(key)
      return value !== undefined ? value : defaultValue
    } catch (error) {
      console.error('store.get 失败:', error)
      return defaultValue
    }
  }

  // 将值转换为可序列化的普通对象（处理 Vue 的 Proxy 对象）
  function toSerializable(value) {
    if (value === null || value === undefined) return value
    if (typeof value === 'function' || value instanceof Date || value instanceof RegExp) {
      return value
    }
    if (Array.isArray(value)) {
      return value.map(toSerializable)
    }
    if (typeof value === 'object') {
      const plain = {}
      for (const key of Object.keys(value)) {
        plain[key] = toSerializable(value[key])
      }
      return plain
    }
    return value
  }

  // 设置值
  async function set(key, value) {
    if (!isElectron) return false
    try {
      const serializableValue = toSerializable(value)
      await window.api.store.set(key, serializableValue)
      return true
    } catch (error) {
      console.error('store.set 失败:', error)
      return false
    }
  }

  // 获取当前用户的所有数据
  async function getAll() {
    if (!isElectron) return {}
    try {
      const allData = await window.api.store.getAll()
      data.value = allData
      isReady.value = true
      return allData
    } catch (error) {
      console.error('store.getAll 失败:', error)
      return {}
    }
  }

  return {
    isReady: readonly(isReady),
    data: readonly(data),
    currentUserId: readonly(currentUserId),
    setCurrentUser,
    clearCurrentUser,
    getCurrentUser,
    get,
    set,
    getAll,
    isElectron
  }
}

5. 在 Pinia Store 中使用

现在我们可以在 Pinia Store 中使用 useElectronStore 来实现数据持久化。

用户信息 Store 示例

// src/renderer/src/store/modules/user.js
import {
  useElectronStore,
  ELECTRON_STORE_TOKEN,
  ELECTRON_STORE_USER
} from '../../composables/useElectronStore.js'
import useSettingStore from './setting.js'

const useUserStore = defineStore('user', () => {
  const electronStore = useElectronStore()

  const token = ref('')
  const userInfo = ref({})
  const id = ref('')
  const name = ref('')

  // 登录成功处理
  async function handleLoginSuccess(accessToken) {
    token.value = accessToken

    // 先获取用户信息以获取用户ID
    await getUserInfo()

    // 设置当前用户（按用户ID隔离数据）
    if (id.value) {
      await electronStore.setCurrentUser(id.value)
    }

    // 保存 token 到 electron-store
    await electronStore.set(ELECTRON_STORE_TOKEN, accessToken)

    // 初始化设置
    await useSettingStore().init()
  }

  // 从 electron-store 加载用户数据
  async function loadUserFromStore() {
    try {
      const currentUserId = await electronStore.getCurrentUser()

      if (!currentUserId) return

      const storedToken = await electronStore.get(ELECTRON_STORE_TOKEN)
      if (storedToken) {
        token.value = storedToken
      }

      const storedUser = await electronStore.get(ELECTRON_STORE_USER)
      if (storedUser) {
        userInfo.value = storedUser.userInfo || {}
        id.value = storedUser.id || ''
        name.value = storedUser.name || ''
      }
    } catch (error) {
      console.error('从 store 加载用户数据失败:', error)
    }
  }

  // 保存用户数据到 electron-store
  async function saveUserToStore() {
    try {
      await electronStore.set(ELECTRON_STORE_USER, {
        userInfo: { ...userInfo.value },
        id: id.value,
        name: name.value
      })
    } catch (error) {
      console.error('保存用户数据到 store 失败:', error)
    }
  }

  // 获取用户信息
  function getUserInfo() {
    return new Promise(async (resolve, reject) => {
      try {
        // 调用后端 API getInfo 获取用户信息
        const infoRes = await getInfo()
        console.log('获取用户信息成功', infoRes)
        name.value = infoRes.data.userName
        id.value = infoRes.data.id
        userInfo.value = infoRes.data
        // 保存用户信息到 electron-store
        await saveUserToStore()
        resolve()
      } catch (error) {
        reject(error)
      }
    })
  }

  // 退出登录
  async function logout() {
    token.value = ''
    id.value = ''
    name.value = ''
    userInfo.value = {}

    // 清除当前用户（退出数据隔离）
    await electronStore.clearCurrentUser()
  }

  // 初始化时加载数据
  async function init() {
    await loadUserFromStore()
  }

  return {
    token,
    userInfo,
    id,
    name,
    handleLoginSuccess,
    loadUserFromStore,
    saveUserToStore,
    logout,
    init
  }
})

export default useUserStore

设置 Store 示例

// src/renderer/src/store/modules/setting.js
import { useElectronStore, ELECTRON_STORE_SETTING } from '../../composables/useElectronStore.js'

const useSettingStore = defineStore('setting', () => {
  const electronStore = useElectronStore()

  const themeMode = ref('dark')
  const isDark = ref(false)

  // 切换主题模式
  async function toggleThemeMode(mode) {
    themeMode.value = mode
    isDark.value = mode === 'dark'
    await saveSettingToStore()
    setThemeClass()
  }

  // 设置主题类名
  function setThemeClass() {
    if (isDark.value) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }

  // 从 electron-store 加载设置数据
  async function loadSettingFromStore() {
    try {
      const storedSetting = await electronStore.get(ELECTRON_STORE_SETTING)
      if (storedSetting) {
        themeMode.value = storedSetting.themeMode || 'light'
        isDark.value = storedSetting.isDark || false
      }
    } catch (error) {
      console.error('从 store 加载设置数据失败:', error)
    }
  }

  // 保存设置数据到 electron-store
  async function saveSettingToStore() {
    try {
      await electronStore.set(ELECTRON_STORE_SETTING, {
        themeMode: themeMode.value,
        isDark: isDark.value
      })
    } catch (error) {
      console.error('保存设置数据到 store 失败:', error)
    }
  }

  // 初始化
  async function init() {
    await loadSettingFromStore()
    await toggleThemeMode(themeMode.value)
  }

  return {
    themeMode,
    isDark,
    toggleThemeMode,
    loadSettingFromStore,
    saveSettingToStore,
    init
  }
})

export default useSettingStore

6. 应用启动时初始化

在应用启动时，我们需要初始化 Pinia 并加载持久化的数据。

// src/renderer/src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import useUserStore from './store/modules/user.js'

async function bootstrap() {
  const app = createApp(App)
  const pinia = createPinia()
  app.use(pinia)

  // 初始化 user store（从 electron-store 加载用户数据）
  const userStore = useUserStore()
  await userStore.init()

  app.mount('#app')
}

bootstrap()

架构图

┌─────────────────────────────────────────────────────────────────┐
│                        渲染进程 (Renderer)                        │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    Pinia Store                           │   │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │   │
│  │  │  UserStore  │  │ SettingStore│  │ HistoryStore│     │   │
│  │  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘     │   │
│  │         │                │                │             │   │
│  │         └────────────────┼────────────────┘             │   │
│  │                          ▼                              │   │
│  │              ┌───────────────────────┐                  │   │
│  │              │   useElectronStore    │                  │   │
│  │              │     (Composable)      │                  │   │
│  │              └───────────┬───────────┘                  │   │
│  └──────────────────────────┼──────────────────────────────┘   │
│                             │                                   │
│                             ▼                                   │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │                    window.api.store                       │  │
│  │                  (Preload 暴露的 API)                      │  │
│  └──────────────────────────┬───────────────────────────────┘  │
└─────────────────────────────┼───────────────────────────────────┘
                              │
                              │ IPC 通信
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                        主进程 (Main)                             │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │                   IPC Handlers                            │  │
│  │              (storeHandlers.js)                           │  │
│  └──────────────────────────┬───────────────────────────────┘  │
│                             │                                   │
│                             ▼                                   │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │                   electron-store                          │  │
│  │                  (数据持久化存储)                           │  │
│  │                                                          │  │
│  │   {                                                      │  │
│  │     currentUserId: "user123",                            │  │
│  │     users: {                                             │  │
│  │       "user123": {                                       │  │
│  │         token: "...",                                    │  │
│  │         user: { ... },                                   │  │
│  │         setting: { ... },                                │  │
│  │         history: [ ... ]                                 │  │
│  │       }                                                  │  │
│  │     }                                                    │  │
│  │   }                                                      │  │
│  └──────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

方案优势

1. 数据安全性：使用 electron-store 的加密功能，敏感数据得到保护。

2. 多用户数据隔离：每个用户的数据存储在独立的命名空间中，切换用户时自动加载对应用户的数据。

3. 主进程可访问：数据存储在主进程中，主进程代码可以直接访问，方便实现自动登录等功能。

4. 存储位置可控：可以自定义数据存储路径，便于数据迁移和备份。

5. 响应式状态管理：Pinia 提供了完善的响应式状态管理，与 Vue 3 完美集成。

6. 类型安全：可以配合 TypeScript 使用，获得更好的类型提示。

总结

通过 Pinia + electron-store 的组合，可实现一个安全、可靠、支持多用户数据隔离的持久化方案。这个方案充分利用了 Electron 的多进程架构优势，同时保持了 Vue 3 响应式状态管理的便利性。

相比直接使用 pinia-plugin-persistedstate，这个方案更适合 Electron 应用的场景，提供了更好的数据安全性和灵活性。

Dijkstra 算法是解决单源最短路径问题的经典算法。

算法概念

Dijkstra 算法用于在一个加权有向图或无向图中，找到从一个特定源节点到图中所有其他节点的最短路径。

主要特点：

• 单源最短路径：计算从一个固定起点到其他所有点的距离。
• 贪心策略：每次选择当前距离起点最近且未访问过的节点进行扩展。
• 权重限制：不能处理带有负权边的图（如果存在负权边，请使用 Bellman-Ford 或 SPFA 算法）。
• 时间复杂度：
  • 基础版： $O(V^2)$ ，适合稠密图。
  • 堆优化版： $O(E \log V)$ ，适合稀疏图（ $E$ 是边数， $V$ 是顶点数）。

核心思路

Dijkstra 算法的核心在于不断“松弛”（Relaxation）边。

• 初始化：
  • 起点到自身的距离为 0，到其他所有点的距离设为 $\infty$。
  • 使用一个集合 visited 记录已确定最短路径的节点。
• 贪心选择：
  • 从未访问的节点中，选出当前距离起点最近的一个节点 $u$。
• 松弛操作：
  • 遍历节点 $u$ 的所有邻居 $v$。
  • 如果 起点 -> u -> v 的路径长度比当前记录的 起点 -> v 更短，则更新 dist[v]。
• 重复：
  • 重复步骤 2 和 3，直到所有节点都被访问或不再有可优化的路径。

代码实现

• 基础版（适合小规模图）

  /**
   * Dijkstra 基础实现 (邻接矩阵)
   * @param {number[][]} graph - 邻接矩阵
   * @param {number} start - 起点编号
   * @returns {number[]} - 起点到各点的最短距离数组
   */
  function dijkstra(graph, start) {
      const n = graph.length
      const dist = Array(n).fill(Infinity)
      const visited = Array(n).fill(false)
  
      dist[start] = 0
  
      for (let i = 0; i < n; i++) {
          // 1. 找到未访问节点中距离最小的
          let u = -1
          for (let j = 0; j < n; j++) {
              if (!visited[j] && (u === -1 || dist[j] < dist[u])) {
                  u = j
              }
          }
  
          if (dist[u] === Infinity) break
          visited[u] = true
  
          // 2. 松弛邻居节点
          for (let v = 0; j < n; v++) {
              if (!visited[v] && graph[u][v] !== Infinity) {
                  if (dist[u] + graph[u][v] < dist[v]) {
                      dist[v] = dist[u] + graph[u][v]
                  }
              }
          }
      }
      return dist
  }
  

• 堆优化版（适合稀疏图）

  class MinHeap {
      constructor() {
          this.heap = []
      }
      push(val) {
          this.heap.push(val)
          this.bubbleUp()
      }
      pop() {
          if (this.size() === 0) return null
          if (this.size() === 1) return this.heap.pop()
          const top = this.heap[0]
          this.heap[0] = this.heap.pop()
          this.bubbleDown()
          return top
      }
      size() {
          return this.heap.length
      }
      bubbleUp() {
          let index = this.heap.length - 1
          while (index > 0) {
              let pIdx = Math.floor((index - 1) / 2)
              if (this.heap[index][0] >= this.heap[pIdx][0]) break
              ;[this.heap[index], this.heap[pIdx]] = [this.heap[pIdx], this.heap[index]]
              index = pIdx
          }
      }
      bubbleDown() {
          let index = 0
          while (true) {
              let L = 2 * index + 1,
                  R = 2 * index + 2,
                  swap = null
              if (L < this.heap.length && this.heap[L][0] < this.heap[index][0]) swap = L
              if (
                  R < this.heap.length &&
                  (swap === null ? this.heap[R][0] < this.heap[index][0] : this.heap[R][0] < this.heap[L][0])
              )
                  swap = R
              if (swap === null) break
              ;[this.heap[index], this.heap[swap]] = [this.heap[swap], this.heap[index]]
              index = swap
          }
      }
  }
  
  /**
   * 堆优化的 Dijkstra 算法
   * @param {number} n - 节点数量
   * @param {Map} adj - 邻接表
   * @param {number} start - 起点
   * @returns {number[]} - 距离数组
   */
  function dijkstraOptimized(n, adj, start) {
      const dist = new Array(n).fill(Infinity)
      dist[start] = 0
      const pq = new MinHeap()
      pq.push([0, start]) // [距离, 节点]
  
      while (pq.size() > 0) {
          const [d, u] = pq.pop()
          if (d > dist[u]) continue // 关键优化：跳过过时路径
  
          const neighbors = adj.get(u) || []
          for (const [v, weight] of neighbors) {
              if (dist[u] + weight < dist[v]) {
                  dist[v] = dist[u] + weight
                  pq.push([dist[v], v])
              }
          }
      }
      return dist
  }
  

LeetCode 题目案例

• 743. 网络延迟时间

题目描述： 有 $n$ 个网络节点，标记为 $1$ 到 $n$。给你一个列表 times，表示信号经过有向边的传递时间。现在，我们从某个节点 $k$ 发出一个信号。需要多久才能使所有节点都收到信号？如果不能使所有节点收到信号，返回 $-1$。

解析： 这道题要求计算从起点 $k$ 到达所有节点的最长“最短路径”。

JS 实现（堆优化版）： 在 JavaScript 中，由于没有原生的优先队列，通常需要手动实现一个简易的最小堆来达到 $O(E \log V)$ 的复杂度。

var networkDelayTime = function (times, n, k) {
    // 1. 构建邻接表
    const adj = Array.from({ length: n + 1 }, () => [])
    for (const [u, v, w] of times) {
        adj[u].push([v, w])
    }

    const dist = Array(n + 1).fill(Infinity)
    dist[k] = 0

    // 2. 优先队列 (最小堆存储: [distance, node])
    const pq = new MinPriorityQueue({ priority: x => x[0] })
    pq.enqueue([0, k])

    while (!pq.isEmpty()) {
        const [d, u] = pq.dequeue().element

        if (d > dist[u]) continue // 过时路径，跳过

        for (const [v, w] of adj[u]) {
            if (dist[u] + w < dist[v]) {
                dist[v] = dist[u] + w
                pq.enqueue([dist[v], v])
            }
        }
    }

    // 3. 寻找结果
    let maxDist = 0
    for (let i = 1; i <= n; i++) {
        if (dist[i] === Infinity) return -1
        maxDist = Math.max(maxDist, dist[i])
    }
    return maxDist
}

(注：MinPriorityQueue 是 LeetCode 环境内置的库)

应用场景

• 地图导航与 GPS：计算两个地理坐标点之间的最短行驶路线。
• 网络路由协议：OSPF（开放式最短路径优先）协议使用 Dijkstra 算法来更新路由表。
• 任务调度：在有向无环图中寻找关键路径或最小化任务总时长。
• 游戏 AI：非网格类地图中，NPC 寻找通往目标点的最短路径。

Dijkstra vs Floyd

• Dijkstra：单源最短路径。速度快（优化后 $O(E \log V)$），但不能处理负权。
• Floyd：全源最短路径。代码极简，支持负权边，但速度慢（ $O(V^3)$ ），仅适用于小规模数据。

在实际开发中，如果只需要从一个点出发，优先选择 Dijkstra。

Floyd-Warshall 算法是一种解决任意两点间最短路径问题的经典动态规划算法。

算法概念

Floyd-Warshall 算法（简称 Floyd 算法）用于寻找给定的加权图中多源点之间最短路径。

主要特点：

• 全源最短路径：一次运行即可求出图中任意两个节点之间的最短距离。
• 支持负权边：能够处理边权为负的情况。
• 不支持负权回路：如果图中存在总权重为负的环路，最短路径可能不存在。
• 时间复杂度： $O(V^3)$ ，适合顶点数 $V$ 在 500 以内的图。

核心思路：动态规划

Floyd 算法的核心在于通过引入中间节点来逐步优化路径。

假设 $dist(i, j)$ 是从顶点 $i$ 到顶点 $j$ 的当前已知最短距离。我们依次考虑每一个顶点 $k$ 作为中间跳板： 对于每一对顶点 $(i, j)$ ，检查：“如果先从 $i$ 走到 $k$，再从 $k$ 走到 $j$，是否比当前的直接路径 $i \to j$ 更短？”

状态转移方程为：

$$ dist(i, j) = \min(dist(i, j), dist(i, k) + dist(k, j)) $$

代码实现

/**
 * Floyd-Warshall 算法实现
 * @param {number[][]} graph - 邻接矩阵 (INF 表示无边)
 * @returns {number[][]} - 包含所有点对最短路径的矩阵
 */
function floydWarshall(graph) {
    const n = graph.length
    // 拷贝一份矩阵，避免修改原数据
    const dist = Array.from({ length: n }, (_, i) => [...graph[i]])

    // 核心：依次尝试每一个点作为中间点 k
    for (let k = 0; k < n; k++) {
        for (let i = 0; i < n; i++) {
            for (let j = 0; j < n; j++) {
                // 如果路径 i -> k 和 k -> j 都存在
                if (dist[i][k] !== Infinity && dist[k][j] !== Infinity) {
                    // 更新 i -> j 的最短路径
                    if (dist[i][k] + dist[k][j] < dist[i][j]) {
                        dist[i][j] = dist[i][k] + dist[k][j]
                    }
                }
            }
        }
    }

    return dist
}

// --- 测试示例 ---
const INF = Infinity
const graph = [
    [0, 3, INF, 7],
    [8, 0, 2, INF],
    [5, INF, 0, 1],
    [2, INF, INF, 0],
]

const shortestPaths = floydWarshall(graph)

console.log('所有点对之间的最短路径矩阵：')
console.table(shortestPaths)

// 验证结果示例：
// 从 0 到 2 的路径：0 -> 1 -> 2 (权重 3 + 2 = 5)
// 从 0 到 3 的路径：0 -> 1 -> 2 -> 3 (权重 3 + 2 + 1 = 6)

LeetCode 题目案例

1. 案例一：最短路径的应用 题目：1334. 阈值距离内邻居最少的城市

   题目描述：有 $n$ 个城市，按从 $0$ 到 $n-1$ 编号。给你一个数组 edges，其中 edges[i] = [from_i, to_i, weight_i] 表示城市之间的双向加权边。最后给定一个 distanceThreshold。请你找到一个城市，其在阈值距离内的邻居数量最少。如果有多个这样的城市，则返回编号最大的那个。

   解析：我们需要知道任意两点之间的最短距离，然后统计每个城市在阈值范围内的城市数量。

   JS 实现：

   var findTheCity = function(n, edges, distanceThreshold) {
     // 1. 初始化距离矩阵
     const dist = Array.from({ length: n }, () => Array(n).fill(Infinity));
     for (let i = 0; i < n; i++) dist[i][i] = 0;
     for (const [u, v, w] of edges) {
         dist[u][v] = dist[v][u] = w;
     }
   
     // 2. Floyd 核心三层循环
     for (let k = 0; k < n; k++) {
         for (let i = 0; i < n; i++) {
             for (let j = 0; j < n; j++) {
                 if (dist[i][k] + dist[k][j] < dist[i][j]) {
                     dist[i][j] = dist[i][k] + dist[k][j];
                 }
             }
         }
     }
   
     // 3. 统计并寻找结果
     let minCount = Infinity;
     let res = -1;
     for (let i = 0; i < n; i++) {
         let count = 0;
         for (let j = 0; j < n; j++) {
             if (i !== j && dist[i][j] <= distanceThreshold) {
                 count++;
             }
         }
         if (count <= minCount) {
             minCount = count;
             res = i; // 因为 i 是递增的，这里自动满足“编号最大”的要求
         }
     }
     return res;
   };
   

2. 案例二：传递闭包（连通性）的应用 题目：1462. 课程表 IV

   题目描述：你总共需要上 $numCourses$ 门课。给你一个数组 prerequisites，其中 prerequisites[i] = [a, b] 表示在修课 b 之前必须先修课 a（直接先修）。再给定 queries，判断 queries[j] = [u, v] 中 $u$ 是否是 $v$ 的先修课（包括间接先修）。

   解析： 这道题不涉及具体的“权重”，而是考察连通性。如果 $a \to k$ 连通且 $k \to b$ 连通，那么 $a \to b$ 就连通。这就是 Floyd 算法在处理“传递闭包”时的变体。

   JS 实现：

   var checkIfPrerequisite = function(numCourses, prerequisites, queries) {
     // 1. 初始化布尔矩阵，表示是否连通
     const isPre = Array.from({ length: numCourses }, () => Array(numCourses).fill(false));
     for (const [a, b] of prerequisites) {
         isPre[a][b] = true;
     }
   
     // 2. Floyd 变体：逻辑判断
     for (let k = 0; k < numCourses; k++) {
         for (let i = 0; i < numCourses; i++) {
             for (let j = 0; j < numCourses; j++) {
                 // 如果 i 是 k 的先修课，且 k 是 j 的先修课，则 i 也是 j 的先修课
                 if (isPre[i][k] && isPre[k][j]) {
                     isPre[i][j] = true;
                 }
             }
         }
     }
   
     // 3. 直接查表返回结果
     return queries.map(([u, v]) => isPre[u][v]);
   };
   

应用场景

• 中小规模图的全源最短路径：当 $V \le 500$ 时，Floyd 的代码极其简洁。
• 传递闭包问题：如社交网络中的好友关系推导、课程依赖关系判定（如案例二）。
• 图中是否存在负环：运行完 Floyd 后，检查是否存在 dist[i][i] < 0。
• 城市规划与网络路由：预计算任意两点间的通信延迟或运输成本。

总结

Floyd 算法虽然时间复杂度高达 $O(n^3)$，但其三层循环的结构异常优雅且易于实现。在 LeetCode 中，只要看到 $n$ 的范围在 100~400 之间，且需要判断多点之间的关系时，Floyd 往往是最优选择。

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://www.superlucifer.cn/posts/algorithm/difference

  // 生成随机矩阵
  function generateRandomMatrix(size, maxValue) {
    const matrix = [];
    for (let i = 0; i < size; i++) {
      const row = [];
      for (let j = 0; j < size; j++) {
          row.push(Math.floor(Math.random() * maxValue) + 1);
      }
      matrix.push(row);
    }
    return matrix;
  }

  // 构建二维差分矩阵
  function buildDiffMatrix(matrix) {
    const n = matrix.length;
    const m = matrix[0].length;
    const diff = Array(n).fill().map(() => Array(m).fill(0));
    
    // 根据原始矩阵计算差分矩阵
    for (let i = 0; i < n; i++) {
      for (let j = 0; j < m; j++) {
        diff[i][j] = matrix[i][j];
        if (i > 0) diff[i][j] -= matrix[i-1][j];
        if (j > 0) diff[i][j] -= matrix[i][j-1];
        if (i > 0 && j > 0) diff[i][j] += matrix[i-1][j-1];
      }
    }
    
    return diff;
  }

  // 从差分矩阵还原原始矩阵
  function restoreMatrixFromDiff(diff) {
    const n = diff.length;
    const m = diff[0].length;
    const matrix = Array(n).fill().map(() => Array(m).fill(0));
    
    for (let i = 0; i < n; i++) {
      for (let j = 0; j < m; j++) {
        matrix[i][j] = diff[i][j];
        if (i > 0) matrix[i][j] += matrix[i-1][j];
        if (j > 0) matrix[i][j] += matrix[i][j-1];
        if (i > 0 && j > 0) matrix[i][j] -= matrix[i-1][j-1];
      }
    }
    
    return matrix;
  }

  const matrixSize = 5;
  const matrix = generateRandomMatrix(matrixSize, 10);
  console.log("原始矩阵:", matrix);

  const diffMatrix = buildDiffMatrix(matrix);
  console.log("差分矩阵:", diffMatrix);

  const r1 = 1, c1 = 1, r2 = 3, c2 = 3;
  const value = 5
  console.log(`对区域 (${r1},${c1}) 到 (${r2},${c2}) 增加: ${value}`);

  // 应用差分修改
  diffMatrix[r1][c1] += value;
  if (c2 + 1 < matrixSize) {
      diffMatrix[r1][c2 + 1] -= value;
  }
  if (r2 + 1 < matrixSize) {
      diffMatrix[r2 + 1][c1] -= value;
  }
  if (r2 + 1 < matrixSize && c2 + 1 < matrixSize) {
      diffMatrix[r2 + 1][c2 + 1] += value;
  }

  const modifiedMatrix = restoreMatrixFromDiff(diffMatrix);
  console.log("修改后的矩阵:", modifiedMatrix);

看完了？说点什么呢

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://www.superlucifer.cn/posts/algorithm/prefix-sum

  // 生成随机矩阵
  function generateRandomMatrix(size, maxValue) {
    const matrix = [];
    for (let i = 0; i < size; i++) {
      const row = [];
      for (let j = 0; j < size; j++) {
          row.push(Math.floor(Math.random() * maxValue) + 1);
      }
      matrix.push(row);
    }
    return matrix;
  }

  // 构建二维前缀和矩阵
  function buildPrefixMatrix(matrix) {
    const n = matrix.length;
    const m = matrix[0].length;
    const prefix = Array(n + 1).fill().map(() => Array(m + 1).fill(0));
    
    for (let i = 1; i <= n; i++) {
        for (let j = 1; j <= m; j++) {
            prefix[i][j] = matrix[i-1][j-1] + prefix[i-1][j] + prefix[i][j-1] - prefix[i-1][j-1];
        }
    }
    
    return prefix;
  }

  const matrix = generateRandomMatrix(5, 10);
  console.log("原始矩阵：", matrix);

  const prefixMatrix = buildPrefixMatrix(matrix);
  console.log("前缀和矩阵：", prefixMatrix);

  const r1 = 1, c1 = 1, r2 = 3, c2 = 3;
  const sum = prefixMatrix[r2+1][c2+1] - prefixMatrix[r1][c2+1] - prefixMatrix[r2+1][c1] + prefixMatrix[r1][c1];
  console.log(`区域 (${r1},${c1}) 到 (${r2},${c2}) 的和为：${sum}`);

看完了？说点什么呢

通常有两种部署方式，根目录部署和二级目录部署。下面以若依管理系统为例，分别介绍这两种部署方式。

🍎根目录部署

这是比较常用的一种方式，部署后一般通过ip+端口访问，例如http://localhost:8080。 这种方式通常不需要额外的配置，只需要打包项目后放到服务器上，并参照如下nginx配置即可。

server {
  listen 8080;
  server_name localhost;

  location / {
    # 将path/web/替换为实际路径
    root path/web/;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  # 后端服务
  location /prod-api/ {
    proxy_pass http://localhost:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

🍍二级目录部署

这种部署方式相较于根目录部署，访问时多了一层目录，例如http://localhost:8080/admin。主要适用于多项目部署到同一端口下的场景。

• 代码配置

  • vue2版本

    • 在.env.development中添加VUE_APP_PUBLIC_PATH = /
    • 在.env.production中添加VUE_APP_PUBLIC_PATH = /admin/，注意前后都要有/

    • 修改vue.config.js

      module.exports = {
        publicPath: process.env.VUE_APP_PUBLIC_PATH,
      }
      

    • 修改router/index.js

      export default new Router({
        base: process.env.VUE_APP_PUBLIC_PATH,
        mode: 'history', 
        scrollBehavior: () => ({ y: 0 }),
        routes: constantRoutes
      })
      

  • vue3版本

    • 在.env.development中添加VITE_APP_PUBLIC_PATH = /
    • 在.env.production中添加VITE_APP_PUBLIC_PATH = /admin/，注意前后都要有/

    • 修改vite.config.js

      ...
      export default defineConfig(({ mode, command }) => {
        const env = loadEnv(mode, process.cwd())
        const { VITE_APP_ENV, VITE_APP_PUBLIC_PATH } = env
        return {
          base: VITE_APP_PUBLIC_PATH,
          ...
        }
      })
      

    • 修改router/index.js

      const router = createRouter({
        history: createWebHistory(import.meta.env.VITE_APP_PUBLIC_PATH),
        ...
      })
      

• nginx配置

  server {
    listen 8080;
    server_name localhost;
  
    # '/admin/'也可以换成其他，如'/app/'等，只要与代码中的配置保持一致即可
    location /admin/ {
      # 将path/web/替换为实际路径（注意这里使用的是alias，而不是root）
      alias path/web/;
      index index.html;
      # index.html前添加的前缀，与location的'/admin/'保持一致
      try_files $uri $uri/ /admin/index.html;
    }
  
    # 重定向/admin到/admin/
    location = /admin {
      return 302 /admin/;
    }
  
    # 后端服务
    location /prod-api/ {
      proxy_pass http://localhost:3000/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
    }
  }
  

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://www.superlucifer.cn/posts/other/domain

# 将www.example.com解析到服务器IP：8.137.xx.xx
记录类型：A
主机记录：www
解析请求来源：默认
记录值：8.137.xx.xx
TTL：10分钟

# example.com解析到服务器IP：8.137.xx.xx
记录类型：A
主机记录：@
解析请求来源：默认
记录值：8.137.xx.xx
TTL：10分钟

# 将example.com解析到另一个域名：example.github.io
记录类型：CNAME
主机记录：@
解析请求来源：默认
记录值：example.github.io
TTL：10分钟

看完了？说点什么呢

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://www.superlucifer.cn/posts/other/cloud-server

看完了？说点什么呢

📌提交代码

在Github上新建一个仓库，得到仓库地址，在需要上传的代码目录里打开Git Bash

• 初始化仓库

    # 初始化仓库
    git init -b main
    git remote add origin <仓库地址>
  

• 添加文件到暂存区

    # 添加所有变更到暂存区
    git add .
    # 添加特定文件
    git add <文件名>
    # 交互式添加   
    git add -p
  

• 提交变更

    git commit -m "类型(范围): 描述信息"
  

• 推送代码

    # 推送
    git push origin main
    # 首次推送设置上游
    git push -u origin main
  

🔄更新代码

  git pull origin main

  git status

  git add .

  git commit -m "备注信息"
  
  git push -u origin main
  

🌱添加分支

  # 以添加dev分支为例

  # 查看当前分支，分支前有*表示当前分支
  git branch -a

  # 创建新分支dev
  git branch dev

  # 推送dev分支
  git push origin dev:dev

  # 切换到dev分支
  git checkout dev
  

🧩合并分支

  # 以合并dev分支到main为例

  # 切换到main分支
  git checkout main

  # 拉取main分支最新代码
  git pull origin main

  # 合并dev分支
  git merge dev

  # 推送main分支
  git push origin main 

  # 切换回dev分支
  git checkout dev
  

❌删除分支

  # 以删除dev分支为例

  # 删除远程dev分支
  git push origin :dev

  # 切换到main分支
  git checkout main

  # 删除本地dev分支
  git branch -d dev

  

✏️重命名分支

  # 以dev改为dev-new为例

  # 切换到其他分支
  git checkout main

  # 重命名本地分支
  git branch -m dev dev-new

  # 删除远程的dev分支
  git push origin :dev

  # 推送新分支dev-new到远程
  git push origin dev-new

  # 设置上游关联
  git push --set-upstream origin dev-new
  

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://www.superlucifer.cn/posts/other/shiroi-deploy

看完了？说点什么呢