写此记录时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. 《Linux内核设计与实现》读书笔记——第五章

    <Linux内核设计与实现>读书笔记--第五章 标签(空格分隔): 20135321余佳源 第五章 系统调用 操作系统中,内核提供了用户进程与内核进行交互的一组接口.这些接口让应用程序受限 ...

  2. C/C+ 感触

    1.       C/C++语言开发的首选利器- C++Test       以前在windows平台下的开发,使用的框架主要是MFC,以及console工程(基于win32SDK),属于纯C/C++ ...

  3. 解决eclipse中mybatis的xml配置文件无代码提示问题

    https://blog.csdn.net/IRainReally/article/details/81743506

  4. Gerrit 配置同步到多个仓库

    1.修改replication.config文件 [remote "xxx"] projects = Yilule.Core.Service #aliyun仓库 url = git ...

  5. 改善C++ 程序的150个建议学习之建议7:时刻提防内存溢出

    作为一个程序员,对内存溢出问题肯定不陌生,它已经是软件开发历史上存在了近40年的大难题.在内存空间中,当要表示的数据超出了计算机为该数据分配的空 间范围时,就产生了溢出,而溢出的多余数据则可以作为指令 ...

  6. 远程显示(操作) 服务器 GUI 程序(图形化界面) (基于 X11 Forwarding + Centos + MobaXterm)

    在做 数据分析(数据挖掘 或 机器学习)的时候,我们经常需要绘制一些统计相关的图表,这些统计.绘图的程序常常是跑在服务器上的,可是服务器出于性能和效率的考虑,通常都是没有安装图形化界面的,于是这些统计 ...

  7. Ubuntu17安装MySql5.7

    安装: sudo apt-get update sudo apt-get install mysql-server 配置远程访问: vi /etc/mysql/mysql.conf.d/mysqld. ...

  8. sqlserver2017安装及连接过程中发现的问题

    1.SSMS安装报错,如下图 根据搜索资料发现是防火墙的问题,关闭防火墙就行了. 2.连接用户时报错 这个是因为远程连接相关问题. 首先打开服务器远程连接: 其次点击: SqlServer配置管理器- ...

  9. [代码]--SQLServer数据库的一些全局变量

    select APP_NAME ( ) as w --当前会话的应用程序 select @@IDENTITY   --返回最后插入的标识值 select USER_NAME()    --返回用户数据 ...

  10. Mouse Hunt CodeForces - 1027D(思维 找环)

    Medicine faculty of Berland State University has just finished their admission campaign. As usual, a ...