本地mock的使用

目录

本地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();
    })
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在引用中,用户提到了使用 Vue/cli 3.0 版本的脚手架进行项目开发时,可以看到该版本的脚手架在项目结构上进行了精简,看上去不再那么繁琐。在接下来的步骤中,用户将进行 mock 数据的配置。而在引用中,用户提到了自己在学习 Vue 并开发一个项目时,需要处理 mock 数据的情况。由于用户所使用的是 Vue/cli 3.0 版本,与 2.0 版本的使用有一些不同。因此,用户希望能够了解如何在 Vue 3 中进行本地的 mock 数据处理。 根据用户提供的引用内容,我们可以得出以下结论:用户在学习 Vue,并使用 Vue/cli 3.0 版本进行项目开发时,遇到了需要处理 mock 数据的情况。对于在 Vue/cli 3.0 版本中进行本地 mock 数据的处理,我们可以提供以下步骤: 1. 首先,在 Vue/cli 3.0 版本中,可以使用 `vue-cli-service` 命令来启动本地服务器并进行开发。在项目的根目录下,可以使用以下命令来启动本地服务器: ``` vue-cli-service serve ``` 2. 接下来,可以在项目的根目录下创建一个 `mock` 文件夹,用于存放 mock 数据的文件。 3. 在 `mock` 文件夹中,创建一个名为 `home.json` 的文件,用于模拟首页数据的接口。可以根据实际需求,在 `home.json` 文件中编写模拟的数据。 4. 在 `vue.config.js` 文件中进行配置,以使项目能够正确地访问 mock 数据。在 `vue.config.js` 文件中,可以添加以下代码: ```javascript module.exports = { devServer: { before: function(app) { app.get('/mock/home.json', function(req, res) { res.json(require('./mock/home.json')); }); } } }; ``` 5. 最后,在浏览器中访问 `http://localhost:8080/mock/home.json`,即可获取到模拟的首页数据。 请注意,以上步骤仅适用于 Vue/cli 3.0 版本,并假设用户已经安装了 Vue/cli 3.0。如果用户使用的是其他版本的 Vue/cli 或有其他特殊需求,请提供更多详细信息以便我们给出更准确的回答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue CLI 3.0脚手架如何在本地配置mock数据](https://blog.csdn.net/weixin_33795806/article/details/87993191)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值