vue项目读取服务器数据,在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试验一下

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

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

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

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

php模拟数据请求

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

vue&plus;mock&period;js&plus;element-ui模拟数据搞定分页

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