Nuxt服务端渲染-接口服务端渲染

心已赠人 2022-10-17 05:59 232阅读 0赞

在server里面启动server-api服务后再起一个命令行窗口，再npm run dev启动项目服务

先安装axios

cnpm install axios --save

<template>
      <section class="content-page">
        
        <b-carousel
            :interval="3000"
            img-width="1024"
            img-height="480"
            fade
            indicators
            style="text-shadow: 1px 1px 2px #333"
          >
          <b-carousel-slide  
            :caption="it.caption"  
            :text="it.text"  
            :img-src="it.imgSrc" 
            v-for="(it,index) in sliders"
            :key="index"
          ></b-carousel-slide>
        </b-carousel>
        
        <h1 class="index-title" align="center">Damiao Jokes <span class="badge badge-secondary">New</span></h1>
    
        
        <div class="card-info">
          <b-card-group v-for="(it,index) in jokes" :key="index">
            <b-card >
              <b-card-text>{
       { it }}</b-card-text>
            </b-card>
          </b-card-group>
        </div>
      </section>
    </template>
    
    <script>
    // 第一步引入 axios
    import axios from 'axios'
    export default {
        name: 'Index',
        data(){
            return {
              jokes: [],
              sliders: [
                { caption: 'Title1', text: 'subTitle1', imgSrc: '/images/slider_01.jpg' },
                { caption: 'Title2', text: 'subTitle2', imgSrc: '/images/slider_02.jpg' },
                { caption: 'Title3', text: 'subTitle3', imgSrc: '/images/slider_03.jpg' }
              ]
            }
        },
        async asyncData(context){
          const res = await axios.get('http://localhost:3002/jokes?_limit=20')
          let jokes = res.data.map(v => v.joke)
          return { jokes }
        },
        components:{
    
        }
    }
    </script>
    
    <style scoped>
      .content-page{ margin: 0; width: 100%; }
      .index-title { height: 80px; line-height: 80px; }
      .card-info { width: 92%; margin: 0 auto; margin-bottom: 30px; }
    </style>