vue使用mock数据

1.下载mockjs

npm install mockjs   我这里下载的版本是1.1.0

使用环境：

对于前端开发后端接口没有完成的时候可以前端为了接口对可以先自己写一些mock数据自己对接

使用过程

1.下载mockjs

npm install mockjs

2.再src下面创建mock文件夹下面创建index.js

// 引入mockjs
import Mock from 'mockjs'

const data = {
  list: [
    {
      title: '医生巩固',
      id:'1'
    }, {
      title: '客服工作站',
      id:'2'
    }
  ],
  page: 1,
  size:10
}

const data2 = {
  name: 'zahgnsen',
  age: '12',
  birthday:'12岁3月5天'
}

Mock.mock('/mock/news','get',data)
Mock.mock('/mock/prose','get',data2)

3.再main.js里面引入全局mock

// 引入mock数据

import './mock/index.js'

4.封装 再api文件下面的mockApi.js文件夹里面封装接口

import axios from 'axios'

//mock数据
export function getnews(data) {
  return new Promise((resolve, rejects) => {
    axios.get('/mock/news').then(res =>{
      resolve(res)
    })
  })
}
//mock数据
export function getProse(data) {
  return new Promise((resolve, rejects) => {
    axios.get('/mock/prose').then(res =>{
      resolve(res)
    })
  })
}

5.页面使用

<template>
  <div>
    <el-button @click="testApi">测试接口</el-button>
    <el-button @click="testApi2">测试接口2</el-button>
  </div>
  </template>
  
  <script>
  import { getnews,getProse }from '@/api/mockApi'
  export default {
    name: "App",
    components: {},
    data() {
      return {
  
      };
    },
    methods: {
      testApi() {
        getnews().then(res => {
          console.log(res.data);
        })
      },
      testApi2() {
        getProse().then(res => {
          console.log(res.data);
        })
      }
    },
  };
  </script>