【Vue】Mock.js的使用教程，入门级（附代码和案例）

最新推荐文章于 2024-05-09 23:18:43 发布

前端小媛

最新推荐文章于 2024-05-09 23:18:43 发布

阅读量1.4k

点赞数 1

分类专栏： Vue 文章标签： 1024程序员节前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_59012240/article/details/127498249

版权

Vue 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

Mock.js的使用（附代码和案例）

1、什么是mockjs

生成随机数据，拦截Ajax请求

了解一项技术，官网当然要知道 Mock.js 官网

2、程序

前端：访问后端接口，展示数据
后端：后端负责业务逻辑，访问数据，返回前端
数据库：存储数据

3、情况

很多公司，后端还没有做好接口，和接口文档（这时前端就不需要等待后端实现接口再写代码）

前端可以通过mockjs参考接口文档，自己先模拟数据，写业务代码，等待后端准备好，再用后端接口替换自己写模拟数据，实现前后端同时开发

4、安装

npm i  mockjs - D

在这里插入图片描述

5、使用

5.1 使用（小试牛刀）

新建mock.js

import Mock from 'mockjs';  
 //Mock.mock(url,data)
Mock.mock("http://abc.com/v5/list",{
	name:"zeng101",
	age:18
})

在这里插入图片描述

在main.js 导入mock

import "@/utils/mock";

在这里插入图片描述

使用

//导入 utils request
import request from "@/utils/request";

created() {
// console.log(this.$children);
request
      .get("http://abc.com/v5/list")
      .then((res) => {
console.log("模拟数据", res.data);
      })
      .catch((err) => {
console.log(err);
      });
  },

在这里插入图片描述

代码实现

在这里插入图片描述

5.2 post请求案例

//post 请求
Mock.mock(/\/v5\/item/, "post", {
    code: 0,
    msg: "成功",
    data: [1, 2, 3, 4],
});

//post请求
request.post("/v5/item").then((res) => {
    console.log("post数据", res.data);
});

5.3 正则请求案例

//只要网络地址匹配到这个正则就会拦截
Mock.mock(/\/v5\/list/, {
    name: "zeng101",
    age: 18,
});

  //正则形式
    request
      .get("/v5/list")
      .then((res) => {
        console.log("模拟数据", res.data);
      })
      .catch((err) => {
        console.log(err);
      });

5.4 纸多多数据请求

//纸多多数据
Mock.mock(/\/api\/app\/v3\/category/, {
    message: "success",
    code: 200,
    data: {
        top: [
            { cat_id: 0, cat_name: "\u63a8\u8350\u5206\u7c7b" },
            { cat_id: 1, cat_name: "\u6587\u5316\u7eb8" },
            { cat_id: 2, cat_name: "\u5305\u88c5\u7eb8" },
            { cat_id: 3, cat_name: "\u827a\u672f\u7eb8" },
            { cat_id: 4, cat_name: "\u5de5\u4e1a\u7528\u7eb8" },
            { cat_id: 7, cat_name: "\u767d\u5361\u7eb8" },
            { cat_id: 11, cat_name: "\u590d\u5370\u7eb8" },
            { cat_id: 12, cat_name: "\u65b0\u95fb\u7eb8" },
            { cat_id: 14, cat_name: "\u9ed1\u5361\u7eb8" },
            { cat_id: 15, cat_name: "\u53cc\u80f6\u7eb8" },
            { cat_id: 6, cat_name: "\u74e6\u695e\u7eb8" },
            { cat_id: 94, cat_name: "\u519c\u526f\u4ea7\u54c1" },
            { cat_id: 86, cat_name: "\u65e0\u78b3\u7eb8" },
            { cat_id: 89, cat_name: "\u4e0d\u5e72\u80f6" },
            { cat_id: 91, cat_name: "\u677f\u7247" },
        ],
        recommend: {
            categorys: [
                {
                    cat_id: 35,
                    cat_name: "\u8f7b\u6d82\u7eb8",
                    logo: "https://cdn.toodudu.com/159514020603cf70ec9a2f3f952f2e18.jpg",
                },
                {
                    cat_id: 38,
                    cat_name: "\u65b0\u95fb\u7eb8",
                    logo: "https://cdn.toodudu.com/f45dbe288b1cc478fe507ad054317267.jpg",
                },
                {
                    cat_id: 51,
                    cat_name: "\u767d\u5e95\u94dc\u7248\u5361\u7eb8",
                    logo: "https://cdn.toodudu.com/169ef046e96665819ba91d9aee18f701.jpg",
                },
                {
                    cat_id: 52,
                    cat_name: "\u7070\u5e95\u94dc\u7248\u5361\u7eb8",
                    logo: "https://cdn.toodudu.com/16178dcc248c8098d7d460654f900ba5.jpg",
                },
                {
                    cat_id: 1,
                    cat_name: "\u6587\u5316\u7eb8",
                    logo: "https://cdn.toodudu.com/a5d9f2db2abed10a1306bc7495601801.jpg",
                },
                {
                    cat_id: 2,
                    cat_name: "\u5305\u88c5\u7eb8",
                    logo: "https://cdn.toodudu.com/bad951f04bbdd4c9b0f4bffa298b9042.jpg",
                },
                {
                    cat_id: 3,
                    cat_name: "\u827a\u672f\u7eb8",
                    logo: "https://cdn.toodudu.com/36e7ec095717b72014cfd53752baa01d.jpg",
                },
                {
                    cat_id: 4,
                    cat_name: "\u5de5\u4e1a\u7528\u7eb8",
                    logo: "https://cdn.zdoodoo.com/aab27872e1e188d2fe070d2a40051c9a.alicdn",
                },
                {
                    cat_id: 7,
                    cat_name: "\u767d\u5361\u7eb8",
                    logo: "https://cdn.toodudu.com/3c294fc36b3e2e794d765da2ee60f6d1.jpg",
                },
                {
                    cat_id: 11,
                    cat_name: "\u590d\u5370\u7eb8",
                    logo: "https://cdn.zdoodoo.com/e3deb62e3f2c77c9e531c435cf075db4.jpg",
                },
                {
                    cat_id: 12,
                    cat_name: "\u65b0\u95fb\u7eb8",
                    logo: "https://cdn.zdoodoo.com/40b89317a8230db4e582541649b4c93d.jpg",
                },
                {
                    cat_id: 14,
                    cat_name: "\u9ed1\u5361\u7eb8",
                    logo: "https://cdn.toodudu.com/cf609a216df70af19f6247d518d0b5a7.jpg",
                },
                {
                    cat_id: 15,
                    cat_name: "\u53cc\u80f6\u7eb8",
                    logo: "https://cdn.toodudu.com/08a4f33d564cb2727a834f3f807a4706.jpg",
                },
                {
                    cat_id: 6,
                    cat_name: "\u74e6\u695e\u7eb8",
                    logo: "https://cdn.toodudu.com/5443180758be1cb65077ae9aff595796.jpg",
                },
                {
                    cat_id: 69,
                    cat_name: "\u9759\u7535\u590d\u5370\u7eb8",
                    logo: "https://cdn.toodudu.com/26bbb6338c0ed7ab3ed22781707e9827.jpg",
                },
                {
                    cat_id: 70,
                    cat_name: "\u7eb8\u7bb1",
                    logo: "https://cdn.zdoodoo.com/64dcc60944cbc3bc6af538aa1eeb2835.alicdn",
                },
                {
                    cat_id: 71,
                    cat_name: "\u7070\u5e95\u767d\u677f\u7eb8",
                    logo: "https://cdn.toodudu.com/58f3efbe6b60b7e8cdc67c08503d489a.jpg",
                },
                {
                    cat_id: 72,
                    cat_name: "\u7bb1\u677f\u7eb8",
                    logo: "https://cdn.toodudu.com/beeaf57e831a5dde998341e2493cd31a.jpg",
                },
                {
                    cat_id: 36,
                    cat_name: "\u94dc\u7248\u7eb8",
                    logo: "https://cdn.toodudu.com/44cf483c3ebb41c8bc859be63f515cb3.jpg",
                },
                {
                    cat_id: 42,
                    cat_name: "\u725b\u76ae\u5361\u7eb8",
                    logo: "https://cdn.toodudu.com/b9fb9f5c0697168123e454400419f822.jpg",
                },
                {
                    cat_id: 43,
                    cat_name: "\u7bb1\u677f\u7eb8",
                    logo: "https://cdn.toodudu.com/39aec0797e9ff59dbbe024df2133cb04.jpg",
                },
                {
                    cat_id: 45,
                    cat_name: "\u74e6\u695e\u7eb8\u677f",
                    logo: "https://cdn.toodudu.com/dae179c37ce76eb89eb4bf913cca3898.jpg",
                },
                {
                    cat_id: 66,
                    cat_name: "\u80f6\u7248\u7eb8",
                    logo: "https://cdn.toodudu.com/a5e9549092026564e7958231727e0a74.jpg",
                },
            ],
            brands: [
                {
                    brand_id: 13,
                    brand_name: "\u4f73\u76ca\u7eb8\u4e1a",
                    brand_logo:
                        "https://cdn.toodudu.com/13d295fdff8f0a5078ee97e10b6f702c.jpg",
                },
                {
                    brand_id: 2,
                    brand_name: "\u535a\u5927\u7eb8\u4e1a",
                    brand_logo:
                        "https://cdn.toodudu.com/2d4b1900354a879d459cab54cd7ff5cc.jpg",
                },
                {
                    brand_id: 7,
                    brand_name: "\u53cb\u987a\u7eb8\u4e1a",
                    brand_logo:
                        "https://cdn.toodudu.com/979753d9e2229c5146ba8c74efc095fc.jpg",
                },
                {
                    brand_id: 9,
                    brand_name: "\u6d2a\u56fe",
                    brand_logo:
                        "https://cdn.toodudu.com/45c561db526f3dc8b9aadeb94bf35965.jpg",
                },
                {
                    brand_id: 19,
                    brand_name: "\u6c38\u6052\u7eb8\u4e1a",
                    brand_logo: "",
                },
                {
                    brand_id: 22,
                    brand_name: "\u6c5f\u95e8\u661f\u8f89\u9020\u7eb8",
                    brand_logo:
                        "https://cdn.toodudu.com/ee42e315348da804381125c5eb5b0cb2.png",
                },
                {
                    brand_id: 137,
                    brand_name: "\u6c5f\u82cf\u76db\u5b9d\u4ed1\u7eb8\u4e1a",
                    brand_logo: "",
                },
                {
                    brand_id: 138,
                    brand_name: "\u9e3f\u5a1c\u7eb8\u4e1a",
                    brand_logo: "",
                },
            ],
        },
        banner: [
            {
                id: 239,
                cateid: 71,
                image: "https://cdn.zdoodoo.com/2020/04/24/FwQyo3sKuwEnb2lkJ8s26O5vLRr8bIXHbICtiNtt.jpeg",
                title: null,
                url: "",
                web_url: "",
                app_path: "",
                web_path: "",
                mini_url: "",
                theme_color: "rgb(118, 198, 241)",
            },
        ],

 //纸多多数据
    request
      .get("/api/app/v3/category")
      .then((res) => {
        console.log("多多", res.data);
      })
      .catch((err) => {
        console.log(err);
      });

5.5 带参数请求

//带参数
/* post参数，option前端请求的数据，option.url请求的地址
option.type 请求的方式
option.body请求的字符参数（需要JSON.parse转对象）
*/
Mock.mock(/\/v5\/jok/, "post", function (option) {
    return {
        code: 0,
        msg: "参数成功",
        data: {
            title: "信息标题",
            content: "内容",
            ...JSON.parse(option.body),
        },
    };
});

//带参数
 request.post("/v5/jok", { id: 20, key: "xyz" 			}).then((res) => {
      console.log("带参数", res.data);
    });

5.6 随机请求

Mock.mock(/\/v5\/user/, {
            "id|+1": 1024,
            name: "@cname",
            regexp: /[a-z][A-Z][0-9]/,
            "age|1-100": 1,
            "price|25-50.2-5": 1,
            "score|1-5": "※",
            title: "@ctitle(8,14)",
            description: "@cparagraph",
            "object|2-4": {
                110000: "北京市",
                120000: "天津市",
                130000: "河北省",
                140000: "山西省",
            },
            "isLog|1": true,
            "friend|2-10": ["红", "绿", "蓝蓝"],
            "des|2": { eye: 2, hand: 1, leg: 2, job: "teacher" },
            tel: /1\d{10}/,
            email: /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
            canMerry: function () {
                if (this.age > 22) {
                    return true;
                } else {
                    return false;
                }
            },
            day: "@date('yyyy-MM-dd')",
            time: "@time('HH:mm:ss')",
            add: "@county(true)",
            avatar: "@dataImage('200x100', 'Hello Mock.js!')",
});

//请求随机数据
    request.post("/v5/user").then((res) => {
      console.log("随机", res.data);
    });

7、案例

在 mock.js 写以下代码：

Mock.mock(/\/v5\/user/, {
    code: 0,
    msg: "成功",
    "data|10": [
        {
            "id|+1": 1024,
            name: "@cname",
            regexp: /[a-z][A-Z][0-9]/,
            "age|1-100": 1,
            "price|25-50.2-5": 1,
            "score|1-5": "※",
            title: "@ctitle(8,14)",
            description: "@cparagraph",
            "object|2-4": {
                110000: "北京市",
                120000: "天津市",
                130000: "河北省",
                140000: "山西省",
            },
            "isLog|1": true,
            "friend|2-10": ["红", "绿", "蓝蓝"],
            "des|2": { eye: 2, hand: 1, leg: 2, job: "teacher" },
            tel: /1\d{10}/,
            email: /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
            canMerry: function () {
                if (this.age > 22) {
                    return true;
                } else {
                    return false;
                }
            },
            day: "@date('yyyy-MM-dd')",
            time: "@time('HH:mm:ss')",
            add: "@county(true)",
            avatar: "@dataImage('200x100', 'Hello Mock.js!')",
        },
    ],
});

AboutView 写以下代码

<template>
  <div class="about">
    <div class="mock">
      <h1>Mock</h1>
      <div v-for="item in list" :key="item.id">
        <h3>{{ item.name }}</h3>
        <h3>{{ item.age }}</h3>
        <h3>价格：{{ item.price }}</h3>
        <h3>{{ item.score }} | {{ item.tel }}</h3>
        <p>{{ item.title }}</p>
        <p>{{ item.description }}</p>
        <img :src="item.avatar" alt="" />
        <hr />
      </div>
    </div>
  </div>
</template>

<script>
//导入 utils request
import request from "@/utils/request";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    //请求随机数据
    request.post("/v5/user").then((res) => {
      console.log("随机", res.data);
      this.list = res.data.data;
    });
  },
};
</script>