1.列表接口
2.main.js 引入axios
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8082'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
npm install --save axios
3.list页面
<template>
<div>
<table>
<tr v-for="customer in customers">
<td>{{customer.id}}</td>
<td>{{customer.name}}</td>
<td>{{customer.age}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
customers:[]
}
},
created(){
this.$axios
.post('/list', {
})
.then(successResponse => {
this.customers=successResponse.data;
})
.catch(failResponse => {})
}
}
</script>
4.路由配置
import Vue from 'vue'
import Router from 'vue-router'
import list from '@/components/list'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/list',
name: 'list',
component: list
}
]
})
5.效果