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

Myth丶恋晨 2021-11-05 07:24 198阅读 0赞

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

## 导读 ##

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

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

接下来呢，我们要设置下样式，宽度我们需要给他设置成`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`的效果，  
基本完成；