nuxt 项目开发之子页 jokes 查询页面UI模块分析

nuxt 项目开发 - 首页 “笑话” jokes 列表组件开发

导读

我们接下来继续开发首页的列表的内容，我们首先来分析下首页的jokes列表，这个jokes列表项是异步请求我们的json-server api 接口服务渲染出来数据，且使用card组件包裹起来的，
而且我们可以看一下当前页面的源码，我们往下拉，会发现整个列表数据都会被渲染响应到浏览器页面中；

好，我们现在来进行开发，首页我们来使用一些静态数据来实现整个列表展示，我们先来写一些基本的结构，
我们可以使用<b-card></b-card>来作为盒子的外框，使用<b-card-text>text</b-card-text>，作为我们的jokes文字信息
展示；

   <div class="card-info">

     <!-- deck 默认自动排列 -->
      <b-card-group deck>
        <b-card>
          <b-card-text>text</b-card-text>
        </b-card>
      </b-card-group>

      <!-- 由于是服务端渲染，不需要加载状态 -->
      <!-- <b-spinner label="Spinning" class="spinner-box" variant="info" v-else></b-spinner> -->

    </div>

接下来呢，我们要设置下样式，宽度我们需要给他设置成92%，边距设置成两边对齐，底部有30像素的边距；

.card-info{
    width: 92%; margin: 0 auto; margin-bottom: 30px;
}

基本的样式已经可以展现出来了，下一步呢，我们需要使用api数据渲染成列表，我们可以先在data中梳理好需要的属性和属性值：

    
    export default {
        data(){
            return {
                jakes: [
                    'joke1' , 'joke2', 'joke3', 'joke4', 'joke5', 'joke6'
                ]
            }
        }
    }

接下来我们来使用v-for来遍历生成 <b-card> , 然后把我们的joke内容遍历到<b-card-text>组件标签中；

    <b-card-group deck v-if="jokes.length > 0">
        <b-card v-for="(it,index) in jokes" :key="index">
          <b-card-text>{{ it }}</b-card-text>
        </b-card>
      </b-card-group>

好，现在呢，我可以编写api接口请求的逻辑，我们首先在created()中请求我们的jokes列表，逻辑如下：

async created(){
    const res = await axios.get('http://localhost:3002/jokes?_limit=20')
    this.jokes = res.data.map(v => v.joke)
},

我们来查看下这个页面的网页源代码，滚动条拉到最下面，我们就会发现源代码中并没有列表的存在，为什么呢？因为我们只在客户端渲染，
并没有使用服务端ssr渲染；所以在响应的html内容中并没有找到我们的列表数据；nuxt 给我们提供了一个生命周期方法叫做asyncData，
它会在，页面渲染加载之前执行，它的参数就是我们当前的上下文对象，返回的对象数据可以覆盖data里面的数据；

async asyncData(context){
    const res = await axios.get('http://localhost:3002/jokes?_limit=20')
    let jokes = res.data.map(v => v.joke)
    return { jokes }
},

刷新页面，我们继续查看我们的页面的源代码，我们会发现，我们的源代码中出现很多列表数据，就说明我们的ssr的效果，
基本完成；