前端数据源无缝切换实战

实现无缝切换的核心思路

通过设计统一的接口数据格式和封装请求层，使前端代码无需关心数据来源（模拟或真实接口）。关键在于模拟数据与真实接口返回的数据结构保持一致，并通过环境变量或配置开关控制数据源切换。

配置环境变量

在项目中创建.env.development和.env.production文件，分别设置不同环境下的变量：

# .env.development
VUE_APP_API_MOCK=true
VUE_APP_API_BASEURL=http://localhost:3000/api

# .env.production
VUE_APP_API_MOCK=false
VUE_APP_API_BASEURL=https://api.yourdomain.com

封装请求层

创建src/api/request.js统一处理请求：

import axios from 'axios'
import mockData from './mock'

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASEURL
})

// 请求拦截器
instance.interceptors.request.use(config => {
  if (process.env.VUE_APP_API_MOCK === 'true') {
    config.adapter = function() {
      return new Promise((resolve) => {
        const mockResponse = {
          data: mockData[config.url],
          status: 200,
          config
        }
        resolve(mockResponse)
      })
    }
  }
  return config
})

export default instance

设计统一数据结构

在src/api/mock.js中定义模拟数据，保持与真实接口相同的返回结构：

export default {
  '/user/list': {
    code: 200,
    data: {
      total: 100,
      list: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  }
}

Express接口实现

创建真实接口路由，确保返回结构与模拟数据一致：

// server/routes/user.js
const express = require('express')
const router = express.Router()

router.get('/list', (req, res) => {
  const { page = 1, pageSize = 10 } = req.query
  // 实际数据库查询逻辑
  res.json({
    code: 200,
    data: {
      total: 100,
      list: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  })
})

module.exports = router

Vue组件调用

表格组件中统一调用接口，无需区分数据源：

import request from '@/api/request'

export default {
  data() {
    return {
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    async fetchData() {
      const res = await request.get('/user/list', {
        params: {
          page: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      })
      this.tableData = res.data.data.list
      this.pagination.total = res.data.data.total
    }
  },
  created() {
    this.fetchData()
  }
}

分页组件实现

使用Element UI的分页组件，保持切换数据源时行为一致：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="pagination.current"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, prev, pager, next"
    />
  </div>
</template>

<script>
export default {
  methods: {
    handlePageChange(page) {
      this.pagination.current = page
      this.fetchData()
    }
  }
}
</script>