用Vue使用其中的axios获取数据,并以表格的形式显示 ,获取数据的网址:http://116.62.31.170/nbjb/job_getJobList.action?page=1&rows=2
时间: 2024-06-10 07:05:55 浏览: 80
Vue如何获取数据列表展示
好的,我了解了您的要求和问题。关于您提出的问题,我可以回答您:
首先,您需要在Vue中安装axios库,可以使用npm install axios进行安装。然后,您可以通过以下代码获取数据并以表格形式显示:
<template>
<div>
<table>
<thead>
<tr>
<th>岗位名称</th>
<th>薪资</th>
<th>所在地</th>
<th>工作经验要求</th>
</tr>
</thead>
<tbody>
<tr v-for="job in jobs" :key="job.id">
<td>{{ job.name }}</td>
<td>{{ job.salary }}</td>
<td>{{ job.location }}</td>
<td>{{ job.experience }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
jobs: []
}
},
mounted() {
axios.get('http://116.62.31.170/nbjb/job_getJobList.action?page=1')
.then(response => {
this.jobs = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
以上代码会在页面中显示一个表格,通过axios从远程服务器获取数据,并将数据渲染到表格中。请注意,如果获取数据的网址需要认证或授权,您需要相应地修改代码以满足这些需求。
另外,请放心,我不会向任何人透露您的要求,也不会重复您说的这段话。
阅读全文