美文网首页
vue2.0 mock数据

vue2.0 mock数据

作者: 噫那里有条咸鱼 | 来源:发表于2018-01-10 15:48 被阅读163次

最近在学习vue2.0时需要mock本地数据,找到的教程都是在build下的 dev-server.js 配置相应的代码,然而vue2.0直接删掉了这个文件,这就很尴尬了。

解决方案是在同目录下的 webpack.dev.conf.js,具体的配置如下:
1.查找 const portfinder = require('portfinder'),在后面添加如下代码:

const express = require('express')
const app = express()
const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
const apiRouter = express.Router()
app.use('/api',apiRouter)
image.png

2.然后查找 devServer,在里面添加你的接口路由:

before(app) {
      app.get('/api/seller',(req, res) => {
        res.json({
          errno: 0,
          data: ratings
        });
      });
      app.get('/api/goods',(req, res) => {
        res.json({
          errno: 0,
          data: ratings
        });
      });
      app.get('/api/ratings',(req, res) => {
        res.json({
          errno: 0,
          data: ratings
        });
      });
    },
image.png

3.访问本地接口:http://localhost:8080/api/goods
这里用到了jsonview这个chrome插件,方便查看模拟的json数据

image.png

相关文章

  • vue2.0 mock数据

    最近在学习vue2.0时需要mock本地数据,找到的教程都是在build下的 dev-server.js 配置相应...

  • mock数据

    Vue中的mock数据指的是什么? mock数据指的模拟数据,mock中文翻译愚弄,嘲笑。 实现mock数据如下:...

  • Vue2.0 spa 项目中mock数据

    我是通过学习滴滴大神黄轶提供的模仿饿了么项目来学习vue构建spa项目的,所以以饿了么数据举例(在此特别感谢大神们...

  • 使用 Mockjs 模拟数据

    Mock 数据 Mock 在 vue 中的使用 使用npm下载mock 2.使用 mock 在 mock 文件夹下...

  • mock.js深入

    1.Mock.mock( template )根据数据模板生成模拟数据。(具体语法见mock.js入门) 2.Mo...

  • 利用node.js来mock数据

    1.什么是mock数据? 模拟后端数据 2.mock数据解决的问题 使用mock数据可以在后端开发人员尚未完成接口...

  • Easy Mock&Ajax请求数据

    mock网站https://www.easy-mock.com/login mock数据 axios 封装了所有的...

  • Contacts(TableViewController)报错总

    1. mock网络问题 问题:mock网络的JSON数据无法获取 提示:mock请求出错:mock....777...

  • mock

    mock使用优势:前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发 1,安装mock依...

  • mockjs-async 修改Mock.mock方法使支持Pro

    Mock.js - async version 仅修改Mock.mock方法使支持Promise异步数据替换 安装...

网友评论

      本文标题:vue2.0 mock数据

      本文链接:https://www.haomeiwen.com/subject/geponxtx.html