写此记录时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. vue入门全局配置

    全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...

  2. Android的环境搭建

    尽管以前并没有接触过软件开发.但是,现在网络资源实在是太丰富了.所以网搜了一下,认为Android的环境搭建可分为以下五个步骤来完成.第一步:安装JDK:第二步:配置Windows上JDK的变量环境: ...

  3. 四则运算app第一阶段冲刺

    第一阶段冲刺 [开发环境]:eclipse [开发项目]:小学生四则运算APP [开发人员]:郑胜斌 http://www.cnblogs.com/zsb1/ 孔德颖 http://www.cnblo ...

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

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

  5. Python爬虫利器:BeautifulSoup库

    Beautiful Soup parses anything you give it, and does the tree traversal stuff for you. BeautifulSoup ...

  6. 深入理解学习Git工作流(git-workflow-tutorial)

    转载:https://segmentfault.com/a/1190000002918123#articleHeader11 人在学习git工作流的过程中,从原有的 SVN 模式很难完全理解git的协 ...

  7. python 按照固定长度分割字符串

    >>> import re >>> string = '123456789abcdefg' >>> re.findall(r'.{3}', str ...

  8. Java之递归遍历目录,修改指定文件的指定内容

    EditProperties.java package PropertiesOperation.Edit; import java.io.File; /** * 替换指定Porpoerties文件中的 ...

  9. 模拟事件【JavaScript高级程序设计第三版】

    事件,就是网页中某个特别值得关注的瞬间.事件经常由用户操作或通过其他浏览器功能来触发.但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样 ...

  10. CUDA ---- GPU架构(Fermi、Kepler)

    GPU架构 SM(Streaming Multiprocessors)是GPU架构中非常重要的部分,GPU硬件的并行性就是由SM决定的. 以Fermi架构为例,其包含以下主要组成部分: CUDA co ...