mockjs笔记

1.安装mock

npm i mockjs

Mockjs的三种形式

Mock.mock（url，data）
Mock.mock（url，method，data）
Mock.mock（url，method，function（option）{return data}）
url：可以是字符串，也可以是正则表达式
method：post,get,put,delete
option内部：（url请求地址、method请求方法、body请求参数）

mockjs可以用来做随机

1.数字

整数：“num|1-100”
小数点：“price|25-50.2-3”:1

2.字符串随机

文字"score|1-5":“⭐”
中文本标题：“title”:“@ctitle(8,14)”
中文段落：“description”:“@cparagraph”

3.布尔值：“isLog|1”: true

4.数组：“friend|2-10”: [“小红”, “小蓝”, “小黄”]（输出2-10遍）

5.对象：“des|2”: { “eye”: 1, “hand”: 2, “leg”: 2 }

1.创建mock.js文件

import Mock from 'mockjs';
const Random = Mock.Random
//示例1
const messageList = Mock.mock({
    'data|3': [{
        'id': Random.id(),
        'startTime': Random.datetime(),
        'endTime': Random.datetime(),
        'remark': Random.paragraph(),
        'isOpen': Random.boolean(),
        "city": {
            "310000": "上海市",
            "320000": "江苏省",
            "330000": "浙江省",
            "340000": "安徽省"
        },
        'name': Random.cname()
    }]
})
function getMessageList() {
    return {
        code: 200,
        data: messageList.data
    }
}
Mock.setup({ timeout: 500 })
Mock.mock(/\/api\/messages/, 'get', getMessageList)
//示例2
const user = Mock.mock({
    'data': {
        'name': 'Tina',
        'age|1-25': 25,
        'sentence': Random.csentence(1, 3)
    }
})
Mock.mock(/\/api\/user/, 'get', function (option) {
    console.log(option.url, 'option.url')
    // /api/user?name=Tina&password=123 option.url
    if (option.url) {
        let params = getQuery(option.url)
        if (params.name == 'Tina') {
            return user.data
        }

    }

})
// 根据url获取query参数
const getQuery = (url) => {
    console.log(url);    //  /api/user?name=Tina&password=123
    let index = url.indexOf('?')
    if (index !== -1) {
        const queryStrArr = url.substr(index + 1).split('&')
        console.log(queryStrArr);   //['name=Tina', 'password=123']
        let object = new Object();
        for (var i = 0; i < queryStrArr.length; i++) {
            const itemArr = queryStrArr[i].split('=')
            console.log(itemArr)  //['name', 'Tina']    //['password', '123']
            object[itemArr[0]] = itemArr[1]
        }
        console.log(object, 'object')//{name: 'Tina', password: '123'}
        return object
    }
}

二次封装axios,get方法和post方法

1.创建utils/http.js文件

import axios from 'axios';
const instance = axios.create({
    baseURL: 'http://localhost:3000',
    timeout: 60000,
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么 
    return response.data
}, function (error) {
    // 对响应错误做点什么
    this.$message.error(error)
    return Promise.reject(error);
});
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, JSON.stringify(data), {
            headers: {
                "Content-Type": "application/json;charset=utf-8"
            }
        })
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}
export function postFlie(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data, {
            headers: {
                "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
            }
        })
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

在main.js中引用

require('../mock');
import { get, post, postFlie } from './utils/http'
Vue.prototype.$get = get
Vue.prototype.$post = post
Vue.prototype.$postFlie = postFlie

在vue文件中调用

<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="name">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="getData()">提交</el-button>
    <h3>{{ object }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: 'Tina',
        password: '123',
      },
      object: {},
    }
  },
  methods: {
    getData() {
      this.$get('/api/user', {
        name: this.ruleForm.name,
        password: this.ruleForm.password,
      }).then((res) => {
        console.log(res, 'res')
        this.object = res
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>