写此记录时vue脚手架的webpack是3.6.0 
此文章方法亦可用于vue-cli3,直接在vue.config.js里面添加

本记录使用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试验一下

在vue-cli下读取模拟数据请求服务器的更多相关文章

  1. 【vue】生成接口模拟数据

    目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...

  2. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  3. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  4. shell下读取文件数据

    参考:https://www.imzcy.cn/1553.html while和for对文件的读取是有区别的: 1. for对文件的读是按字符串的方式进行的,遇到空格什么后,再读取的数据就会换行显示 ...

  5. vue 使用mock来模拟数据

    首先,需要安装mock npm install mockjs --save-dev 在main.js中引入mock mock文件写法如下: const Mock = require('mockjs') ...

  6. php模拟数据请求

    php:模拟后台接受数据的步骤<?php> 1.连接数据库 $host="localhost"; $uname="root"; $upwd=&quo ...

  7. vue+mock.js+element-ui模拟数据搞定分页

    效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...

  8. mockjs模拟数据请求

    一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...

  9. Flume下读取kafka数据后再打把数据输出到kafka,利用拦截器解决topic覆盖问题

    1:如果在一个Flume Agent中同时使用Kafka Source和Kafka Sink来处理events,便会遇到Kafka Topic覆盖问题,具体表现为,Kafka Source可以正常从指 ...

随机推荐

  1. Fragment 使用总结

    1. 要深刻理解Fragment 的生命周期 2. Fragment.getActivity()并不能保证非空. 3.如果在Fragment中有异步的回调, 特别要注意此时Fragment 是否还at ...

  2. 20135337朱荟潼 Linux第五周学习总结——扒开系统调用的三层皮(下)

    朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC 1000029000 一.学习内容 (一 ...

  3. Visual Studio的安装应用及单元测试

    新建项目—Visual C#—类库 一.Visual Studio的安装 这可能是自己安装软件用的的最长时间的一次 ..刚下载完安装的时候灰常的尴尬,因为2013版本和2015的版本都是不支持在win ...

  4. Spring源码解析二:IOC容器初始化过程详解

    IOC容器初始化分为三个步骤,分别是: 1.Resource定位,即BeanDefinition的资源定位. 2.BeanDefinition的载入 3.向IOC容器注册BeanDefinition ...

  5. 如何用Qt自动拷贝exe依赖的dll

    QT生成的.exe文件不能运行的解决办法 之前的数独项目的GUI,当我的Qt项目生成exe时,由于缺少了相关的依赖dll文件,打开会一直报缺少依赖文件的错: 然后一开始我到安装的Qt文件夹里把这些有Q ...

  6. Python爬虫:抓取新浪新闻数据

    案例一 抓取对象: 新浪国内新闻(http://news.sina.com.cn/china/),该列表中的标题名称.时间.链接. 完整代码: from bs4 import BeautifulSou ...

  7. window.open() & iframe

    window.open() & iframe https://www.w3schools.com/jsref/met_win_open.asp window.open(URL, name, s ...

  8. (转)JDK1.8新特性Lambda表达式

    https://www.cnblogs.com/franson-2016/p/5593080.html Predicate predicate接收一个变量,并返回一个boolean值,predicat ...

  9. 51nod 1206 && hdu 1828 Picture (扫描线+离散化+线段树 矩阵周长并)

    1206 Picture  题目来源: IOI 1998 基准时间限制:2 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 给出平面上的N个矩形(矩形的边平行于X轴 ...

  10. MT【78】几张动态图