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

第十二章 章节练习created的应用

news 文章来源：https://blog.csdn.net/qushaming/article/details/143315657 2025/1/19 3:21:41

目录

一、引言

二、运行效果图 

​三、完整代码

一、引言

构建一个新闻的页面，页面在响应式数据准备好之后（即created），就向后台接口请求获取新闻数据列表，然后赋值给Vue实例中的list列表，这个请求逻辑我们就写在created方法中。后台接口是我在本地机子上部署的服务，大家也可以在自己本地机子上搭建一个简单的SpringBoot工程，返回相关的图片和文字数据即可。

二、运行效果图 

 三、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://localhost:8080/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1.发送请求，获取数据const res = await axios.get('http://localhost:8080/api/news')// 2.将数据更新给data中的listthis.list = res.data.data}})</script>
</body>
</html>

相关文章：

第十二章 章节练习created的应用

目录 一、引言 二、运行效果图 ​三、完整代码 一、引言 构建一个新闻的页面&#xff0c;页面在响应式数据准备好之后&#xff08;即created&#xff09;&#xff0c;就向后台接口请求获取新闻数据列表&#xff0c;然后赋值给Vue实例中的list列表&#xff0c;这个请求逻辑我…...

编程日记 2024/10/29 4:55:26

Unity 游戏性能优化实践：内存管理与帧率提升技巧

1. 引言 随着移动设备性能的逐步提升&#xff0c;游戏玩家对画质和流畅度的要求越来越高。优化 Unity 游戏性能不仅可以提升用户体验&#xff0c;还能降低设备的功耗&#xff0c;延长电池寿命。这篇文章将深入探讨如何在 Unity 中优化游戏的内存管理与帧率&#xff0c;通过多方…...

编程日记 2024/10/29 4:53:23

C++游戏开发详解

C 是一种广泛使用的编程语言&#xff0c;尤其在游戏开发领域有着不可替代的地位。它提供了对底层硬件的直接访问能力&#xff0c;允许开发者优化性能&#xff0c;这对于追求高帧率和低延迟的游戏来说至关重要。本文将详细介绍使用 C 进行游戏开发的基础知识和技术要点&#xff…...

编程日记 2024/10/29 4:51:21

三、大模型（LLMs）微调面

本文精心汇总了多家顶尖互联网公司在大模型基础知识考核中的核心考点&#xff0c;并针对这些考点提供了详尽的解答。并提供电子版本&#xff0c;见于文末百度云盘链接中&#xff0c;供读者查阅。 一、大模型微调 • 1 如果想要在某个模型基础上做全参数微调&#xff0c;究竟需要…...

编程日记 2024/10/29 4:50:21

Flutter升级与降级

升级 版本升级 // 升级到指定版本flutter upgrade 版本号// 升级到最新版本flutter upgrade 降级 1.需要先确定想要降级的版本号。 2.切换到系统安装Flutter的目录 3.在https://github.com/flutter/flutter&#xff0c;找到要回退的版本号对应的commit序号&#xff08;具…...

编程日记 2024/10/29 4:48:16

分布式并发场景的核心问题与解决方案

文章目录 分布式并发场景的核心问题与解决方案一、核心问题分析1. 分布式事务问题2. 数据一致性问题3. 并发控制问题4. 分布式锁失效问题 二、解决方案1. 分布式事务解决方案1.1 可靠消息最终一致性方案1.2 TCC方案实现 2. 缓存一致性解决方案2.1 延迟双删策略2.2 Canal方案 3.…...

编程日记 2024/10/29 4:47:15

D - Many Segments 2（ABC377)

题意&#xff1a;给定n和m&#xff0c;给定n个区间li&#xff0c;ri&#xff0c;求出满足区间lr不完全包含区间liri的个数 分析&#xff1a;用优先队列对区间r进行排序&#xff0c;i表示左区间&#xff0c;每次找到右区间加入即可。 代码&#xff1a; #include<bits/stdc…...

编程日记 2024/10/29 4:46:14

数组指针和指针数组的区别

