Mock数据

在前后端分离的时候，有时候接口还没有开发好，或者想快速测试一下，那么Mock就是一个十分有用的功能。

Mock配置

启用Mock功能

在vite.config.js中，框架已有如下默认配置，一般无需更改。

import mockServer from 'vite-plugin-mock-server'
 ...
 mockServer({
      urlPrefixes: ['/mock/'],  // mock请求的url前缀
      mockRootDir: './mock',    //mock文件夹
      mockJsSuffix: '.mock.js', //mock文件的后缀
      middlewares: []
    })
 ...

配置Mock返回值

具体的mock请求文件都放在 /mock/ 下。这里以/mock/test.mock.js为例:

export default [
  {
    pattern: '/mock/base', // url
    method: 'GET',  // 请求方式
    handle: (req, res) => {
      const data = {data:'这是Mock的数据'}
      res.setHeader('Content-Type', 'application/json')  //返回值格式
      res.end(JSON.stringify(data))  //返回值
    }
  },
  ...其他的mock
]

Mock使用

mock 的使用和一般的 http 请求无异。

URL必须要以mock开头

import useRequest from '@/hooks/use-request';

const { run,loading } = useRequest({
  method: 'GET',
  path: '/mock/base', 
  params: {  }
},{manual:true})