mock.js模拟后端数据,实现前后端同时开发

灰太狼 2021-07-24 15:37 422阅读 0赞

不用搭建服务器,会拦截目标请求,并返回自定义内容
    1、cnpm install mockjs -S
    
    2、在main.js引入mock.js文件
    	判断是否是生产环境
    	if(process.env.NODE_ENV=='development')
    		{
    		  require("@/xx");
    		}
    		
    3、创建js文件
    	(1)引入
    		var Mock = require('mockjs')
    		
    	(2)设置数据返回时间
    		Mock.setup({
    		    timeout:毫秒,
    		})
    	
    	(3)设置返回数据:
    	
    		Mock.mock('请求的url地址',{
    		     xx:'返回的数据'
    		    "xx":"@datetime",  返回随机时间戳
    		    "xx|1-800":800,   返回1-800的随机数
    		    "xx":"@cname",   返回随机名字 
    		    'xx|1-10': [{   返回1-10个随机元素的数组
    		        'xx|+1': 10,   返回从10开始,每次自增1的数据
    		    }],
    		    "xx":"@url",  返回随机url地址
    		    "xx":"@image",   返回随机图片
    		    "xxl":"@email",  返回随机email
    		    "xx":Mock.Random.cword(5,20)  返回5-20个随机汉字
    		
    		})

代码示例:  
**main.js:**

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    if(process.env.NODE_ENV=='development')
    { 
      require("@/api/mock");
    }
    
    
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

**mock.js:**

var Mock = require('mockjs')
    
    Mock.setup({ 
        timeout:1000,
    
    })
    
    Mock.mock('/api/banner',{ 
        username:'jeff',
        userpwd:'123',
        sex:'男',
        special:'帅',
        "date":"@datetime",
        "score|1-800":800,
        "rank|1-100":100,
        "name":"@cname",
        'list|1-10': [{ 
            'id|+1': 10,
            'num|20-30':30
        }],
        "address":"@url",
        "img":"@image",
        "email":"@email",
        "text":Mock.Random.cword(5,20)
    
    })