当前位置： 首页 > article >正文

【Mock】前端er 如何优雅快速搭建Mock服务

article 2025/2/27 22:59:10

搭建mock服务

    搭建 Mock 服务可以通过使用在线平台（如 Apifox、EasyMock）、本地工具（如 JSON Server、Mock.js）、集成到开发框架中（如 Vite、Webpack 插件）或自建 Mock 服务器（如用 Node.js 和 Express）来实现。选择哪种方式取决于项目需求和技术栈。下面我就来分别讲一讲这三种方式吧😈😈😈

mock.js

mock工作流程：

  1. 前端引入mock.js
  2. 定义要模拟的路由、返回结果
  3. mock.js劫持ajax请求，得到模拟的结果

创建服务

安装mock.js

npm i mockjs --save

在src下新建一个目录_mock，里面新建一个index.ts，并且引入mockjs。

import Mock from 'mockjs'

引入完之后我们会发现有红线，这是因为我们这个是ts文件，需要一个再安装一个类型检查才行。

image-20250114232808155

安装类型检查：

npm i --save-dev @types/mockjs

然后写一个简单的mock请求：

import Mock from 'mockjs'

Mock.mock('/api/text', 'get',() =>{
  return  'Hello MockJS'
})

前端联调

⚠️mock.js只能劫持XMLRequest，不能劫持fetch，所以我们需要安装axios。

安装axios：

npm i axios --save

随便新建一个页面来发起请求，部分代码如下：

import React, { FC } from "react";
// 引入axios 和 mock文件
import axios from "axios";
import "../../_mock";

const text: FC = () => {
    const handleClick = () => {
        axios.get("/api/text").then((res) => {
            console.log(res.data);
        });
    };
    return (
        <button onClick={handleClick}>
        发起请求
</button>
)
}
export default Login;

然后发起在前端发起请求，mock就会拦截下来，并且返回mock文件编写的返回值🥳。

Node.js

通过node服务+mock.js

  • mock.js量大服务：劫持AJax+全面的Random能力
  • 把mock.js用于nodeJS服务端，使用Random能力

创建服务

新建一个文件夹用来存放node服务，然后使用npm init -y初始化node项目。初始化完成之后会出现一个package.json。

然后我们要继续安装mockJS，这一次使用mock不是为了发起服务的，而是使用mock的Random能力，方便自动生成一些数据。

npm i mockjs --save

在根目录下新建一个test目录，这个目录用来编写node服务：

const Mock = require('mockjs')  // 引入 Mock.js 模块
const Random = Mock.Random  // 使用 Mock.Random 实例

// 导出一个包含模拟API接口配置的对象数组
module.exports = [
  {
    // 定义一个模拟的 API 接口，其访问路径为 '/test'。
    url: '/test',
    
    // 定义该接口接受的HTTP请求方法，此处为 'get' 请求。
    method: 'get',
    
    // 定义当接收到符合上述URL和方法的请求时返回的响应内容。
    response: () => {
      // 返回一个 JSON 对象作为模拟接口的响应。
      return {
        // 响应状态码，200 表示成功。
        code: 200,
        
        // 响应的数据部分，使用 Mock.Random.cname() 方法生成一个随机的中文名字。
        data: Random.cname()
      }
    }
  }
]

如果需要编写多个服务的话，需要分成多个文件，一个目录代表一个模块服务：

// 在mock目录下新建了一个 testTwo.js 文件
const Mock = require('mockjs')
const Random = Mock.Random

module.exports = [
  {
    url: '/test/two:id',
    method: 'get',
    response: () => {
      return {
        code: 200,
        data: {
          name: Random.cname(),
          age: Random.natural(0, 100),
          id: Random.id(10000, 99999)
        }
      }
    }
  }
]

启动服务

依旧是在mock目录下新建一个index.js文件用来汇总所有服务：

const test = require('./test') // 引入本地的 'test' 模块
const testTwo = require('./testTwo') // 引入本地的 'testTwo' 模块

