【学习笔记】【领券联盟】前端(Nuxt.js)——7.渲染axios请求的首页菜单数据

引子

所谓前后端分离就是前端从后端请求到数据后并将数据渲染到页面上供用户交互和查看。下面我们就看看如何请求后端的首页菜单栏数据，并渲染到页面上。

1 封装首页菜单栏数据方法

通常获取首页菜单栏数据就是调用一个接口就行了，那么最好把这个调用接口的方法封装起来，做好解耦合操作。那么就在utils/api.js中封装该函数如下：

import request from './http'; // 应该是将http整体导入，用request命名

// 抽取出公共部分链接
export const baseUrl = "https://api.sunofbeach.net/shop/";

export default {
  // 获取类别的方法
  getCategories(){
    // https://api.sunofbeach.net/shop/api/discovery/categories 原始视频中的链接无法访问，去掉api就可以了
    return request.requestGet(baseUrl +"discovery/categories");
  },
  // 获取分类内容
  getCategoriesContent(materialId, page){
    return request.requestGet(baseUrl + "discovery/" + materialId + "/" + page)
  },
  // 获取首页菜单栏菜单项方法
  getRecommendCategories(){
    return request.requestGet(baseUrl + "recommend/categories")
  }
}

然后依然在pages/index.vue页面上进行测试，页面代码进行修改如下：

<template>
  <div class="container">
    <div class="center-box">
      <div>
        <div v-for="(item, index) in categories" :key="index">
          <span>{{item.favorites_title}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import api from "../utils/api";

export default {
  // vue生命周期函数
  asyncData(){
    console.log("test load data..");
    return api.getRecommendCategories().then(result =>{
      // 数据返回状态码为10000表示获取数据成功
      if (result.code === 10000){
        return {
          categories: result.data
        }
      }else {
        // TODO:处理错误
      }
    })
  }
}
</script>

<style>

</style>

保存，运行，刷新浏览器后,查看浏览器得到如下结果：

那么说明已经获取成功了。

2.调整样式

页面能够显示数据了，那么接下来就是需要调整样式了。在刷新页面的时候，细心的你可能看到了顶部一个页面加载的进度条，但是颜色比较难看，我们可以在nuxt.config.js中进行修改，添加/修改如下内容：

  loading:{color:'#c9302c'  },

需要注意layout目录下的default.vue中定义的css在子页面中是可以直接用的。 修改layout/default.vue中的代码如下：

*,  *:before,  *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

去除盒子默认的padding。修改pages/index.vue整体代码如下：

<template>
  <div class="container">
    <div class="center-box">
      <div class="recommend-category-box">
        <ul class="clear-fix" >
          <li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item, index) in categories" :key="index">
            {{item.favorites_title}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
 import api from "../utils/api";

export default {
  // vue生命周期函数
  asyncData(){
    console.log("test load data..");
    return api.gerRecommendCategories().then(result =>{
      // 数据返回状态码为10000表示获取数据成功
      if (result.code === 10000){
        return {
          categories: result.data
        }
      }else {
        // TODO:处理错误
      }
    })
  }
}
</script>

<style>
  .recommend-menu-active{
    border-bottom: #c9302c 2px solid;
    color: #c9302c!important;
  }
  .recommend-category-box li{
    font-size: 16px;
    margin-left: 20px;
    margin-right: 20px;
    color: #8c8c8c;
    cursor: pointer;
  }
  .recommend-category-box{
    height: 60px;
    line-height: 58px;
    margin-top: 30px;
    background: white;
    box-shadow: 0 5px 10px #d4d4d4;
    margin-bottom: 20px;
  }
.recommend-category-box ul{
  list-style: none;
}
</style>

页面效果如下：