3.Nuxt学习 Nuxt结合node进行接口调试

 抄一组数据

{
    code: 200,
    data: [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ],
    msg: "请求成功",
  }

本地启动项目和node服务，抄一组table表格数据模拟一下请求 我给serve文件移动到项目下了😄

 ​​​​​​

useFetch

在Nuxt中请求接口需要使用到useFetch方法

Nuxt官网-useFetch使用

get

调用本地接口,打印一下看看结果 

感觉返回来的数据被框架自带的装饰器封装了 拿到数据渲染一下子

index.vue入口文件

<template>
  <div>
    <!-- hello world -->
    <!-- <Banner /> -->
    <!-- <BannerChild /> -->
    <!-- <nuxt-link to="/detail/detailOne?data='我是首页的参数'"
      >跳转去detial</nuxt-link
    > -->
    {{ data }}
  </div>
</template>

<script setup lang="ts">
// 接受参数 useRoute().query.data
// const data = useRoute().query.data;
// console.log("data", data);

import { ref } from "vue";
const data = ref("");

const resData = await useFetch("http://127.0.0.1:8081/test");
console.log("resData", resData);

data.value = resData.data.value

</script>

<style scoped></style>

post 

试试使用post请求 并且传入参数给node服务端

node配置一个post请求 并且尝试打印传入的参数

// 引入express
const express = require("express");
const app = express();
const cors = require("cors");

app.use(cors());
// 建立一个test接口
app.get("/test", (req, res) => {
  res.send({
    code: 200,
    data: [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ],
    msg: "请求成功",
  });
});

app.post("/testPost", (req, res) => {
  console.log("testPost", req.query);
  res.send({
    code: 200,
    data: "post成功",
    msg: "",
  });
});

//侦听8081端口
app.listen(8081, () => {
  console.log("服务已经启动:http://127.0.0.1:8081");
});

在nuxt项目中尝试调用 

//post
const resData = await useFetch("http://127.0.0.1:8081/testPost", {
  method: "post",
  params: { id: 1 },
});

useHead方法

 我们在使用Nuxt框架的时候 一般都是因为需要提高网站排名，提高网站SEO，所以需要设置我们的TDK，可以使用Nuxt提供的useHead方法来实现

Nuxt-useHead

在app.vue中使用useHead方法

<template>
  <div>
    <!-- 使用NuxtLayout标签包裹NuxtPage来实现layouts文件的作用 -->
    <NuxtLayout>
      <!-- 类似于vue文件 router-view的作用 -->
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
useHead({
  title: "学习Nuxt框架",
  meta: [{ name: "learn", content: "学习nuxt" }],
});
</script>

在控制台页面结构中 就能看到写入的title标签和meta标签啦