数组指针和指针数组的区别 根据我个人的理解如下&#xff1a; 数组指针&#xff1a;指向数组的指针。着重点在于最后的指针两个字。 指针数组&#xff1a; 所有元素都是指针的数组。着重点在于最后的数组两个字。 另外来看助手的回答: Kimi: 1. **数组指针&#xff08;Ar…...

编程日记 2024/10/29 4:45:12

【VUE点击父组件按钮，跳转到子组件】

要实现在Vue中&#xff0c;父组件通过点击按钮进入子组件的 <el-dialog> 弹窗&#xff0c;并在弹窗中嵌套 <el-table> 表格&#xff0c;可以按照以下步骤进行编写代码&#xff1a; 在父组件中&#xff0c;定义一个数据属性用于控制子组件弹窗的显示与隐藏。 data…...

编程日记 2024/10/29 4:44:11

Java列表排序：方法与实践

在Java编程中&#xff0c;列表排序是一个常见且重要的任务。本文将介绍Java中对列表进行排序的几种方法&#xff0c;包括使用Collections.sort()、List.sort()以及自定义排序规则。 1. 使用Collections.sort() Collections.sort()是Java提供的一个静态方法&#xff0c;用于对…...

编程日记 2024/10/29 4:43:09

哈希及其封装实现unordermap和set

哈希 直接定址法 哈希和之前的红黑树的区别就是&#xff0c;它是通过映射关系来找到目标的&#xff0c;可以把它想象成之前排序的计数排序&#xff0c;那其实就是哈希的一种方法&#xff0c;叫做直接定址法。 对于比较集中的数据&#xff0c;它只需要开一段区间&#xff0c;…...

编程日记 2024/10/29 4:42:08

在 AMD GPU 上构建解码器 Transformer 模型

Building a decoder transformer model on AMD GPU(s) — ROCm Blogs 2024年3月12日 作者 Phillip Dang. 在这篇博客中&#xff0c;我们展示了如何使用 PyTorch 2.0 和 ROCm 在单个节点上的单个和多个 AMD GPU 上运行Andrej Karpathy’s beautiful PyTorch re-implementation …...

编程日记 2024/10/29 4:41:07

Canvas简历编辑器-选中绘制与拖拽多选交互设计

Canvas简历编辑器-选中绘制与拖拽多选交互设计 在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM&#xff0c;并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计。那么此时我们就依然在轻量级DOM的基础上&#xff0c;关注于实现选中绘制与拖拽多选交…...

编程日记 2024/10/29 4:40:05

简单工厂（Simple Factory）

简单工厂&#xff08;Simple Factory&#xff09; 在创建一个对象时不向客户暴露内部细节&#xff0c;并提供一个创建对象的通用接口。 说明&#xff1a; 简单工厂把实例化的操作单独放到一个类中&#xff0c;这个类就成为简单工厂类&#xff0c;让简单工厂类来决定应该用哪…...

编程日记 2024/10/29 4:39:04

ffmpeg拉流分段存储到文件-笔记

通过ffmpeg可以从rtsp网络流拉取数据并存储到本地文件里&#xff0c;如下命令。做个笔记 ffmpeg -rtsp_transport tcp -i rtsp://192.168.1.168:6880/live -c copy -f segment -segment_time 60 stream_piece_%d.mp4这条 ffmpeg 命令的作用是从一个 RTSP 流中捕获视频&#xff…...

编程日记 2024/10/29 4:38:02

Java 实习工资大概是多少？——解读影响薪资的因素

文章目录 1. 城市因素&#xff1a;一线、二线的差距2. 公司类型&#xff1a;互联网公司、外企和传统企业的差别3. 个人能力&#xff1a;经验、技术栈的重要性4. 其他影响因素&#xff1a;学历和实习时间总结推荐阅读文章 Java 开发作为广泛应用的职业方向&#xff0c;实习工资的…...

编程日记 2024/10/29 4:36:59

【Linux】万字详解：Linux文件系统与软硬链接

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 &#x1f680; 前言 一&#xff1a; &#x1f525; 磁盘的物理结构二&#xff1a; &#x1f525; 磁盘的存储结构 三&#xff1a; &#x1f525; 磁盘的逻辑结构 四&#xff1a; &#…...