// 使用扩展运算符（...）将两个模块导出的数组合并到一个新的数组中。
// 这样可以将来自 'test' 和 'testTwo' 的所有模拟API接口配置组合在一起。
const mockList = [...test, ...testTwo]

// 导出合并后的模拟API接口配置列表，以便可以在其他地方使用这些模拟接口。
module.exports = mockList

为了让这些模拟接口真正地工作起来，我们需要将以上编写的文件放在一个运行中的服务器来监听HTTP请求，并根据请求的URL和方法来匹配相应的模拟接口配置，然后返回预定义的响应。

所以还需要安装koa框架来搭建服务器环境。

安装koa：

npm i koa koa-router --save

在根目录新建一个index.js用来配置koa

// 引入 Koa 框架和 Koa-Router 路由中间件
const koa = require('koa')
const Router = require('koa-router')
// 引入模拟数据列表
const mockList = require('./mock/index')

const app = new koa()	// 创建 Koa 应用实例
const router = new Router()	// 创建路由器实例

// 遍历 mockList 并为每个模拟接口注册路由
mockList.forEach(item => {
  // 解构赋值获取 url, method 和 response 函数
  const { url, method, response } = item
  // 根据 method 和 url 注册路由处理函数
  router[method](url, async ctx => {
    // 执行 response 函数生成响应数据，并赋值给 ctx.body
    ctx.body = response()
  })
})

// 使用路由器中间件，并将路由绑定到应用中
app.use(router.routes())

app.listen(3001)	// 确保此端口不与前端服务冲突

还需要再安装一个热启动模块，保证修改文件之后会自动更新服务：

npm i nodemon --save-dev

安装完成后再package.json配置一下启动命令，修改代码如下：

"dev": "nodemon index.js"

image-20250115110930284

最后，使用npm run dev启动服务。

在浏览器中输入访问localhost:3001/test，就可以看到返回回来的内容啦🥳！

image-20250115111530028

访问另一个接口试一试localhost:3001/test/two:10，同样也是有返回数据的，说明我们的代码没有问题😆。

image-20250115111730657

搞一个异步函数让加载有延迟：

image-20250115112137650

const koa = require('koa')
const Router = require('koa-router')
const mockList = require('./mock/index')

const app = new koa()
const router = new Router()

// 延迟一秒钟
async function getRes (fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      const res = fn()
      resolve(res)
    }, 1000)
  })
}

mockList.forEach(item => {
  const { url, method, response } = item
  router[method](url, async ctx => {
    // 模拟网络请求的加载状态，1s
    const res = await getRes(response)
    ctx.body = res
  })
})

app.use(router.routes())
app.listen(3001)

模拟post请求

新增了一个post请求，使用了 Mock.Random.datetime() 方法生成一个随机的日期时间字符串：

const Mock = require('mockjs')
const Random = Mock.Random

module.exports = [
  {
    url: '/test/two:id',
    method: 'get',
    response: () => {
      return {
        code: 200,
        data: {
          name: Random.cname(),
          age: Random.natural(0, 100),
          id: Random.id(10000, 99999)
        }
      }
    }
  },
    // 新增了一个post请求，使用了 Mock.Random.datetime() 方法生成一个随机的日期时间字符串。
  {
    url: '/test/two',
    method: 'post',
    response: () => {
      return {
        code: 200,
        data: Random.datetime('yyyy-MM-dd HH:mm:ss')
      }
    }
  }
]

使用接口测试工具发起post请求：

  • 请求路径：http://localhost:3001/test/two

然后就能看到随机生成的一个时间(*^▽^*)。

image-20250115113613155

前端联调

前端联调之前，我们还需要解决一个问题，那就是存在跨域的问题，前端服务启动的端口和我们服务端的端口不能冲突，那这样前端就无法拿到服务端的数据了（?_?）。强行请求就会发生跨域报错。

跨域问题

声明一下，在这里我们只提供React的解决方案❗️

webpack配置

首先在前端项目中安装craco

npm i -D @craco/craco

在根目录下创建文件：

image-20250115100834729

编写配置文件：

module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3001'
    }
  }
}

