nuxt.js 学习与记录

1、代理转发

nuxt.config.js文件中添加：  先npm install @nuxtjs/axios --save 安装插件

export default {
     modules: [
        '@nuxtjs/axios',
    ], 
    server: {
        port: 8001, // default: 3000 设置端口，
    },
    axios: {
        proxy: true, // 需要的，不设置请求无法转发
    },
    proxy: {
        '/ttt': {
            target: 'http://127.0.0.1:8088', // 代理转发的对应地址
            changeOrigin: true
        }
    }      
}

2、服务端渲染  服务端数据交互

asyncData 方法

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将

asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象

 

<template>
    <div>
        <p>{{data}}</p>
        <p>{{message}}</p>
    </div>
</template>

 

<script>
import axios from  'axios';
export default {
    data() {
        return {
            data: '',
            message: ''
        }
    },
    // asyncData 方法
    async asyncData() {
        let {status, data} = await axios.get('http://127.0.0.1:8088/ttt');
        if(status === 200) {
            console.log(2222, data)
            return {data}
        }
    },
    // fetch 方法
    async fetch() {
        this.message = await fetch('http://127.0.0.1:8088/ttt')
        .then(res => {
            return res.ok ? res.json() : res.status
        }).then(response => {
            console.log(response, 666)
            return response
        })
    },
}
</script>