编程日记 2024/10/29 4:35:57

spacenavd

介绍spacenavd开源项目&#xff0c;主要是因为在斯坦福大学的UMI项目中使用了该项目。在斯坦福大学的 UMI&#xff08;Universal Manipulation Interface&#xff09;项目中&#xff0c;Spacenavd 主要用于处理 3D Space Mouse&#xff08;空间鼠标&#xff09;的输入&#xf…...

编程日记 2024/10/29 4:34:57

C#WPF的XAML的语法详谈和特性

WPF的XAML&#xff08;eXtensible Application Markup Language&#xff09;是一种基于XML的标记语言&#xff0c;用于在.NET框架中定义和描述用户界面。XAML提供了一种声明性的方式来构建应用程序的UI元素&#xff0c;包括窗口、控件、布局、样式、动画和数据绑定等。 XAML的…...

编程日记 2024/10/29 4:33:55

一篇文章讲透数据结构之二叉搜索树

前言 在前面的学习过程中&#xff0c;我们已经学习了二叉树的相关知识。在这里我们再使用C来实现一些比较难的数据结构。 这篇文章用来实现二叉搜索树。 一.二叉搜索树 1.1二叉搜索树的定义 二叉搜索树&#xff08;Binary Search Tree&#xff09;是基于二叉树的一种升级版…...

编程日记 2024/10/29 4:32:54

新手入门c++（8）

到时候了&#xff0c;是时候给你们讲一下其他的定义形式与格式化输入输出了。 1.长整型变量 长整型变量分为两种&#xff1a; ①long类型 在计算机编程中&#xff0c;long 类型是一个整型数据类型&#xff0c;用于存储较大的整数。它的大小和范围取决于操作系统和编译器的实…...

编程日记 2024/10/29 4:31:53

新手铲屎官提问，有哪几款噪音低的宠物空气净化器推荐

相信很多铲屎官都明白的的痛就是猫咪掉毛太严重&#xff0c;所以每次看到满天飞的浮毛时只想赶紧逃离&#xff0c;一点都不想清理。但是家是自己的&#xff0c;猫是自己的&#xff0c;健康也是自己的&#xff0c;不清理也得清理。 为了更有效的清理浮毛&#xff0c;我朋友特意…...

编程日记 2024/10/29 4:29:49

解决RabbitMQ脑裂问题

文章目录 前言一、现象二、解决办法 前言 RabbitMQ脑裂 一、现象 RabbitMQ镜像群出现脑裂现象&#xff0c;各个节点的MQ实例都“各自为政”&#xff0c;数据并不同步。 二、解决办法 # 停止mq sh rabbitmq-server stop_app # 查看mq进程是否存在 ps -ef | grep rabbitmq # …...

编程日记 2024/10/29 4:27:47

经纬恒润AUTOSAR成功适配芯钛科技Alioth TTA8车规级芯片

在汽车电子领域&#xff0c;功能安全扮演着守护者的角色&#xff0c;它确保了车辆在复杂多变的情况下保持稳定可靠的运行。随着汽车电子的复杂性增加&#xff0c;市场对产品功能安全的要求也日益提高。基于此背景&#xff0c;经纬恒润AUTOSAR基础软件产品INTEWORK-EAS-CP成功适…...

编程日记 2024/10/29 4:25:44

4、java random随机数、一维数组、二维数组

目录 Random类与随机数生成数组的概述与使用数组的内存分配与访问数组的常见问题与解决方案一维数组的遍历与操作二维数组的概述与遍历1. Random类与随机数生成 引言 在编程中，我们经常需要生成随机数，比如在游戏、模拟实验或者数据处理中。Java提供了一个非常方便的类Rand…...

编程日记 2024/10/29 4:24:44

C++ 魔法三钥：解锁高效编程的封装、继承与多态

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;封装 1.封装概念 2.封装格式 3.封装的原理 4.封装的作用 &#x1f4af;继承 1.继承的概念 2.继承格式 3.继承的…...

编程日记 2024/10/29 4:23:42

姿态传感器（学习笔记上）

