用户登录
用户注册

分享至

详解在vue-cli项目下简单使用mockjs模拟数据

  • 作者: 我去这也被注册了
  • 来源: 51数据库
  • 2021-11-20

为什么要用mockjs

实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试。大部分情况下,前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟。

看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用。

首先搭建一个vue项目

不介绍了

安装mockjs

npm install mockjs --save-dev

启动项目

npm run dev

创建mock.js文件

在src路径下创建mock.js文件
在main.js引入mock.js文件

mock.js使用

在mock.js文件中写入测试代码

此处箭头函数中的代码可以根据mock的git官网来进行修改随机数据及属性名称

//引入mockjs
const mock = require('mockjs')
// 获取 mock.random 对象
const random = mock.random;
//使用mockjs模拟数据
mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时mock会拦截请求并返回上面的数据
  let list = [];
  for(let i = 0; i < 30; i++) {
    let listobject = {
      title: random.csentence(5, 10),//随机生成一段中文文本。
      company: random.csentence(5, 10),
      attention_degree: random.integer(100, 9999),//返回一个随机的整数。
      photo: random.image('114x83', '#00405d', '#fff', 'mock.js')
    }
    list.push(listobject);
  }
  return {
    data: list
  }
})

在xxxxx.vue文件中使用axios获取mock.js中的随机数据

import axios from 'axios'

export default {
   data() {
    return {
     data:[]
    }
   },
   mounted:function() {
    axios.get('/api/data').then(res => {//get()中的参数要与mock.js文件中的mock.mock()配置的路由保持一致
     this.data = res.data.data;
     console.log(res.data);//在console中看到数据
    }).catch(res => {
     alert('wrong');
    })
   },
   methods:{
     
   }
}

<template></template>结构

效果展示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

软件
前端设计
程序设计
Java相关