一 後端接口
web層
@CrossOrigin
@Api(description = "講師")
@RestController
@RequestMapping("/api/edu/teacher")
public class ApiTeacherController {
@Autowired
private TeacherService teacherService;
@ApiOperation(value = "所有講師列表")
@GetMapping("list")
public R listAll() {
List<Teacher> list = teacherService.list();
return R.ok().data("items", list).message("獲取講師列表成功");
}
}
二 獲取數據
1 前端api
import request from '~/utils/request'
export default{
// 獲得講師列表
getList() {
return request({
url: '/api/edu/teacher/list',
method: 'get'
})
}
}
2 列表視圖組件
<template>
<div>
講師列表
<div v-for="(item,index) in items" :key="index">
<a :href="'teacher/'+item.id">{
{ item.name }}</a>
</div>
</div>
</template>
<script>
import teacherApi from '~/api/teacher'
export default {
// 異步獲取數據
asyncData() {
return teacherApi.getList().then(response => {
return {
items: response.data.items
}
})
},
data() {
return {
test: 'test' // 這裏的數據最後會和asyncData中的數據定義合併
}
}
}
</script>
asyncData 方法
Nuxt.js 擴展了 Vue.js,增加了一個叫 asyncData 的方法, asyncData 方法會在組件(限於頁面組件)每次加載 之前被調用。它可以在服務端或路由更新之前被調用。 你可以利用 asyncData 方法來獲取數據,Nuxt.js 會將 asyncData 返回的數據融合組件 data 方法 返回的數據一併返回給當前組件。
注意:
由於 asyncData 方法是在組件 初始化前被調用的,所以在方法內是沒有辦法通過 this 來引用組件的實例對象。
查看開發者工具的“Vue”選項卡
三 異步數據和同步數據
1 異步調用
teacherApi.getList()後面的代碼和這行代碼異步執行的
asyncData() {
console.log('asyncData')
const response = teacherApi.getList()
console.log(response)
return {
items: response.data.items // 報錯:response未定義
}
},
2 同步調用
使用 async 和 await 關鍵字
teacherApi.getList()後面的代碼和這行代碼同步執行
async asyncData() {
console.log('asyncData')
const response = await teacherApi.getList()
console.log(response)
return {
items: response.data.items
}
},
四 渲染講師列表
1 無數據提示
<!-- /無數據提示 開始-->
<section v-if="items.length===0" class="no-data-wrap">
<em class="icon30 no-data-ico"> </em>
<span class="c-666 fsize14 ml10 vam">沒有相關數據,小編正在努力整理中...</span>
</section>
<!-- /無數據提示 結束-->
2 數據列表
<!-- /數據列表 開始-->
<article v-if="items.length>0" class="i-teacher-list">
<ul class="of">
<li v-for="(item, index) in items" :key="index">
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a :title="item.name" :href="'/teacher/'+item.id">
<img :src="item.avatar" :alt="item.name" width="142">
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a :title="item.name" :href="'/teacher/'+item.id" class="fsize18 c-666">{
{ item.name }}</a>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999" >{
{ item.intro }}</span>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">{
{ item.career }}</p>
</div>
</section>
</li>
</ul>
<div class="clear"/>
</article>
<!-- /數據列表 結束-->