mockjs可以生成数据，还可以拦截请求。

一、生成随机数据

---

• 准备
  vue-cli脚手架
• 安装

npm i mockjs -D

• 目录结构，在src目录下新建一个mock文件夹，在其下创建一个index.js脚本本届导入mockjs

• 在main.js中使用

import './mock/index'

• 页面信息

  
  

---

mock用法

生成文本字符型

• 生成指定数据，随机生成1-4个指定字符串

const data = Mock.mock({
    'string|1-4':'学习'  //管道符之间不能有空格
    //公式： '键|规则':'值'       
})
console.log(data)

• 随机生成不定长度文本 word

import Mock from 'mockjs'
const data = Mock.mock({
    'string':'@cword(3,10)'  //随机取一个3-10的范围文本
})
console.log(data)

• 随机生成标题 title 和句子 sentence

import Mock from 'mockjs'
const data = Mock.mock({
    'title':'@ctitle(3,10)',
    'sentence':'@csentence(20,30)'
})
console.log(data)

• @c的意义，生成中文，没有c则生成英文

import Mock from 'mockjs'
const data = Mock.mock({
    'title':'@title(3,10)',
    'sentence':'@sentence(20,30)'
})
console.log(data)

• 生成段落文本 paragraph

import Mock from 'mockjs'
const data = Mock.mock({
    'paragraph':'@cparagraph',
    
})
console.log(data)


const data1 = Mock.mock({
    'paragraph':'@cparagraph(5)',
    
})
console.log(data1)

句子和段落的区别：一个是逗号，一个是句号。

生成数字number型

• 随机生成1-100范围内的数字

const data = Mock.mock({
    'number|1-100':1,
})
console.log(data)

• 生成增量id标识

const data = Mock.mock({
    id:'@increment()'
})
console.log(data)

• 随机生成身份证号码、人名、地址信息

const data = Mock.mock({
    idCard:'@id()',
    name:'@cname()',
    address:'@city(true)'  //加true显示省级和市级，没有则显示市级
})
console.log(data)

生成图片型

• 随机生成一张指定图片

const data = Mock.mock({
   img_url:"@image('25,25','#fff','#e35ef1','png','唐时明月')"
//参数解释：图片宽高、背景颜色、文本颜色、图片类型、文本信息
})
console.log(data)

返回1个url链接，可直接在浏览器打开

生成时间日期型

• 随机生成时间日期

const data = Mock.mock({
   date:'@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(data)

生成数组型

• 随机生成指定范围的数组信息

随机生成10-25份信息

const data = Mock.mock({
   'list|10-25':[
   { idCard:'@id()',
   name:'@cname()',
   address:'@city(true)'  }
   ]
})
console.log(data)

---

二、拦截请求

• 定义拦截get请求

import Mock from 'mockjs'
Mock.mock('/api/news','get',{   // 定义接口和请求方式
    status: 200,  //状态码
    message: 'success'
})

页面发起请求测试看看能不能拦截。
安装axios

npm i axios

清除app.vue的所有内容，重新定义，发起请求。

<template>
  
</template>

<script>
import axios from 'axios'
export default {
    data(){
      return{

      }
    },
    created(){
      axios.get('/api/news')
      .then(res => {
        console.log(res)
      })
    }
}
</script>

• 定义拦截post请求

Mock.mock('/api/post/news','post',{
    status: 200,
    msg: 'post成功'
})

发起post请求

<template>
  
</template>

<script>
import axios from 'axios'
export default {
    data(){
      return{

      }
    },
    created(){
      axios.post('/api/post/news')
      .then(res => {
        console.log(res)
      })
    }
}
</script>

---

模拟案例

传统方式：

import Mock from 'mockjs'

//定义获取新闻列表数据
Mock.mock('/api/get/news', 'get', () => {
    return {
        status: 200,
        message: "获取新闻列表成功",
        list: [
            {
                "id": 1,
                "title": "解忧杂货店",
                "content": "《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
                "img_url": "http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
                "add_time": "1984-04-03 11:43:37"
            }
        ],
        total: 50
    }
}

)

页面发起请求

<template>
  
</template>

<script>
import axios from 'axios'
export default {
    data(){
      return{

      }
    },
    created(){
      axios.get('/api/get/news')
      .then(res => {
        console.log(res)
      })
    }
}
</script>

<style>

</style>

mockjs改写后

import Mock from 'mockjs'

const {newsList} = Mock.mock({
    'newsList|50-90':[
        {
            "id": "@increment()",
            "title": "@ctitle()",
            "content": "@cparagraph(5,15)",
            "img_url": "@image('100x100','#FF83FA','#fcfcfc','png','图片信息')",
            "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
        }
    ]
})
//定义获取新闻列表数据
 Mock.mock('/api/get/news', 'get', () => {
    return {
        status: 200,
        message: "获取新闻列表成功",
        list: newsList,
        total: newsList.length
    }
})

发起请求

    created(){
      axios.get('/api/get/news')
      .then(res => {
        console.log(res)
      })
    }