Vue模拟api数据

Vue模拟api数据

1.安装vue-resource ：
①在项目文件夹下执行npm install vue-resource命令

②在main.js文件中注册使用

 import VueResource from 'vue-resource'
	Vue.use(VueResource)

2.在static文件夹下创建mock文件夹，再在mock文件夹下创建json文件，如下图：

Master.json文件

 {
  "master": [
    {
      "name": "张三",
      "store": ["仓库1","仓库2", "仓库3"]
    },
    {
      "name": "李四",
      "store": ["仓库4", "仓库5", "仓库6"]
    },
    {
      "name": "赵五",
      "store": ["仓库7", "仓库8", "仓库9"]
    }
  ]
}

3.在build文件夹下找到webpack.dev.conf.js文件

①在webpack.dev.conf.js里面配置相关信息

// 读取本地json数据
const express = require('express')
const app = express()//请求server
const masterData = require('../static/mock/Master.json') // 加载本地数据文件
const apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据

②再在此文件(webpack.dev.conf.js)下的devServer中配置如下信息

// 进行后台数据模拟
    before(app) {
      app.get('/api/master', (req, res) => {
        res.json({
          errno: 0,
          data: masterData
        })
      })  // 接口返回json数据，上面配置的数据seller就赋值给data请求后调用
    }

4.输入npm run dev命令启动项目，成功如下

l浏览器中输入http://localhost:8081/api/master查看是否有数据，如果有就表示成功。成功界面如下

5. 如何在控制台打印，可以直接在页面HelloWorld.vue写入以下代码

created () {
    this.$http.get('http://localhost:8081/api/master').then((response) => {
      console.log(response)
    })
  }

访问http://localhost:8081，成功如下