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

2021-12-31 13:34:05 阅读：253 来源： 互联网

标签：数据测试 axios return get url Random Vue mock 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的代码检查这个好烦，多一个空格都会报错

标签：数据测试,axios,return,get,url,Random,Vue,mock,Mock
来源： https://www.cnblogs.com/YinXuanZhiZhi9/p/15752712.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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