新民个人网站建设优势_浙江城乡建设信息港_十大app开发公司排名_it人必看的网站

 抄一组数据

{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标签啦