本地mock的使用

最新推荐文章于 2023-09-15 18:17:56 发布

DD小兄弟

最新推荐文章于 2023-09-15 18:17:56 发布

阅读量489

点赞数

分类专栏：本地mock的使用文章标签：前端 spring junit

本文链接：https://blog.csdn.net/qq_64757356/article/details/127235619

版权

本地mock的使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本地mock的使用

1、下载mockjs

2、src下新建api>mockData>home.js 并写入

3、api下创建mock.js 引入mock

4、main.js下引入mock.js

5、下载axios

6、需要的界面引入

本地mock的使用

1、下载mockjs

npm install mockjs -S

2、src下新建api>mockData>home.js 并写入

export default {
    getHomeData: () => {
        return {
            code: 200,
            data: {
                tableData: [
                    {
                        name: 'oppo',
                        todayBuy: 500,
                        monthBuy: 3500,
                        totalBuy: 22000
                      },
                      {
                        name: 'vivo',
                        todayBuy: 300,
                        monthBuy: 2200,
                        totalBuy: 24000
                      },
                      {
                        name: '苹果',
                        todayBuy: 800,
                        monthBuy: 4500,
                        totalBuy: 65000
                      },
                      {
                        name: '小米',
                        todayBuy: 1200,
                        monthBuy: 6500,
                        totalBuy: 45000
                      },
                      {
                        name: '三星',
                        todayBuy: 300,
                        monthBuy: 2000,
                        totalBuy: 34000
                      },
                      {
                        name: '魅族',
                        todayBuy: 350,
                        monthBuy: 3000,
                        totalBuy: 22000
                      }
                ]
            }
        }
    }
}

3、api下创建mock.js 引入mock

import Mock from 'mockjs'
import homeApi from './mockData/home'
//拦截请求
Mock.mock('/home/getData',homeApi.getHomeData)

4、main.js下引入mock.js

import './api/mock.js'

5、下载axios

npm install axios -S

6、需要的界面引入

import { defineComponent,onMounted,ref } from "vue"
import axios from "axios";
export default defineComponent({
  setup() {
     let tableData = ref([]);//直接导入数据会不会成功需要引入ref初始化
     const getTableList = async() => {
      await axios.get("/home/getData").then((res) => {
        //console.log(res);
        tableData.value = res.data.data.tableData;

      })
    };
    onMounted(() => {
      getTableList();
    })
}