当前位置: 首页 > news >正文

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请求 不需要参数
在这里插入图片描述

然后 我这里直接实验 访问自己的接口
在这里插入图片描述
可以看到 放回成功的

我们打开 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>

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

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

运行项目 这样 我们的数据就上去了

在这里插入图片描述
然后 我们右键查看源码
在这里插入图片描述
可以看到 我这些东西也是直接连载源码上了 爬虫也能爬到
在这里插入图片描述

相关文章:

Nuxt项目asyncData服务端请求数据渲染

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

Vue 13 - 列表渲染 v-for

V-for介绍 当使用Vue.js框架时&#xff0c;可以使用v-for指令对数据进行循环遍历并渲染到模板中。v-for可以遍历数组、对象、字符串、指定次数等。 以下是v-for的用法&#xff1a; 遍历数组 <div v-for"(item, index) in items" :key"index"> {{…...

XML复习

目录什么是XMLXML中的内容可以干什么XML文件的创建以及其格式XML的文档约束-DTD约数XML的文档约束-schema约束Dom4J 解析XML 文档什么是XML XML 全称(extensible Markup Lanage) 可扩展标记语言它是一种数据的表示形式, 可以存储复杂的数据格式以及我们自己定义的格式.XML经常…...

【python设计模式】10、组合模式

哲学思想 组合模式是一种设计模式&#xff0c;用于将对象组合成树形结构以表示部分-整体层次结构。该模式允许客户端统一处理单个对象和对象组合。 从哲学的角度来看&#xff0c;组合模式可以被视为关于整体和部分之间关系的哲学思想。在这个模式中&#xff0c;整体和部分之间…...

实验五 网络安全加固

目录 一、实验内容 二、实验环境 三、实验步骤 一、实验内容 在GRE VPN实验基础上&#xff0c;对网络进行安全加固。 1、在S0上配置端口安全&#xff0c;设置服务器端口MAC绑定、限制端口MAC连接数量为1&#xff0c;超过最大值则丢弃数据帧。 2、配置OSPF路由协议认证。 3…...

MongoDB综述【入门指南】

