mock在vue和jquery中的使用，以及json5小知识点

本文链接：https://blog.csdn.net/weishachucuo/article/details/111562709

mock在vue和jquery中的使用，以及json5小知识点

一、mock在jquery中的运用

原理：监听拦截住ajax请求，返回mock处理后的数据。
在这里插入图片描述

使用示例：

目录结构：

在这里插入图片描述

首先在index.html中引入jquery和mcok

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //引入jquery和mock
    <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>
    
</body>
//设置全局变量，只要MOCK=="true" 时才会拦截
<script>MOCK='false'</script>
<script src="./mock/index.js"></script>
</html>

配置mock监听接口，以及返回数据。./mock/index.js

if (MOCK == 'true') {
    Mock.mock('/user/userInfo', 'get', {
        id: '@id', //得到随机id
        username: '@cname()', //得到随机姓名
        date: '@date()', //得到随机日期
        avatar: "@image('200x200','red','#fff','avatar')", //得到随机图片
        description: '@paragraph()', //得到随机描述
        ip: '@ip()', //得到随机ip
        email: '@email()', //得到随机邮箱
        haha: 'hahha', //自定义
    })
    Mock.mock('/user/login', 'post', {
        id: '@id', //得到随机id
        username: '@cname()', //得到随机姓名
        date: '@date()', //得到随机日期
        avatar: "@image('200x200','red','#fff','avatar')", //得到随机图片
        description: '@paragraph()', //得到随机描述
        ip: '@ip()', //得到随机ip
        email: '@email()', //得到随机邮箱
        haha: 'hahha', //自定义
    })
}

发起请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
    
</body>
<script>MOCK='true'</script>
<script src="./mock/index.js"></script>
<script>
    // $.ajax({
    //     url:'/user/userInfo',
    //     dataType:'json',
    //     success:(data)=>{
    //         console.log(data);
    //     }
    // })
    $.ajax({
        url:'/user/login',
        dataType:'json',
        method:'post',
        success:(data)=>{
            console.log(data);
        }
    })
</script>
</html>

效果

在这里插入图片描述

二、mock在vue中的运用

利用devserver的before中间件做监听。

在这里插入图片描述

项目目录：

在这里插入图片描述

首先项目中引入mock和json5，以及我们要发请求的axios

npm install axios --save

npm install mock --save-dev

npm install json5 --save-dev

详情看package.json

{
  "name": "mock_dome",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "json5": "^2.1.3",
    "mockjs": "^1.1.0"
  },

2.1 创建mock/index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');
const JSON5 = require('json5');

//读取json5文件，解析并返回
function getJsonFile(filePath){
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath),'utf-8');
    //解析并返回
    return JSON5.parse(json);
}


//暴露出一个函数
module.exports = function(app){
   //判断当前环境，如果是dev环境并设置MOCK=true的时候才有mock数据(看第四步配置)
   if(process.env.MOCK == 'true'){
    //监听http请求
    app.get('/user/userInfo',function(req,res){
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入Mock.mock  方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    })
     //监听http请求
     app.post('/user/login',function(req,res){
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入Mock.mock  方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    })

   }

    
}

2.2 创建json数据，mock/userInfo.json5

json5文件和json文件的区别是，json5文件可以添加注释，切不需要属性名和属性值都用双引号包起来。

{
    id:'@id',//得到随机id
    username:'@cname()',//得到随机姓名
    date:'@date()',//得到随机日期
    avatar:"@image('200x200','red','#fff','avatar')",//得到随机图片
    description:'@paragraph()',//得到随机描述
    ip:'@ip()',//得到随机ip
    email:'@email()',//得到随机邮箱
    haha:'hahha',//自定义

}

项目根目录下创建vue.config.js文件

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

配置在开发环境中使用mock，根目录新建.env.development文件
```
MOCK = true
```

在组件中发请求测试

mounted(){
     console.log(process.env.MOCK);
    

      axios.post('/user/login')
     .then(res=>{
      console.log(res)
     })
     .catch(err=>{
       console.log(err)
     })

     setTimeout(() => {
        axios.get('/user/userInfo')
     .then(res=>{
      console.log(res)
     })
     .catch(err=>{
       console.log(err)
     })
     }, 2000);
  }

效果

在这里插入图片描述