前端-mock数据

 1.本地mock

(1)安装mockjs

npm i mockjs 

（2）在api文件夹下创建mock/mock.js home.js

-----mock.js 文件内-----

import Mock from 'mockjs'

import homeApi from './home'

// 第一个参数是请求的接口地址(自定义) 第二个参数是请求回来的数据(即模拟的数据)

Mock.mock('home/getHomeData',homeApi.getHomeData)

------home.js 文件内-----

export default {

    getHomeData :() =>{

        return {

            code:200,

            data:{

              tableData:[

                {

                  date: '2016-05-03',

                  name: 'Tom',

                  address: 'No. 189, Grove St, Los Angeles',

                },

                {

                  date: '2016-05-02',

                  name: 'Tom',

                  address: 'No. 189, Grove St, Los Angeles',

                },

                {

                  date: '2016-05-04',

                  name: 'Tom',

                  address: 'No. 189, Grove St, Los Angeles',

                },

                {

                  date: '2016-05-01',

                  name: 'Tom',

                  address: 'No. 189, Grove St, Los Angeles',

                },

              ]

            }

        }

    },

}

（3）在main.js文件全局引入

import './api/mock/mock'

（4）安装axios

npm i axios -S

（5）发送接口请求数据（使用vue3的语法）

import axios from 'axios'

import { onMounted,ref } from 'vue'

let tableData = ref([])

const getTableLists = ()=>{

    axios.get('home/getHomeData').then(res=>{

        if(res.data.code == 200){

            tableData.value = res.data.data.tableData

        }else{

            console.log(res)

        }

    }).catch(err=>{

        console.log(err)

    })

}

onMounted(() => {

    getTableLists()

})

2.线上mock-FastMock

fastmock 在线接口 Mock 平台

3.全局http来模拟数据-使用apifox

1.全局挂载http

在main.js文件中引入二次封装的request，并挂在原型上

import request from '_utils/request'

Vue.prototype.$http = request

2.使用http

getLists () {

      this.$http({

        method: 'get',

        url: 'http://127.0.0.1:4523/m1/1426283-0-default/moreLists', // apifox的模拟地址

        params: this.params

      }).then(res => {

        console.log(res)

      })

    }