模拟数据Mock.js

模拟后端接口,返回随机数据

项目安装mock.js

npm install mockjs

引入mock.js

import Mock from 'mockjs'

使用方式

生成指定次数字符串

import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈"
})

生成指定范围长度字符串

const data = Mock.mock({
"string|1-8":"哈哈"
})

生成文本

生成一个随机字符串

const data = Mock.mock({
	"string":"@cword"
}) 

生成指定长度和范围

const data = Mock.mock({
    string:"@cword(1)"
    str :"@cword(10,15)"
})

生成标题和句子

const data = Mock.mock({
    title:"@ctitle(8)"
    sentence:"@csentence"
})

生成指定长度的标题和句子

const data = Mock.mock({
    title:"@ctitle(8)"
    sentence:"@csentence(50)"
})

生成指定范围的

const data = Mock.mock({
    title:"@ctitle(5,8)"
    sentence:"@csentence(50,100)"
})

生成段落,随机生成段落

const data = Mock.mock({
  content:"@cparagraph()"
})

生成数字

生成指定数字

const data = Mock.mock({
	"number|80":1
})

生成范围数字

const data = Mock.mock({
	"number|1-99":1
})

生成自增id

随机生成标识

const data = Mock.mock({
	id:"@increment"
})

生成姓名-地址-身份证

const data = Mock.mock({
	name:"@cname()"
	idCard:"@id()"
	address:"@city(true)"
})

随机生成图片

• 生成图片：@image（“300*200”，‘#ff0000','#fff','gif','坤坤'）
• 参数1：图片大小

[	'300*250','250*250','240*400','336*280'	'180*150','720*300','468*60','234*60'	'388*31','250*250','240*400','120*40'	'125*125','250*250','240*400','336*280']

• 参数2：图片背景色

• 参数3：图片前景色

• 参数4：图片格式

• 参数5：图片文字

生成时间

• @Date
• 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

指定数组返回的参数

• 指定长度：‘date|5’
• 指定范围:'data|5-10'

const data = Mock.mock({
'list|50-99':[
        {
            name:'@cname'
            address:'@city(true)'
            id:'@increment()'
        }	
    ]
})

mock拦截请求

定义get请求

Mock.mock('api/get/news','get',()=>{
    return{
        status:200,
        message:"获取数据成功"
    }
})

定义post请求

Mock.mock('api/post/news','post',()=>{
    return{
        status:200,
        message:"获取数据成功"
    }
})

获取get和post请求

import axios from "axios";

axios.post("/api/add/news", {
          title: this.title,
          content: this.content,
        }).then((res) => {
          console.log(res);
        });

axios.get("/api/get/news", {
          params: {
          pageindex: this.pageindex,
          pagesize: 10,
          },
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.list;
        });