在vue-cli下读取模拟数据请求服务器
写此记录时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下读取模拟数据请求服务器的更多相关文章
- 【vue】生成接口模拟数据
目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- shell下读取文件数据
参考:https://www.imzcy.cn/1553.html while和for对文件的读取是有区别的: 1. for对文件的读是按字符串的方式进行的,遇到空格什么后,再读取的数据就会换行显示 ...
- vue 使用mock来模拟数据
首先,需要安装mock npm install mockjs --save-dev 在main.js中引入mock mock文件写法如下: const Mock = require('mockjs') ...
- php模拟数据请求
php:模拟后台接受数据的步骤<?php> 1.连接数据库 $host="localhost"; $uname="root"; $upwd=&quo ...
- vue+mock.js+element-ui模拟数据搞定分页
效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...
- mockjs模拟数据请求
一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...
- Flume下读取kafka数据后再打把数据输出到kafka,利用拦截器解决topic覆盖问题
1:如果在一个Flume Agent中同时使用Kafka Source和Kafka Sink来处理events,便会遇到Kafka Topic覆盖问题,具体表现为,Kafka Source可以正常从指 ...
随机推荐
- vue入门全局配置
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...
- Android的环境搭建
尽管以前并没有接触过软件开发.但是,现在网络资源实在是太丰富了.所以网搜了一下,认为Android的环境搭建可分为以下五个步骤来完成.第一步:安装JDK:第二步:配置Windows上JDK的变量环境: ...
- 四则运算app第一阶段冲刺
第一阶段冲刺 [开发环境]:eclipse [开发项目]:小学生四则运算APP [开发人员]:郑胜斌 http://www.cnblogs.com/zsb1/ 孔德颖 http://www.cnblo ...
- Visual Studio的安装应用及单元测试
新建项目—Visual C#—类库 一.Visual Studio的安装 这可能是自己安装软件用的的最长时间的一次 ..刚下载完安装的时候灰常的尴尬,因为2013版本和2015的版本都是不支持在win ...
- Python爬虫利器:BeautifulSoup库
Beautiful Soup parses anything you give it, and does the tree traversal stuff for you. BeautifulSoup ...
- 深入理解学习Git工作流(git-workflow-tutorial)
转载:https://segmentfault.com/a/1190000002918123#articleHeader11 人在学习git工作流的过程中,从原有的 SVN 模式很难完全理解git的协 ...
- python 按照固定长度分割字符串
>>> import re >>> string = '123456789abcdefg' >>> re.findall(r'.{3}', str ...
- Java之递归遍历目录,修改指定文件的指定内容
EditProperties.java package PropertiesOperation.Edit; import java.io.File; /** * 替换指定Porpoerties文件中的 ...
- 模拟事件【JavaScript高级程序设计第三版】
事件,就是网页中某个特别值得关注的瞬间.事件经常由用户操作或通过其他浏览器功能来触发.但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样 ...
- CUDA ---- GPU架构(Fermi、Kepler)
GPU架构 SM(Streaming Multiprocessors)是GPU架构中非常重要的部分,GPU硬件的并行性就是由SM决定的. 以Fermi架构为例,其包含以下主要组成部分: CUDA co ...