VUE——本地mock数据并请求

最新推荐文章于 2025-03-19 11:22:59 发布

原创最新推荐文章于 2025-03-19 11:22:59 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍如何在src统计目录下创建data.json文件，并利用webpack.dev.conf.js配置本地API，实现与前端的交互，包括数据加载、接口定义及访问方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在src统计目录下新建data.json文件

{
  "clock":{
    "normal":{
      "rule":[
        {
          "id":1,
          "onWorkTime":"09:00",
          "afterWorkTime":"12:00"
        },
        {
          "id":2,
          "onWorkTime":"13:00",
          "afterWorkTime":"18:00"
        }
      ],
      "data":{
        "onWorkTime":1533540512000,
        "afterWorkTime":1533550140000
      }
    },
    "outer":{
      "records":[
        {
          "id":1,
          "clockTime":1533540512000,
          "address":"上海市新华路128号",
          "note":"外出拜访客户"
        }
      ]
    }
  }
}

在build文件夹的webpack.dev.conf.js文件中 const portfinder = require("portfinder");下面声明并定义API

const express = require("express");
const app = express();
const appData = require("../data.json"); // 加载本地json文件
const clock = appData.clock; // 获取对应本地数据
const apiRoutes = express.Router();
app.use("/api", apiRoutes);

在devServer里面添加：

 before(app) {
      app.get("/api/clock", (reg, res) => {
        res.json({
          code: 0,
          data: clock
        }); // 接口返回json数据，上面配置的数据seller就复制给data请求后调用
      });
    }

即可通过以下访问：

 this.$axios.get("/api/clock").then(res => {
        console.log(res);
      });