在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可以正常从指 ...
随机推荐
- 《Linux内核设计与实现》读书笔记——第五章
<Linux内核设计与实现>读书笔记--第五章 标签(空格分隔): 20135321余佳源 第五章 系统调用 操作系统中,内核提供了用户进程与内核进行交互的一组接口.这些接口让应用程序受限 ...
- C/C+ 感触
1. C/C++语言开发的首选利器- C++Test 以前在windows平台下的开发,使用的框架主要是MFC,以及console工程(基于win32SDK),属于纯C/C++ ...
- 解决eclipse中mybatis的xml配置文件无代码提示问题
https://blog.csdn.net/IRainReally/article/details/81743506
- Gerrit 配置同步到多个仓库
1.修改replication.config文件 [remote "xxx"] projects = Yilule.Core.Service #aliyun仓库 url = git ...
- 改善C++ 程序的150个建议学习之建议7:时刻提防内存溢出
作为一个程序员,对内存溢出问题肯定不陌生,它已经是软件开发历史上存在了近40年的大难题.在内存空间中,当要表示的数据超出了计算机为该数据分配的空 间范围时,就产生了溢出,而溢出的多余数据则可以作为指令 ...
- 远程显示(操作) 服务器 GUI 程序(图形化界面) (基于 X11 Forwarding + Centos + MobaXterm)
在做 数据分析(数据挖掘 或 机器学习)的时候,我们经常需要绘制一些统计相关的图表,这些统计.绘图的程序常常是跑在服务器上的,可是服务器出于性能和效率的考虑,通常都是没有安装图形化界面的,于是这些统计 ...
- Ubuntu17安装MySql5.7
安装: sudo apt-get update sudo apt-get install mysql-server 配置远程访问: vi /etc/mysql/mysql.conf.d/mysqld. ...
- sqlserver2017安装及连接过程中发现的问题
1.SSMS安装报错,如下图 根据搜索资料发现是防火墙的问题,关闭防火墙就行了. 2.连接用户时报错 这个是因为远程连接相关问题. 首先打开服务器远程连接: 其次点击: SqlServer配置管理器- ...
- [代码]--SQLServer数据库的一些全局变量
select APP_NAME ( ) as w --当前会话的应用程序 select @@IDENTITY --返回最后插入的标识值 select USER_NAME() --返回用户数据 ...
- Mouse Hunt CodeForces - 1027D(思维 找环)
Medicine faculty of Berland State University has just finished their admission campaign. As usual, a ...