实现本地前端访问本地后端

学习非暴力沟通的程序员
15 阅读4分钟

Todo项目核心链路（前端→Node→Redis）文档

文档说明

本文档为Todo项目核心数据链路精简版，聚焦【前端请求-后端交互-Redis数据】全流程，剔除冗余逻辑，标注核心文件、代码及问题排查点，适配刚接手项目的开发人员快速定位核心关注点，高效上手业务。

一、核心数据流向图

以下为完整数据流转链路，是定位全流程问题的核心参考，各环节对应核心文件及作用标注清晰。

image.png

关键说明：整个链路中，仅初始化加载数据为前后端交互流程，新增、修改、删除待办等操作均为前端内存操作，不涉及后端及Redis交互。

二、核心文件清单及优先级

项目核心逻辑仅集中在以下5个文件中，按“必看优先级”排序，接手后优先定位这些文件即可。

优先级文件路径核心职责关键作用
★★★★★src/stores/todo.jsPinia状态仓库管理Todo数据状态，调用API加载后端数据，处理前端业务逻辑
★★★★★src/api/redisData.js前端请求封装层项目唯一向后端发起请求的出口，封装axios请求逻辑
★★★★☆vite.config.jsVite代理配置解决跨域问题，将前端请求转发至本地Node服务
★★★☆☆前端业务组件（如TodoList.vue）页面渲染与交互调用Pinia方法，无核心业务逻辑，仅负责视图展示
★★☆☆☆本地NodeJS服务后端中间层与Redis进行数据交互，前端无需修改，仅需确认地址正确

三、核心文件精简代码及说明

以下代码均剔除冗余注释、容错逻辑及非核心业务，仅保留链路通畅所需核心代码，便于快速定位关键逻辑。

3.1 src/stores/todo.js（Pinia仓库，核心中的核心）

核心关注点：initTodoList 方法为前端加载Redis数据的唯一入口，其余方法均为纯前端数据操作。

import { defineStore } from 'pinia'
import { fetchRedisData } from '../api/redisData'

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todoList: [], // 存储从Redis加载的待办数据，页面展示的核心数据源
    filterType: 'all' // 前端筛选状态，纯前端逻辑
  }),
  getters: {
    filterTodoList() { // 前端数据筛选，无后端交互
      switch (this.filterType) {
        case 'done': return this.todoList.filter(item => item.isDone)
        case 'undone': return this.todoList.filter(item => !item.isDone)
        default: return this.todoList
      }
    }
  },
  actions: {
    // 唯一对接后端的核心方法：从Redis加载初始化数据
    async initTodoList() {
      const data = await fetchRedisData()
      this.todoList = data.redis_get_result || data.data?.value || []
    },
    // 纯前端操作：新增待办
    addTodo(content) {
      this.todoList.unshift({ id: Date.now(), content: content.trim(), isDone: false })
    },
    // 纯前端操作：切换待办完成状态
    toggleTodoDone(id) {
      const todo = this.todoList.find(item => item.id === id)
      todo && (todo.isDone = !todo.isDone)
    },
    // 纯前端操作：删除单个待办
    deleteTodo(id) {
      this.todoList = this.todoList.filter(item => item.id !== id)
    },
    // 纯前端操作：切换筛选类型
    changeFilter(type) { this.filterType = type },
    // 纯前端操作：清空所有待办
    clearAllTodo() { this.todoList = [] }
  }
})

3.2 src/api/redisData.js（前端请求封装层）

核心关注点：项目唯一向后端发起请求的方法，请求地址为代理地址，异常抛出供Pinia捕获。

import axios from 'axios';

// 唯一获取Redis待办数据的请求方法
export const fetchRedisData = async () => {
  const response = await axios.get('/api/get-data');
  return response.data;
};

3.3 vite.config.js（代理转发配置）

核心关注点：代理配置是前端请求能成功到达Node服务的关键，仅需检查target、changeOrigin两个核心配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // 核心代理配置，其余为无关配置可忽略
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 本地Node服务地址+端口，必须与Node启动地址一致
        changeOrigin: true, // 开启跨域，必为true，否则请求失败
        // rewrite: (path) => path.replace(/^/api/, '') // 可选，根据Node服务接口规则配置
      }
    }
  }
})

四、核心问题排查指南

按“问题出现概率”排序，排查时优先检查以下场景，高效定位问题根源。

image.png

五、接手项目快速上手流程

  1. 第一步：理清数据流向：对照“核心数据流向图”，明确数据从Redis到前端组件的完整路径，知晓各文件在链路中的作用。

  2. 第二步：定位核心文件：找到上述3个核心文件（Pinia仓库、API封装、代理配置），其余文件暂时无需关注。

  3. 第三步：聚焦核心操作：

    1. 加载Redis数据：关注Pinia的initTodoList方法及API封装的fetchRedisData方法。
    2. 调整请求链路：修改API请求地址（redisData.js）及代理配置（vite.config.js）。
    3. 修改业务逻辑：仅需操作Pinia仓库的actions方法（前端业务），无需改动后端及Redis。

六、补充说明

  • 前端Todo数据唯一后端来源：Pinia仓库的initTodoList方法调用fetchRedisData加载Redis数据。
  • 前端操作特性：除初始化加载外，新增、修改、删除、筛选等操作均为前端内存操作，不同步至Redis。
  • Node服务定位：作为中间层负责与Redis交互，前端无需开发或修改，仅需确保其正常启动且地址与代理配置一致。
avatar
文章
阅读
粉丝