为什么我们要“装”后端？

说实话，前端开发经常被逼着跟后端掰腕子。

需求改，接口慢，文档空白——这时候，你只Neng自己动手，造点假数据。

别慌，模拟后端接口根本不难，甚至还Neng顺手把项目的 SEO 给提上去。

哈哈，我跟你讲，这玩意儿就像是给前端装了个“练习场”，随时随地douNeng跑通。

先说下市面上Zui火的两把刀。

Mock.js：老牌神器，语法糖一堆，用法灵活。

vite-plugin-mock：专为 Vite 打造，一键集成，无需额外配置。

咱就是说两者Ke以配合使用——Mock.js 负责生成假数据，vite-plugin-mock 把这些数据挂到本地服务器上。

npm i mockjs vite-plugin-mock -D

装好以后你会在项目根目录kan到 node_modules 多了两个胖子。

src
├─ mock               // ← 所有 mock 文件dou放这里
│  ├─ data
│  │   └─ goodsData.ts   // 假数据模块
│  ├─ account.ts         // 登录注册接口
│  ├─ goods.ts           // 商品列表接口
│  └─ index.ts           // 暴露所有 mock
└─ main.ts               // 项目入口

别忘了在 vite.config.ts 把插件打开：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
  plugins: ,
})

先在 /mock/data/goodsData.ts 撸一波商品数组。

export const goodsListData = ;
export const bannerListData = ;

注意，这里直接写死了图片地址和价格，真实项目里Ke以用 Mock.js 的占位符生成geng丰富的数据。

import { goodsListData } from './data/goodsData'
/** 商品列表 */
export const goodsList = {
  url: '/mock/goods/list',
  method: 'get',
  response:  => {
    // get 请求参数
    let { pageNo, pageSize } = config.query
    pageNo = Number || 1
    pageSize = Number || 10
    // 分页计算
    const startIndex =  * pageSize
    const endIndex = pageNo * pageSize
    const list = goodsListData.slice
    if  {
   return {
    resultCode  : 200,
    resultInfo  : { list },
   }
    } else {
     return {
       resultCode  : 404,
       resultInfo  : '没有数据'
    }
   }
},
}

不对不对，我刚才忘记把 pageNo - 那段删掉了。现在Yi经是标准写法啦。

import { bannerListData } from './data/goodsData'
/** banner轮播 */
export const bannerList = {
  url:'/mock/banner',
  method:'get',
  response:=>({
    resultCode :200,
    resultInfo :{ list:bannerListData }
   })
}

先创建一个账号数组保存临时用户：

const accountList:any = ;

/** 用户注册 */
export const mockRegister = {
  url:'/mock/account/register',
  method:'post',
  response:=> {
    const { username, password, headerimg } = config.body
    const user = { username, password, headerimg }
    accountList.push
    return {
      resultCode :200,
      resultInfo :'注册成功'
    }
   }
}
/** 用户登录 */
export const mockLogin = {
  url:'/mock/account/login',
  method:'post',
  response:=> {
    const { username, password } = config.body
    const user = accountList.find(
        item=> item.username===username && item.password===password)
    if  {
       return {
         resultCode :200,
         resultInfo :{ username,user.headerimg }
       }
    } else {
       return {
         resultCode :-1,
         resultInof :'账户出错'   // 小笔误，下面纠正一下……
       }
    }
   }
}

好了这两段代码搞定了Zui基础的登录注册流程。你Ke以在页面上直接调试，无需真后台。

- 使用语义化标签提升爬虫友好度。

- 在每个 API 文档页面加入 meta description，关键词自然出现：模拟后端接口、生成假数据、Mock.js 等。

- 把代码块放进

 中，让搜索引擎识别为技术内容，提高权重。

- 页面标题Zui好包含核心词组，比如 “前端必备：如何使用 Mock.js 模拟后端”。 
- 别忘了 alt 文本，即使是占位图，也要写点描述，否则失去一次加分机会。

"我真的需要这么多假数据吗？"
Certainly! 实际开发里你可Neng只需要几条就Neng跑通 UI，但是当业务扩大时：

- 大量分页请求会导致「空数据」报错； 
- 多种分类筛选需要不同字段； 
- 性Neng测试需要模拟高并发，这时你Ke以让 Mock.js 随机延迟几百毫秒。 


所以多准备点假数据其实是防止以后踩坑的保险杠。
害，我又跑题啦。
回到正题，其实只要把上述文件按结构摆好，你的前端项目立马拥有了一套完整的「虚拟后端」。
说实话，这种方式比等后端写完 API 快太多，而且还Neng自己控制返回值格式，让 UI 开发geng顺畅。
哈哈，你懂的，一边写代码一边喝咖啡，一边调试一边想象真实用户在刷页面那感觉真的hen爽。
不对不对，我应该说「非常爽」才对。
不过记得上线前一定要把这些 Mock 路由关掉，否则生产环境会泄露你的「内部玩具」。
小结：一步步把你的前端变成全栈玩具箱 🚀

- 安装 Mock.js + vite-plugin-mock
- 建立 /mock/data/xxx.ts, 用数组或对象存放假数据
- 在 /mock/*.ts 编写路由对象
- 用 vite.config.ts 把插件挂进去
- 开发阶段随意调用 /mock/xxx, 真正上线记得关闭

呵呵，这就是完整的「模拟后端接口」流程。你Ke以根据业务自行
，比如加入 token 校验、随机错误码等，让前端geng贴近真实环境。
咱就是说这篇文章Yi经帮你铺好了道路，你只需要动手敲几行代码，就Neng拥有自己的假服务器。
祝你编码愉快，别忘了给老友们分享这篇干货哦！