上节我们学的是温湿传感器&#xff0c;这节我们学的是姿态传感器&#xff0c;虽然都是传感器&#xff0c;但是它们还是有很大的区别的&#xff0c;这节的传感器我们通过学习可知&#xff0c;开发板上的姿态传感器型号是QMI8658C&#xff0c;内部集成3轴加速度传感器和3轴陀螺仪…...

编程日记 2024/10/29 4:22:41

labelimg使用教程

快捷键 W&#xff1a;调出标注的十字架&#xff0c;开始标注 A&#xff1a;切换到上一张图片 D&#xff1a;切换到下一张图片 del&#xff1a;删除标注的矩形框 CtrlS&#xff1a;保存标注好的标签 Ctrl鼠标滚轮&#xff1a;按住Ctrl&#xff0c;然后滚动鼠标滚轮&#xff0c;…...

编程日记 2024/10/29 4:18:38

力扣21 ： 合并两个有序链表

链表style 描述&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例&#xff1a; 节点大小相同时&#xff0c;l1的节点在前 何解&#xff1f; 1&#xff0c;遍历两个链表&#xff0c;挨个比较节点大小 同时遍…...

编程日记 2024/10/29 4:16:35

【Spring】Spring Boot 配置文件（7）

本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 有什么不懂的都可以问我&#xff0c;看到消息会回复的&#xff0c;可能会不及时&#xff0c;请见谅&#xff01;&#xff01; 1、配置文件作…...

编程日记 2024/10/29 4:15:33

phpcms转wordpress/网站优化公司认准乐云seo

通常大家会认为项目不成功是执行的问题&#xff0c;执行因素导致的项目失败的确占到一定的比例。但是从美国权威机构Standish Group跟踪研究的1484个项目的数据来看&#xff0c;项目团队组织上的问题导致项目失败的比例高达23%&#xff0c;具体表现为团队人员配置不当、职责不明…...

编程日记 2025/1/19 2:57:36

无锡市滨湖区建设局网站/班级优化大师官方网站

题目描述 给你一个整数数组 nums &#xff0c;其中 nums[i] 表示第 i 个袋子里球的数目。同时给你一个整数 maxOperations 。 你可以进行如下操作至多 maxOperations 次&#xff1a; 选择任意一个袋子&#xff0c;并将袋子里的球分到 2 个新的袋子中&#xff0c;每个袋子里都有…...

编程日记 2025/1/19 1:04:35

网站搜索出来有图片/项目营销推广策划

以函数对象取代函数 使用场景&#xff1a; 你有一个大型函数&#xff0c;其中对局部变量的使用使你无法采用Extract Method. 解决方法&#xff1a;将这个函数放进一个单独的对象中&#xff0c;如此一来局部变量就变成了对象内字段&#xff0c;然后可以在同一个对象将这个大型函…...

编程日记 2025/1/19 0:31:06

wordpress 中国版/设计案例网

在Excel统计数据时&#xff0c;经常会碰到重复项反复出现&#xff0c;很干扰视线&#xff0c;想要对重复项进行合并并求和&#xff0c;那要如何操作呢&#xff1f;下面&#xff0c;小编跟大家详细讲解Excel合并重复项数据并求和的操作方法。首先打开一个需要处理的Excel表格&am…...

编程日记 2025/1/18 21:17:28

广州市网站公司/注册网站的免费网址

目前&#xff0c;AMD 驱动程序使用 LLVM 作为着色器编译器。而 Mesa 则是一个开源的 LLVM 的替代品。因此&#xff0c;在这种情况下&#xff0c;Valve 希望支持 AMD 显卡以提高 Linux 游戏在各种 Linux 发行版上的性能。-- Ankush Das&#xff08;作者&#xff09;Steam 寻求公…...

编程日记 2025/1/18 13:20:09

网站建设与维护是做什么/百度网盘搜索神器

上酸菜咯&#xff0c;仔细体会下句型用法、词语搭配&#xff0c;很有帮助喔~~ 1. According to a recent survey, four million people die each year from diseases linked to smoking. 2. The latest surveys show that quite a few children have unpleasant associations w…...

编程日记 2025/1/18 12:49:43