在vue-cli下读取模拟数据请求服务器

写此记录时vue脚手架的webpack是3.6.0

本记录使用vue-resource，先安装:

cnpm install vue-resource --save

在入口js文件中:

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

别忘了事先创建一个用于模拟请求的json文件：

{
    "appData":[
        {"name":"vbyzc","age":"30"},
        {"name":"黄浮驴","age":"30"}
    ]
}

在webpack.dev.conf.js中，找到 const portfinder = require('portfinder') 这一行下面添加:

/*创建一个虚拟api接口服务器*/ 
const express = require('express')
const app = express()
var appData = require('../db.json')
var apiRoutes = express.Router()
/*
查阅了一下资料，发现app.use('/api',apiRoutes)  这句可以不要，直接使用get来设置也可以
路由规则是app.use(path,router)定义的，router代表一个由express.Router()创建的对象，在路由对象中可定义多个路由规则。可是如果我们的路由只有一条规则时，可直接接一个回调作为简写，也可直接使用app.get或app.post方法。
即当一个路径有多个匹配规则时，使用app.use，否则使用相应的app.method(get、post)
*/

然后在devServer中（最下面算了）添加一项：

before(apiRoutes){
        //这里的apiRoutes换成上面的app也可以
        //get对中间件express服务器的router进行配置（粗俗理解是用于注册路由）
        //注册一个名为appData的虚拟路径
        apiRoutes.get('/api/MyappData',(req,res) =>{
            res.json({
                //返回一个对象，appData是上面require导入的一个本地json文件
                data:appData
            })
        })
    }

这样同域名下的虚拟api服务器也建好了,可以直接访问htttp://localhost:端口/api/MyappData

最后，就可以在vue中请求数据了

export default {
  name: 'App',
  data(){
      return {
          apidata :[]
      }
  },
  
  created : function(){
      this.$http.get('/api/MyappData')
      .then((response) => {
          //下面的data，是创建express服务器时创建的对象键名，appData是我们json中的对象键名
          //不像jquery的ajax会自动格式化成json,所以还要调用JSON.parse来转换
          this.apidata = JSON.parse(response.bodyText).data.appData;
          //console.log(JSON.parse(response.bodyText).data);
      },(req) => {
          //我也不知这个干嘛用的
          console.log(req)
      })
  }
}

下回使用axios试验一下

扫描二维码关注公众号，回复： 1078052 查看本文章