引子
页面架构已经设计好了,下面就是获取发现页的数据和展示了。
1. 优化布局
代码如下:
<template>
<div class="center-box clear-fix">
<div class="discovery-content-box">
<div class="discovery-left-part float-left">
这是左边
</div>
<div class="discovery-center-part float-left">
这是中间
</div>
<div class="discovery-right-part float-left">
这是右边
</div>
</div>
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
.discovery-content-box{
margin-top: 20px;
}
/** 总宽度1140 **/
.discovery-left-part{
height: 300px;
width: 110px;
background: #c9302c;
margin-right: 10px;
}
.discovery-center-part{
width: 710px;
background: fuchsia;
height: 1000px;
margin-right: 10px;
margin-left: 10px;
}
.discovery-right-part{
height: 500px;
width: 280px;
background: #4d555d;
margin-left: 10px;
}
</style>
2.获取数据并展示
在进行此项之前呢,发现我们都会去判断是否获取成功的状态码为10000,我们可以把这个常量定义在api接口中,然后导出,统一使用,那么就在api.js中增加以下代码:(注意对号入座哟)
// 成功获取api数据的常量标记
const SUCCESS_CODE = 10000;
export default {
SUCCESS_CODE,
接下来,我们就去修改在各个页面中使用这个魔法数字(代码中没有说明含义的数字)10000了。 pages/discovery/index.vue代码修改如下:
<template>
<div class="center-box clear-fix">
<div class="discovery-content-box">
<div class="discovery-left-part float-left">
<ul>
<li v-for="(item, index) in categoriesList" :key="index" >
<span v-text="item.title" ></span>
</li>
</ul>
</div>
<div class="discovery-center-part float-left">
这是中间
</div>
<div class="discovery-right-part float-left">
这是右边
</div>
</div>
</div>
</template>
<script>
import api from "../../utils/api";
export default {
name: "index",
async asyncData(){
let categoriesResult = await api.getCategories();
if (categoriesResult.code === api.SUCCESS_CODE) {
return {
categoriesList: categoriesResult.data
}
}
},
}
</script>
<style scoped>
.discovery-content-box{
margin-top: 20px;
}
/** 总宽度1140 **/
.discovery-left-part{
height: 300px;
width: 110px;
background: #c9302c;
margin-right: 10px;
}
.discovery-center-part{
width: 710px;
background: fuchsia;
height: 1000px;
margin-right: 10px;
margin-left: 10px;
}
.discovery-right-part{
height: 500px;
width: 280px;
background: #4d555d;
margin-left: 10px;
}
</style>
结果如下: