前端Mockjs数据模拟

秃头小宝贝@

已于 2022-02-19 09:22:35 修改

阅读量1.6k

点赞数 1

文章标签： vue.js 前端

于 2022-02-18 09:33:34 首次发布

本文链接：https://blog.csdn.net/weixin_45974259/article/details/122995729

版权

1.安装mockjs(本案例完整代码在最下方)

通过指令npm install mockjs安装mock ,

之后在src文件夹下创建一个mock文件夹,再在mock文件夹下创建一个index.js文件

之后接着在main.js文件中引入mock

之后就可以在mock文件下的index.js文件中模拟数据了

1.首先我们需要在mock下的index.js文件中引入mock

import Mock from "mockjs";

2.接着在此处我们模拟了一个新闻列表数据 ,该数据是一个数组,数组长度为75,每个数组元素均为对象,

不太了解mock数据的可以到mockjs官网去查看

const { newsList } = Mock.mock({
    "newsList|75": [{
        id: "@increment",//表示自增
        title: "@ctitle()",//表示中文标题
        content: "@cparagraph(5,10)",//表示中文段落5-10句
        img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",//表示图片
        add_time: "@date(yyyy-MM-dd hh:mm:ss)",//表示日期
    }, ],
});

3.我们继续在该文件中定义一个接口

var getQuery = (url, name) => {
    console.log(url, name);
    const index = url.indexOf("?");
    if (index !== -1) {
        const queryStrArr = url.substr(index + 1).split("&");
        for (var i = 0; i < queryStrArr.length; i++) {
            const itemArr = queryStrArr[i].split("=");
            console.log(itemArr);
            if (itemArr[0] === name) {
                return itemArr[1];
            }
        }
    }
    return null;
};

// 定义获取新闻列表的数据
// /api/get/news?pageinde1&pagesize=10
Mock.mock(/\/api\/get\/news/, "get", (options) => {
    // 获取传递参数pageindex，pagesize
    console.log(options)
    const pageindex = getQuery(options.url, "pageindex");
    const pagesize = getQuery(options.url, "pagesize");
    console.log(pageindex);
    console.log(pagesize);
    const start = (pageindex - 1) * pagesize;
    const end = pagesize * pageindex;
    const totalPage = Math.ceil(newsList.length / pagesize);

    //  pageindex:1 pagesize:10 返回0-9条数据  2-10-（10-19） 3-10（20-29）
    // 数据的起始位置：（pageindex-1）*pagesize 结束位置：pageindex*pagesize
    const list = pageindex > totalPage ? [] : newsList.slice(start, end);
    return {
        status: 200,
        message: "获取新闻列表成功",
        list: list,
        total: totalPage,
    };
});

Mock.mock()中有三个参数,

第一个参数是请求的接口api,第二个参数是请求方式get/post,第三个参数是一个函数,

按以上代码配置完毕后,我们就模拟了一个数据接口,就可以通过请求到该接口模拟的数据

axios.get("/api/get/news", {
          params: {
            pageindex: this.pageindex,
            pagesize: 10,
          },
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.list;
        });

注意,此处是get请求并且传参了,我们在配置Mock.mock()时,第一个参数必须是正则表达式的形式,

以上代码已经示例,然而我们通过Mock.mock()模拟的接口怎么获得请求携带的参数呢?

此时我们就需要打印一下options,

这里我直接说明,options是一个对象,里面的body和url属性是用来接收参数的,因此我们需要处理

options.body和options.url

,get请求携带的参数在 options.url 中,是一个很长的字符串,内部的?字符后面为所携带的参数,

因此我们需要对options.url进行处理,从而拿到参数,那么我们如何处理呢?

var getQuery = (url, name) => {
    console.log(url, name);
    const index = url.indexOf("?");
    if (index !== -1) {
        const queryStrArr = url.substr(index + 1).split("&");
        for (var i = 0; i < queryStrArr.length; i++) {
            const itemArr = queryStrArr[i].split("=");
            console.log(itemArr);
            if (itemArr[0] === name) {
                return itemArr[1];
            }
        }
    }
    return null;
};

通过该函数可以将options.url作为第一个参数,将想要得到的参数名作为第二个参数传入

const pageindex = getQuery(options.url, "pageindex");
    const pagesize = getQuery(options.url, "pagesize");

就能的到options.url的参数

最后就能定义完整请求接口

