Vue项目api加载json文件

最新推荐文章于 2024-08-21 08:31:25 发布

「已注销」

最新推荐文章于 2024-08-21 08:31:25 发布

阅读量774

点赞数

文章标签： vue java js python javascript

本文链接：https://blog.csdn.net/songtianlun/article/details/107613815

版权

本文介绍了在Vue项目中，如何在后端接口未完成时，通过加载本地JSON文件来模拟API接口调用。详细步骤包括将JSON文件放入项目目录、在webpack.dev.conf.js中声明接口以及使用axios进行接口调用。通过这种方法，可以在开发阶段进行功能搭建和数据测试。

摘要由CSDN通过智能技术生成

概述

在vue项目开发过程中，免不了的要进行api接口的调用，当后端接口未搭建完成时，可以使用json文件模拟数据调用来搭建功能，同时有一些相关数据也是需要本地json文件支持，于是在这里介绍自己实战项目内嵌api接口调用本地数据json的方式

实现方法

第一步：将json放入项目目录

第二步：接口声明

在build/webpack.dev.conf.js文件里添加如下代码：

const express = require('express')
const app = express()
var appData = require('../address.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes) 
 
// 在devServer对象里添加如下代码：
 
before(app) {
      app.get('/api/address', (req, res) => {
        res.json({
          errno: 0,
          data: appData
        })
      })
    }</