Vite笔记之20-vite常用插件 vite-plugin-mock

1. vite常用插件之vite-plugin-mock

mock数据: 模拟数据

前后端一般是并行开发 用户列表 ( 接口文档 )

mock数据 去做你前端的工作

1. 简单方式: 直接去写死一两个数据 方便调试

• 缺陷：

  • 没法做海量数据测试
  • 没法获得一些标准数据
  • 没法去感知http的异常

  axios: http请求库

2. mockjs: 模拟海量数据的， vite-plugin-mock的依赖项就是mockjs

github.com/vbenjs/vite…

2.使用mock

安装yarn add vite-plugin-mock mockjs
会默认找mock 

main.js

fetch('/api/users', {
	method: 'post'
})
	.then(data => {
		console.log('data', data)
	})
	.catch(error => {
		console.log('error', error)
	})

mock/index.js

const mockJS = require('mockjs')

const userList = mockJS.mock({
	'data|100': [
		//代表生成100
		{
			name: '@cname', // 表示生成不同的中文名
			ename: mockJS.Random.name(), // 生成不同的英文名
			'id|+1': 1, //
			time: '@time',
			date: '@date'
		}
	]
})

module.exports = [
	{
		method: 'post',
		url: '/api/users',
		response: ({ body }) => {
			// body -> 请求体
			// page pageSize body
			return {
				code: 200,
				msg: 'success',
				data: userList
			}
		}
	}
]

vite.config.js

import { viteMockServe } from "vite-plugin-mock";
// serve === 开启开发服务器
  // viteMockServe()
  VitePluginMock()

3. 手写vite-plugin-mock

核心是拦截请求 使用configureServer 是用于配置开发服务器的钩子。最常见的用例是在内部 connect 应用程序中添加自定义中间件:

VitePluginMock.js

const fs = require("fs");
const path = require("path");

export default (options) => {
  // 做的最主要的事情就是拦截http请求
  // D当我们使用fetch或者axios去请求的
  // axios baseUrl // 请求地址 
  // 当打给本地的开发服务器的时候 viteserver服务器接管

  return {
    configureServer(server) {
      // 服务器的相关配置
      // req, 请求对象 --> 用户发过来的请求, 请求头请求体 url cookie 
      // res: 响应对象, - res.header
      // next: 是否交给下一个中间件, 调用next方法会将处理结果交给下一个中间件
      const mockStat = fs.statSync("mock");
      const isDirectory = mockStat.isDirectory();
      let mockResult = [];
      if (isDirectory) {
        // process.cwd() ---> 获取你当前的执行根目录
        mockResult = require(path.resolve(process.cwd(), "mock/index.js"));
        console.log("result", mockResult);
        
      }

      server.middlewares.use((req, res, next) => {
        console.log("req", req.url);
        // 看我们请求的地址在mockResult里有没有
        const matchItem = mockResult.find(mockDescriptor => mockDescriptor.url === req.url);
        console.log("matchItem", matchItem);

        if (matchItem) {
          console.log("进来了", );
          const responseData = matchItem.response(req);
          console.log("responseData", responseData);
          // 强制设置一下他的请求头的格式为json
          res.setHeader("Content-Type", "application/json");
          res.end(JSON.stringify(responseData)); // 设置请求头 异步的
          

        } else {
          next(); // 你不调用next 你又不响应 也会响应东西
        }
        
      })  // 插件 === middlewares 
    }
  }
}