mock接收ajax、axios、vite请求get、post参数

在前端项目中，我们常常需要模拟数据以进行测试，这时候就需要用到mock.js来模拟http请求。

对于axios和vite的请求，我们可以使用两种方式来模拟get和post参数。

方法一：使用mock.js

1. 安装mock.js

npm install mockjs --save-dev

2. 在项目中创建一个mock.js文件，并写入以下代码

import Mock from 'mockjs'
 
// 模拟数据
Mock.mock('/api/get', 'get', {
  'data|1-10': [{
    'id|+1': 1
  }]
})
 
Mock.mock('/api/post', 'post', function(options) {
  let data = JSON.parse(options.body);
  return {
    code: 200,
    data: data
  }
})

3. 在vite.config.js中配置代理，将所有以/api/开头的请求转发到mock.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

4. 在你的组件中使用axios发送请求

import axios from 'axios'
 
axios.get('/api/get').then(res => {
  console.log(res)
})
 
axios.post('/api/post', {name: 'test'}).then(res => {
  console.log(res)
})

方法二：使用fake-server

1. 安装fake-server

npm install json-server --save-dev

2. 在项目中创建一个db.json文件，并写入以下代码

{
  "users": [
    { "id": 1, "name": "John", "email": "john@example.com" }
  ]
}

3. 在package.json中添加以下脚本

{
  "scripts": {
    "start": "json-server --watch db.json"
  }
}

4. 运行npm start启动服务器
5. 在你的组件中使用axios发送请求

import axios from 'axios'
 
axios.get('http://localhost:3000/users').then(res => {
  console.log(res)
})
 
axios.post('http://localhost:3000/users', {name: 'test'}).then(res => {
  console.log(res)
})

注意：以上代码只是示例，具体的端口号、请求路径、模拟数据等都需要根据实际情况进行修改。