写这篇博客,正好是2023年4月5日15:29:31,是清明节,放假一天,我坐在我的小小租房室内,思考着没思考到啥,哈哈哈,感觉好着急啊!看完了一本《城南旧事》,但是就是不踏实,好吧~我来写一篇最近在学的一个技术 为了更优秀的自己~奥利给!! 首先,我们从最初级小白开始(因为自己也是小白…...

Python 3 备忘清单_开发速查表分享

Python 3 备忘清单 Python 3开发速查备忘单是 Python 3 编程语言的单页参考表入门&#xff0c;为开发人员分享快速参考备忘单。 开发速查表大纲 入门 介绍 Hello World 变量 数据类型 Slicing String Lists If Else 循环 函数 文件处理 算术 加等于 f-字符串(Python 3.6) P…...

Thinkphp 6.0模版的加载包含输出

本节课我们来学习一下模版标签中的文件的包含、输出以及加载。 一&#xff0e;包含文件 1. 使用{include}标签来加载公用重复的文件&#xff0c;比如头部、尾部和导航部分&#xff1b; 2. 在模版 view 目录创建一个 public 公共目录&#xff0c;分别创建 header、footer 和 nav…...

ROS实践11 自定义头文件并调用

文章目录运行环境&#xff1a;思路&#xff1a;1.1 编写头文件1.2 includepath添加头文件路径1.3 编写可执行文件1.4 配置文件1.5 编译运行运行环境&#xff1a; ubuntu20.04 noetic 宏基暗影骑士笔记本 思路&#xff1a; 类和函数&#xff1a; 头文件 声明 可执行文件 定义…...

一位年薪35W的测试被开除,回怼的一番话,令人沉思

一位年薪35W测试工程师被开除回怼道&#xff1a;“反正我有技术&#xff0c;在哪不一样” 一技傍身&#xff0c;万事不愁&#xff0c;当我们掌握了一技之长后&#xff0c;在职场上说话就硬气了许多&#xff0c;不用担心被炒&#xff0c;反过来还可以炒了老板&#xff0c;这一点…...

【Docker】Docker常用命令

帮助启动类命令 启动docker systemctl start docker停止docker systemctl stop docker重启docker systemctl restart docker查看docker状态 systemctl status docker[root192 ~]# systemctl status docker ● docker.service - Docker Application Container EngineLoaded…...

【linux基础】7.linux系统自定义应用名和应用图标

"懦弱之人毫无价值"1. 做应用和图标1.1.测试和加入侧边栏3. 命令行重命名唤醒任务叙述&#xff1a;有一个x.sh文件可以在命令行执行,sh x.sh&#xff0c;这样太麻烦。 将其做成app且配上logo&#xff0c;下次直接点击使用将其路径全名重命名&#xff0c;可以直接用重…...

10.网络爬虫—MongoDB详讲与实战

网络爬虫—MongoDB详讲与实战MongoDBMongoDB安装创建数据目录1.数据库操作2.集合操作3.文档操作4.索引操作5.聚合操作6.备份与恢复MongoDB增删改查mongodb集合的增删改查数据插入到表数据的查看删除数据更新数据PyMongo连接数据库第二步 选择需要使用的数据库和集合PyMongo增删…...

C4D -> Three.js资产制作与导入流程

这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程&#xff0c;该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容&#xff0c; 没有由 Three.js 处理的任何照明。 推荐&#xff1a;用 NSDT场景设计器 快速搭建3D场…...

【博学谷学习记录】大数据课程-学习十三周总结

Hive的交互方式 第一种交互方式&#xff1a;bin/hive hive 创建一个数据库 create database mytest; show databases; 第二种交互方式&#xff1a;使用sql语句或者sql脚本进行交互 不进入hive的客户端直接执行hive的hql语句 hive -e “create database mytest2” 或者我们…...

Spring Cloud快速入门

文章目录Spring Cloud快速入门一、基础概念1、微服务架构2、微服务技术栈3、什么是Spring Cloud?4、Spring Cloud和Spring Boot的联系&#xff1f;5、比较成熟的互联网架构二、Rest环境搭建1、搭建提供者1.1、创建一个父工程1.2、创建一个springcloud-api模块1.3、创建一个spr…...

论文学习——VideoGPT

论文学习——VideoGPT: Video Generation using VQ-VAE and Transformers 原文链接&#xff1a;https://arxiv.org/abs/2104.10157 1. 设计思路 不同种类的生成模型在一下多个维度各有权衡&#xff1a;采样速度、样本多样性、样本质量、优化稳定性、计算需求、评估难易程度等…...

Flutter系列(五)底部导航详解

Flutter系列&#xff08;四&#xff09;底部导航顶部导航图文列表完整代码&#xff0c;如下&#xff1a; Flutter系列&#xff08;四&#xff09;底部导航顶部导航图文列表完整代码_摸金青年v的博客-CSDN博客 目录 一、前言 二、Scaffold组件 三、BottomNavigationBar组件 …...

『pyqt5 从0基础开始项目实战』02. 页面布局设计(保姆级图文)

目录弹性布局介绍导包和框架代码布局框架搭建1. 总体布局框架2. 顶部菜单布局3. form添加内容布局4. table数据展示布局5. footer底部菜单完整项目代码总结欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&#xff0c;持续更新中 欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&am…...

【Python机器学习】——平均中位数模式

Python机器学习——平均中位数模式 文章目录 Python机器学习——平均中位数模式一、Python 平均中位数模式一、Python 平均中位数模式 均值、中值和众数 从一组数字中我们可以学到什么? 在机器学习(和数学)中,通常存在三中我们感兴趣的值: 均值(Mean) - 平均值 中值(M…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...