vue中怎么获取object中的数据

vue中怎么获取object中的数据

在vue项目中, mock数据可以使用 node 的 express模块搭建服务

1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件

2.在build目录下的 dev-server.js的文件作如下更改

复制代码

var appData = require('../test/data.json')

// 获取数据

var apiRoutes = express.Router()

//get请求

apiRoutes.get('/seller',function(req,res){

res.send({

appData

})

})

app.use('/api',apiRoutes)

复制代码

3. 在.vue做请求, 就可以成功获取data.json的数据了, 下面使用 axios 进行请求

复制代码

axios.get('/api/seller',{

params: {

ID: 12345

}

})

.then(function (response) {

console.log(response)

})

.catch(function (error) {

console.log(error)

})

复制代码

请求成功, 获取到数据

vue两个静态js获取信息 *** 作如下。

1、配置build/webpack.dev.conf.js。

2、新建db.json。

3、通过localhost：8081/api/getNewsList访问。

4、页面中获取的方式。

方法是利用vue-resource组件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具体举例如下：

1、导入vue-resource

<script src="js/vue.js"></script>

<script src="js/vue-resource.js"></script>

2、基于全局Vue对象使用http

// 通过someUrl获取后台数据，成功后执行then的代码

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback)

3、在一个Vue实例内使用$http

// $http是在vue的局部范围内的实例

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback)

说明：

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

---