Nuxt项目asyncData服务端请求数据渲染-Toy模板网

这篇具有很好参考价值的文章主要介绍了Nuxt项目asyncData服务端请求数据渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

或许有些人会比较喜欢在mounted里去请求数据但在Nuxt项目中是绝对不能这样操作的因为 mounted的特性也说的比较明白了当页面挂载完之后执行但显然 seo只读你页面挂载的内容如果你在这请求那么对不起你请求回来的数据渲染到界面上seo爬虫是看不到的

Nuxt项目请求数据可以在组件的 asyncData 生命周期中执行
这里我们先引入axios

如果你的项目直接选了要 axios 那么就不需要引入了
否则就像我一样在项目终端执行

npm i axios@0.21.0

这里一定要注意 axios版本不能太高
我这里启动一下自己java的项目如果小伙伴没有他接口条件可以直接访问 https://api.erp.yitiaoma.com/api/admin/Auth/GetPassWordEncryptKey
get请求不需要参数
Nuxt项目asyncData服务端请求数据渲染

然后我这里直接实验访问自己的接口
Nuxt项目asyncData服务端请求数据渲染
可以看到放回成功的

我们打开 pages 下的 index.vue 编写代码如下

<template>
  <div>
      <ul>
          <li
          >年后</li>
      </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'IndexPage',
  data() {
    return {
      datalist: []
    }
  },
  asyncData(){
      return axios({
        url:"http://localhost:8080/pro-api/user/",
        headers:{
        }
      }).then(res=>{
        console.log(res.data);
        return {
            datalist: res.data
        }
      })
  }
}
</script>

运行项目然后访问项目
Nuxt项目asyncData服务端请求数据渲染
我们请求的数据就被展示在这啦但一定要注意是 res.data
res这一层还有其他东西
然后我们这里这个datalist的意思将他复制给 data中的 datalist对象然后我们来循环遍历这些元素
index.vue 界面模板更改如下

<template>
  <div>
      <ul>
          <li
            v-for = "(itme,indx) in datalist.data"
            :key = "indx"
          >{{ itme.name }}</li>
      </ul>
  </div>
</template>