在package.json中替换启动命令：

"script":{
    "start":"craco start"
    "build":"craco build"
    "test":"craco test"
}

image-20250115100851241

然后就可以在前端发起请求：

import React, { FC } from "react";

const text: FC = () => {
    const handleClick = () => {
        //	在这里使用的是fetch请求，你也可以使用axios
        fetch('/api/test')
            .then(res => res.json())
            .then(data => console.log(data))
    };
    return (
        <button onClick={handleClick}>
            发起请求
        </button>
    )
}
export default Login;
vite配置

你需要在vite.config.ts中这样配置：

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
     // 本地开发环境通过代理实现跨域
    proxy: {
      '/api': {
        target: 'http://localhost:3001', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
      }
    }
  }
})

前端请求依旧是和上面一样的：

import React, { FC } from "react";

const text: FC = () => {
    const handleClick = () => {
        //	在这里使用的是fetch请求，你也可以使用axios
        fetch('/api/test')
            .then(res => res.json())
            .then(data => console.log(data))
    };
    return (
        <button onClick={handleClick}>
            发起请求
        </button>
    )
}
export default Login;

在线mock平台

在线 mock 平台简化了前后端分离开发流程中的数据模拟环节。这类平台允许开发者快速创建和共享 API 模拟，无需搭建真实的服务端环境。优点在于它们能加速开发过程，因为前端团队可以立即获得响应数据进行界面构建，而不必等待后端接口完成。同时，这些平台通常提供图形化界面，使得非技术人员也能轻松上手。

常见的mock平台有：

  • Apifox：集成了 API 文档、调试、Mock 和自动化测试功能的一体化协作平台。它支持强大的数据模拟功能，兼容 Mock.js 语法，并允许用户通过简单的配置生成复杂的 JSON 数据。
  • YApi：一个高效且易于使用的 API 管理工具，支持数据校验、自定义 URI 和团队协作。YApi 提供了丰富的特性来帮助开发者更好地管理和模拟 API。
  • useMock：这是一个在线 Mock 平台，强调团队协作、灵活解耦和接口访问统计等功能，适合希望提高开发效率的团队。

不过，使用在线 mock 平台也有一些局限性。首先，虽然方便快捷，但可能无法完全模拟复杂的业务逻辑或真实的网络条件，这可能导致一些问题在集成时才暴露出来。其次，依赖外部服务意味着可能会遇到稳定性或性能方面的问题，比如平台本身的故障或者响应速度较慢等。最后，对于敏感项目，将数据托管给第三方平台也可能引发安全性和隐私方面的担忧。

总的来说，在线 mock 平台是提高开发效率的好工具，但在选择使用时也需要考虑项目需求、团队协作模式以及安全性等因素。

总的来说就是不！推！荐！使用，所以直接放弃不学。


http://www.kler.cn/a/505502.html

相关文章：

  • 了解效率及其子特性：软件性能优化的关键
  • 索引的数据结构
  • 3、docker的数据卷和dockerfile
  • Gitlab搭建npm仓库
  • 字节序 大端和小端
  • 用Excel开发进销存软件,office Access开发ERP管理软件
  • 计算机视觉语义分割——FCN(Fully Convolutional Networks for Semantic Segmentation)
  • 计算机网络 （37）TCP的流量控制
  • # [Unity] 使用控制运动开发简单的小游戏
  • 【SpringSecurity】SpringSecurity安全框架授权
  • 【Apache Paimon】-- 源码解读之环境问题
  • MybatisPlus--Lombok的使用
  • Cyberchef开发operation操作之-node开发环境搭建
  • 【PCIe 总线及设备入门学习专栏 5.3.1 -- PCIe PHY firmware load | trainning | link up 区别与联系】
  • CES 2025：科技热点与趋势深度剖析
  • JMeter下载与使用，新手详细
  • 【Uniapp-Vue3】showLoading加载和showModal模态框示例
  • Git | git revert命令详解
  • ubuntu各分区的用途
  • 使用virsh-console连接虚拟机报连接到域一直卡着