vue简单使用mock模拟后台数据

最新推荐文章于 2024-02-19 16:19:47 发布

天空影

最新推荐文章于 2024-02-19 16:19:47 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：大前端-vue 文章标签： mock vue

本文链接：https://blog.youkuaiyun.com/jx950915/article/details/81942865

大前端-vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用MockJS为前端项目提供模拟数据。通过安装MockJS并配置Vue项目，实现了一个简单的请求响应模拟示例。文章包括安装步骤、代码示例及如何在Vue组件中调用模拟接口。

下载

npm install mockjs --save-dev

使用

1、新建mock.js

import Mock from 'mockjs'

Mock.mock("/getTest",{
    "name1|1-3":  'a',
    "name2|2": 'b',
});

2、新建vue文件

<template>
    <div>
        <button type="button" @click="getTest">mock一下</button>
    </div>
</template>
<script>
    export default {

        methods: {
            getTest() {
                this.$axios.get("/getTest").then(function (res) {
                    console.log(res.data);
                });
            }
        }
    };

</script>