码迷,mamicode.com
首页 > 其他好文 > 详细

vue mock(模拟后台数据) 最简单实例——适合小白

时间:2018-08-15 18:35:53      阅读:628      评论:0      收藏:0      [点我收藏+]

标签:技术   http   需要   vue   ofo   inf   引入   小米   com   

开发是前后端分离,不需要等待后台开发。前端自己模拟数据,经本人测试成功。

技术分享图片

我们在根目录新建存放数据的json文件,存放我们的数据data.json

//data.json
{
"status":"0", "result":[ { "productId":"10001", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"mi6.jpg" }, { "productId":"10002", "productName":"小米笔记本", "prodcutPrice":"3999", "prodcutImg":"note.jpg" }, { "productId":"10003", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"mi6.jpg" } ] }

 

在build文件夹下的webpack.dev.config.js中:

// 引入各个文件
const express = require(‘express‘)
const app = express()
const router = express.Router()
const goodListData = require(‘../data.json‘)
app.use(‘/api‘, router)

//该代码已经存在,我们是加入 before函数
const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    // 在devserver中加入before函数
    before(app) {
      app.get(‘/api/goodList‘, (req, res, next) => {
        res.json(goodListData)
      })
    }
  },
})

  

这样以来我们就可以通过http://localhost:8080/api/goodList访问数据了

技术分享图片

 

vue mock(模拟后台数据) 最简单实例——适合小白

标签:技术   http   需要   vue   ofo   inf   引入   小米   com   

原文地址:https://www.cnblogs.com/ghyes/p/9482999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!