Mock.js

上课听了老师说关于后端接口的问题 ,在我们前端如果需要测试渲染的时候，后端也没给数据这样就得自己造

使用mockjs

项目安装mock

npm install mockjs

项目中新建mock文件

//引入mock模块
import Mock from 'mockjs'

将mock文件在main.js中导入

import Vue from 'vue'
import App FROM './App.vue'
import './mock/index.js'

Vue.config.productionTip = false

new Vue({
	render:h => h(App),
}).$mount('#app')

mock语法

生成字符串

• 生成指定次数字符串

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:"获取数据成功"
    }
})

模拟一个登录请求

async Login () {
    const res = await this.$http.post('http://www.mock.com',{username:username,password:pasword})
}

Mock.js 建立数据拦截请求

//用户信息数据
let userInfo = [
    { username:'zs',password:123456},
    { username:'ls',password:123},
    { username:'yy',password:456},
]
Mock.mock('http://www.mock.com',function(options){
    console.log(options)//截取到post过来的数据 
    // 准备校验
    let info = JSON.parse(options.body);  //抽取body并转化json
    console.log(info);
    let flag = false;
    //遍历比对账号与密码
    for(let i in userInfo){
        if(userInfo[i].username == info.username && userInfo[i].password == info.password){
              flag = true ;
              break;
        }
    }
    if(flag){
         return {
            code:200,
            msg:'登录成功',
            Token:'Bera1242432567tgdhbshdgyu34y23885723',
        }
    }else{
          return {
            code:400,
            msg:'登录失败',
            }
    }
})