Vue项目使用mock

vue项目使用Axios+Mock模拟数据

Mock.js是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，只要前后端约定好接口和数据格式，前端就不用依赖后端的接口，直接使用模拟数据进行开发了。

因为要通过相同的API拦截ajax请求，这里就一起简单介绍如何配合axios使用。

Axios

安装

npm install axios -S

1、目录和文件创建

在src目录下创建utils目录，添加request.ts文件，此文件会对axios做一些全局封装

2、request.ts文件中全局封装

// 引入
import axios from 'axios'

// 创建并暴露全局实例
export const request = axios.create({
    // 定义全局请求地址
    baseURL:"",
    // 超时时间
    timeout:10000
})

//请求拦截器
request.interceptors.request.use(
	(config)=>{
        // 发送请求前要做些什么
        return config;
    },
    (error)=>{
        // 对错误请求做些什么
        return Promise.reject(error)
    }
)
//响应拦截器
request.interceptors.response.use(
	(response)=>{
        // 对请求响应数据做处理
        // 注意！！！这里建议返回的数据处理成以下格式
        conse res = response.data
        return res
    },
    (error)=>{
        // 对错误响应做处理
        if(errors.response){
            //处理代码
        }
        return Promise.reject(error)
    }
)

3、API文件中使用封装实例

// 引入实例
import { request } from '@/utils/request'

// get接口
export const getServerList = (params:any) =>
	request({
        url:'/server/list',
        method:'get',
        params
    })
// post接口
expost const addServerInfo = (data:any) =>
	request({
        url:'/server/add',
        method:'post',
        data
    })

4、功能文件中使用API接口

import {defineComponent,onMounted} from 'vue'
import {getServerList} from '@/api/server/list'

export default defineComponent({
    setup(){
        const methods = {
            getList(){
                 getServerList(query).then((res)=>{
                    datas.list = res.data.data
                })
            }
           
        }
    	onMounted(()=>{
			methods.getList()
        })
        return { ...methods }
    }                        
})

MockJS

官网：http://mockjs.com/

安装

npm install mockjs -S

1、目录和文件创建

在根目录下创建mock目录，添加index.ts文件，此文件中会引入所有的mock文件，还可以做一些通用配置

2、全局引入

// mian.ts文件中引入mock数据，真实环境中需要注释掉
require("../mock");

3、入口文件通用配置

// mock/index.ts文件
import './server/index'  // 引入模拟的服务器模块文件

const Mock = require('mockjs') 
// 在这里可以配置拦截ajax请求时的行为
// 指定被拦截的ajax请求的响应时间，单位是毫秒。值可以是正整数，也可以是横杠-风格的字符串，默认值是10-100
Mock.setup({
    timeout:400, // 表示400毫秒后才会返回响应内容
    timeout: 100 - 300, // 表示响应时间介于100和300毫秒之间
})

4、模块文件模拟数据

// mock/server/index.ts文件
const Mock = require('mockjs')

Mock.mock(RegExp('/server/list' + '.*'), 'get', {
   code: 20000,
   data,
 })
// 列表查询
Mock.mock('/server/list', 'post', {
  code: 0,
  data: {
    // 属性 data 的值是一个数组，其中含有 5 到 10 个元素
    // 属性名 data ;生成规则(可选) 5-10；属性值 value
    'data|5-10': [
      {
        // 属性 product 是一个自增数，起始值为 1，每次增 1
        'product|+1': ['CPE MAX', 'CPE 3.0', 'eCube'],
        ip: '@ip()', // 占位符模拟ip
        owner: '@first@last', // 占位符模拟名字
        usage: '@csentence()', // 占位符模拟文字
        createTime: '@datetime()', // 占位符模拟时间日期
      },
    ],
    total: 5,
  },
  msg: 'success',
})

5、mock.mock(template)基本规范

Mock.mock( rurl, rtype, template )

• rurl 表示需要拦截的URL，可以是URL字符串或URL正则
• rtype 表示需要拦截的Ajax请求类型。举个栗子get、post、put等
• template 表示数据模板，可以是对象或字符串，数据可随机生成