zoukankan      html  css  js  c++  java
  • 如何在vue-cli项目中结合mockjs模拟假数据

    1.前言

    在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面。但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而前端正着急着调用接口来测试页面是否能够正常渲染,这就造成开发进度阻塞。幸好,我们有mockjs这个插件可以完美的解决这个问题,该插件可以非常方便的模拟后端提供接口以供调用,并且在后续后端真实接口提供以后,我们只需将创建的模拟数据文件删掉即可,丝毫不会对我们的项目造成污染。下面我们将介绍一下如何在vue-cli项目中结合mockjs模拟后端接口和数据。

    2.安装

    使用之前,我们需要先安装一下mockjs

    npm install mockjs --save-dev

    3.使用mockjs模拟数据

    安装完成之后,我们在项目的src目录下新建mock.js文件,并引入mockjs:

    import Mock from 'mockjs'

    引入之后,我们就可以开始模拟我们想要的数据啦,示例如下:

    import Mock from 'mockjs'
    
    const Random = Mock.Random;
    
    function getData(){
      let datalist= [];
      for (let i = 0; i < 100; i++) {
        let newData = {
          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() 返回一个随机的时间字符串
        }
        datalist.push(newData)
      }
      return {
        data: datalist
      }
    }
    const data = Mock.mock('/msg1',getData)
    export default {data};

    上面代码中的getData()函数是用来批量生成数据的,Mock.mock()函数的第一个参数是被请求的url,第二个参数是后端要返回给前端的数据,写好之后我们将该接口导出。

    4.导入模拟好的数据接口

    模拟好假数据接口之后,我们还要在main.js中将接口导入,这样在项目中任意组件内都可以请求这些接口了:

    import mockdata from './mock'

    5.测试模拟好的接口

    到此,我们就已经完成数据接口的模拟,我们可以来测试一下,看看接口效果。我们在任意组件内,对写好的接口url发起请求,看看返回的数据,代码如下:

    
    
    <button @click="fasong">fasong</button>
    methods:{
        fasong(){
          this.$http.get('/msg1').then(function (res) {
            console.log(res)
          })
        }
      }

    控制台打印的请求返回数据如图:

    OK,完美!

    6.总结

    当后端写好真实接口以后,我们只需删掉创建的mock.js文件和在main.js中导入假数据的那行代码即可,其余都不用动,简直不能更方便哈!

    (完)

  • 相关阅读:
    Redis之七种武器
    Redis与Memcached的区别
    java优化占用内存的方法(一)
    Java内存区域与内存溢出异常(二)
    深入理解java垃圾回收机制
    从JAVA多线程理解到集群分布式和网络设计的浅析
    大型网站系统架构系列:分布式消息队列(一)
    大型网站系统架构系列:分布式消息队列(二)
    大型分布式网站架构技术总结
    40个Java多线程问题总结
  • 原文地址:https://www.cnblogs.com/wangjiachen666/p/9547812.html
Copyright © 2011-2022 走看看