前端Vue开发模拟请求数据——Mock.js

一、Mock的入门和安装

1.1.为什么用Mock.js

最近学习vue编写项目由于没有Api接口，在使axios中不能模拟接收自己到想要的数据（我主要不能快速模拟接收图片数据，其他的数据类型可以用springmvc快速简单模拟一个数据）。

在网上查阅了很多的资料，在神器的网站（B站）听说Mockjs可以在后端还没创建好接口的情况下拦截浏览器的请求。最重要还可以模拟生成图片，美滋滋。

1.2.Mock.js介绍

1. Mock.js 是一款模拟 JSON 数据的前端技术，为什么要产生这种技术？
2. 对于前后端分离的项目，后端工程师的 API 数据迟迟没有上线；
3. 而前端工程师却没有 JSON 数据进行数据填充，自己写后端模拟又太繁重；
4. 这个时候，Mock.js 就能解决这个问题，让前端工程师更加独立做自己；
5. 官方网站为：mockjs.com；学前基础：Vue2.x 基础完结后方可学习；或一定前端基础。

1.3.安装

1.3.1.方式1：Node (CommonJS)

在选定文件目录下的终端输入（前提电脑安装了node，具体安装方式上网一大堆

1.4.Mock语法规范

1. Mock.js 的语法规范包括两个部分：数据模板定义规范和数据占位定义规范；

2. 数据模板定义的规范包含 3 个部分：属性名、生成规则和属性值；

   ‘属性名|生成规则’ : 属性值 // ‘name|rule’ : value

3. 其中，字符串、数值有 7 种生成规则，具体如表说明：
   

4. 除了以上几种规则格式，还有布尔值、对象和数组等规则；
   

5. 也支持函数和正则表达式；
   

6. 数据定义的占位符@，比较好理解，占领属性值的位置；

   'list|5' : [{
     cname : '@cname', 
     city : '@city', 
     full : '@cname - @city' 
   	}]
   

1.5.Mock随机占位符

1.5.1.通过 ‘@占位符’ 这种方式来随机产生各种不同的数据；

//第一种输入占位符的方式 
console.log(Mock.Random.cname()); 
//第二种输入占位符的方式 
console.log(Mock.mock('@cname'));

PS:第二种方式听说更香哦

---

1.5.2.常用占位符

具体用法可以常考官网：

//随机中文人名，不带 c 就是英文
console.log(Mock.mock('@cname'));
//随机 ID 
console.log(Mock.mock('@id'));
//随机中文标题，不带 c 就是英文
console.log(Mock.mock('@ctitle'));
//随机颜色，十六进制 
console.log(Mock.mock('@color')); 
//随机图片，给你一个图片地址 
console.log(Mock.mock('@image')); 
//随机 ip 地址 
console.log(Mock.mock('@ip')); 
//随机 url 地址 
console.log(Mock.mock('@url')); 
//随机字符串 
console.log(Mock.mock('@string')); 
//随机数值 
console.log(Mock.mock('@integer')); 
//随机日期 
console.log(Mock.mock('@datetime'));

1.5.3.如果没有我们想要的数据格式进行填充，可以使用扩展功能自己扩展

//自行扩展，各种商店名称 
        Mock.Random.extend({
            cstore() {
                return this.pick([
                    '宠物店',
                    '美容店',
                    '小吃店',
                    '数码店',
                    '快餐店'
                ]);
            }
        });
        //扩展调用 
        console.log(Mock.mock('@cstore'));

二、在Axios库的运用

2.1.在VueCli（vue脚手架）安装Axios

方式：Node (CommonJS)

npm install axios

2.2.CDN使用Axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>

const axios = require('axios');
        //使用 get 请求获取数据 
        axios.get('填写要请求的api')
            .then(res => {
                console.log(res.data);
            })
            .catch(err => {
                console.log('错误：' + err);
            });

PS：注意可能有跨域问题。下面在本机测试，不会跨域。

2.2.vue中使用Mock

在vue项目安装mock: npm install mockjs 和axios：npm install axios

2.2.1.在项目的根目录新建vue.config.js文件

module.exports = {
    devServer: {
        before: require('./mock/index')//引入mock/index.js
    }
}

mock/index.js

//测试项目笔记最好会放上
const fs = require('fs')
 const path = require('path')
 const Mock = require('mockjs')
 const JSON5 = require('json5')

 //读取json文件
 function getJsonFile(filePath) {
     //读取指定json文件
     var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
    //  fs.readFileSync(path.join(__dirname,"./userInfo.json5"),'utf-8')

     //  解析并返回
     return JSON5.parse(json)
 }

 // 返回一个函数
 module.exports = function (app) {
     if (process.env.MOCK == 'true') {
         //监听http请求
         app.get('/user/userInfo', function (rep, res) {
             // 每次响应请求时候读取mock data的json文件
             // getJsonFile方法定义了如何读取json文件并解析成数据对象
             var json = getJsonFile('./userInfo.json5')
             // 将json传入Mock.mock 方法中，生成的数据返回给浏览器
             console.log("haah")
             res.json(Mock.mock(json));
         });
     }
 }

./userInfo.json5

{
    id: '@id',
    cname: '@cname',
    avatar: "@image('200×200','red','#fff','avatar')"
}

测试实例HelloWorld.vue

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    axios.get('/user/userInfo')
    .then(res=>{
      console.log(res)
    })
    .catch(err =>{
      console.error(err);
    })
  }
}
</script>

.env.development

//true为开启mock；false为关闭
MOCK = true

三、在Ajax库的运用

3.1.在引用JQuery的项目中引用Mock.js

 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>

3.2.JQuery的项目使用Mock

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js">script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js">script>
head>
<body>
   <h1>testMockAjaxh1> 
     
   <script>MOCK = 'true'script>
   
   <script src="./mock/testMock.js">script>
 
   <script>
       $.ajax({
           url:'/testmcokajax2',
           type: 'get',
           dataType: 'json',
           success:(data)=>{
               console.log(data)
           }
       })
   script>
body>
html>

./mock/testMock.js

if(MOCK = 'true'){
  Mock.mock('/testmcokajax', 'get', {
    id: '@id',
    cname: '@cname',
    avatar: "@image('200×200','red','#fff','avatar')"
})
}

3.3.项目移除mock

方式1：直接删除

方式2：在script标签定义 ,移除改为false

四、笔记定位

学习mockjs参考了

B站连接: https://www.bilibili.com/video/BV1PE411A7U6?p=1

官网github文档: https://github.com/nuysoft/Mock/wiki/Getting-Started

代码下载

学习项目代码：码云: https://gitee.com/lhj548362/mockLearn.git

这个笔记只是简单拦截请求并作出简单的响应。响应的数据格式还需结合自己的项目确定数据结构。其中的mock在项目中移除需要事先考虑使用哪种方式，避免影响项目的正常网络请求。