// 定义获取新闻列表的数据
// /api/get/news?pageinde1&pagesize=10
Mock.mock(/\/api\/get\/news/, "get", (options) => {
    // 获取传递参数pageindex，pagesize
    console.log(options)
    const pageindex = getQuery(options.url, "pageindex");
    const pagesize = getQuery(options.url, "pagesize");
    console.log(pageindex);
    console.log(pagesize);
    const start = (pageindex - 1) * pagesize;
    const end = pagesize * pageindex;
    const totalPage = Math.ceil(newsList.length / pagesize);

    //  pageindex:1 pagesize:10 返回0-9条数据  2-10-（10-19） 3-10（20-29）
    // 数据的起始位置：（pageindex-1）*pagesize 结束位置：pageindex*pagesize
    const list = pageindex > totalPage ? [] : newsList.slice(start, end);
    return {
        status: 200,
        message: "获取新闻列表成功",
        list: list,
        total: totalPage,
    };
});

2.options.body中的参数是post请求携带的参数

是字符串,我们需要通过JSON.parse(options.body)转换成对象,本例中options中携带title和content参数,代码如下

// 定义添加新闻的数据
Mock.mock("/api/add/news", "post", (options) => {
    const body = JSON.parse(options.body);
    console.log(body);
    newsList.push(
        Mock.mock({
            id: "@increment",
            title: body.title,
            content: body.content,
            img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",
            add_time: "@date(yyyy-MM-dd hh:mm:ss)",
        })
    );
    return {
        status: 200,
        message: "添加成功",
        list: newsList,
        total: newsList.length,
    };
});

之后我们可以通过以下代码发送添加新闻数据的请求

axios.post("/api/add/news", {
          title: this.title,
          content: this.content,
        })
        .then((res) => {
          console.log(res);
        });

本案例完整mock中的index.js代码如下

import Mock from "mockjs";

const { newsList } = Mock.mock({
    "newsList|75": [{
        id: "@increment",
        title: "@ctitle()",
        content: "@cparagraph(5,10)",
        img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",
        add_time: "@date(yyyy-MM-dd hh:mm:ss)",
    }, ],
});

console.log(newsList);
var getQuery = (url, name) => {
    console.log(url, name);
    const index = url.indexOf("?");
    if (index !== -1) {
        const queryStrArr = url.substr(index + 1).split("&");
        for (var i = 0; i < queryStrArr.length; i++) {
            const itemArr = queryStrArr[i].split("=");
            console.log(itemArr);
            if (itemArr[0] === name) {
                return itemArr[1];
            }
        }
    }
    return null;
};

// 定义获取新闻列表的数据
// /api/get/news?pageinde1&pagesize=10
Mock.mock(/\/api\/get\/news/, "get", (options) => {
    console.log(options);
    // 获取传递参数pageindex，pagesize
    const pageindex = getQuery(options.url, "pageindex");
    const pagesize = getQuery(options.url, "pagesize");
    console.log(pageindex);
    console.log(pagesize);
    const start = (pageindex - 1) * pagesize;
    const end = pagesize * pageindex;
    const totalPage = Math.ceil(newsList.length / pagesize);

    //  pageindex:1 pagesize:10 返回0-9条数据  2-10-（10-19） 3-10（20-29）
    // 数据的起始位置：（pageindex-1）*pagesize 结束位置：pageindex*pagesize
    const list = pageindex > totalPage ? [] : newsList.slice(start, end);
    return {
        status: 200,
        message: "获取新闻列表成功",
        list: list,
        total: totalPage,
    };
});

// 定义添加新闻的数据
Mock.mock("/api/add/news", "post", (options) => {
    const body = JSON.parse(options.body);
    console.log(body);
    newsList.push(
        Mock.mock({
            id: "@increment",
            title: body.title,
            content: body.content,
            img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",
            add_time: "@date(yyyy-MM-dd hh:mm:ss)",
        })
    );
    return {
        status: 200,
        message: "添加成功",
        list: newsList,
        total: newsList.length,
    };
});

// 定义删除新闻
Mock.mock("/api/delete/news", "post", (options) => {
    console.log(options);
    const body = JSON.parse(options.body);
    console.log(body);
    const index = newsList.findIndex((item) => {
        return item.id === body.id;
    });
    newsList.splice(index, 1);
    console.log(index);
    return {
        status: 200,
        message: "添加成功",
        list: newsList,
        total: newsList.length,
    };
});
console.log(Mock);

秃头小宝贝@

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端Mockjs数据模拟

1.安装mockjs(本案例完整代码在最下方)通过指令npm install mockjs安装mock ,之后在src文件夹下创建一个mock文件夹,再在mock文件夹下创建一个index.js文件之后接着在main.js文件中引入mock之后就可以在mock文件下的index.js文件中模拟数据了1.首先我们需要在mock下的index.js文件中引入mockimport Mock from "mockjs";2.接着在此处我们模拟了一个新闻列表数据 ,该数据是..
复制链接

扫一扫