Vue中使用Mock模拟数据测试 (元旦快乐~哈！)

 

1.项目创建,这里用的是图形页面创建的项目

　　vue ui

　　接着傻瓜式点击

2.安装依赖(这里用的试axios发送请求)

　npm install　

"axios": "^0.24.0",
"mockjs": "^1.1.0",

　　

3.封装axios请求 编写api.js

import axios from 'axios'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
axios.interceptors.request.use(function(config) {
  return config;
}, function(error) {
  return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
  return response;
}, function(error) {
  return Promise.reject(error);
})

// 封装axios的post请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}

// 封装axios的get请求
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}

export default {
  post(url, params) {
    return fetch(url, params);
  },
  get(url, params) {
    return get(url, params);
  }
}

 

 

4.创建mock.js

　　

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
  let articles = [];
  for (let i = 0; i < 100; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    articles.push(newArticleObject)
  }

  return {
    articles: articles
  }
}



import user from './user' //这里模拟单独的数据js文件json对象



//模拟后端url请求数据返回

Mock.mock('/getUser','get',()=>{
  return user.page;
})
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', produceNewsData); //数组对象
Mock.mock('/news/index', 'get', "hello");//字符串

　　

4.main.js引入mock

// 引入mockjs
require('./mock/mock.js');

 

5.使用

<script>
  import api from '../axios/api.js'

  export default {
    name: 'MyVue',
    data(){
      return{

      }
    },
    components:{

    },
    created(){
      this.getMockData();
    },
    methods:{
      getMockData: function (){
        api.post('/news/index','type=top&key=123456').then(res=>{
          console.log(res)
        })

        api.get('/news/index','type=top&key=123456').then(res=>{
          console.log(res)
        })

        api.get('/getUser','type=top&key=123456').then(res=>{
          console.log(res)
        })
      }
    }

  }
</script>

 

注意：可以关闭掉elint的代码检查 这个好烦，多一个空格都会报错

工程根目录下创建vue.config.js

module.exports ={
  lintOnSave: false,
  devServer: {
    overlay: {
      warning: false,
      errors: false
    }
  }
}