【Vue】面经基础版-首页请求渲染
步骤分析
1.安装axios
2.看接口文档,确认请求方式,请求地址,请求参数
3.created中发送请求,获取数据,存储到data中
4.页面动态渲染
代码实现
1.安装axios
yarn add axios npm i axios
2.接口文档
请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get
3.created中发送请求,获取数据,存储到data中
data() {return {articelList: [],}},async created() {const { data: { result: { rows } }} = await axios.get('https://mock.boxuegu.com/mock/3083/articles')this.articelList = rows},
4.页面动态渲染
@\views\Article.vue
<template><div class="article-page"><div class="article-item" v-for="item in articelList" :key="item.id"><div class="head"><img :src="item.creatorAvatar" alt="" /><div class="con"><p class="title">{{ item.stem }}</p><p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p></div></div><div class="body">{{item.content}}</div><div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div></div></div>
</template>
相关文章:
【Vue】面经基础版-首页请求渲染
步骤分析 1.安装axios 2.看接口文档,确认请求方式,请求地址,请求参数 3.created中发送请求,获取数据,存储到data中 4.页面动态渲染 代码实现 1.安装axios yarn add axios npm i axios 2.接口文档 请求地址: …...
OBS+nginx+nginx-http-flv-module实现阿里云的推流和拉流
背景:需要将球机视频推送到阿里云nginx,使用网页和移动端进行播放,以前视频格式为RTMP,但是在网页上面播放RTMP格式需要安装flash插件,chrome浏览器不给安装,调研后发现可以使用nginx的模块nginx-http-flv-…...
ch1计算机网络和因特网
*1.1 什么是因特网 因特网是一个世界范围的计算机网络,即一个互联了遍及全世界的数十亿计算设备的网络。 具体构成: 主机hosts或端系统end-systems:数以亿计的计算设备互连,例如 主机-PCs(计算机), workstations(工作站), servers(服务器)端系统-PDAs,phones(…...
Web前端安全测试:深入剖析与实战策略
Web前端安全测试:深入剖析与实战策略 在数字化时代,Web前端作为用户与互联网服务交互的直接窗口,其安全性至关重要。然而,随着技术的不断进步,前端安全面临的威胁也日益复杂和多样化。因此,进行Web前端安全…...
Java学习-JDBC(一)
JDBC 概念 JDBC(Java Database Connectivity)Java数据库连接JDBC提供了一组独立于任何数据库管理系统的APIJava提供接口规范,由各个数据库厂商提供接口的实现,厂商提供的实现类封装成jar文件,也就是我们俗称的数据库驱动jar包JDBC充分体现了…...
异步复位和同步释放
文章目录 前言一、为什么需要复位呢?二、同步复位1. 同步复位定义2. 同步复位的实现3. 同步复位的优点和缺点同步复位优点同步复位缺点 三、异步复位1. 异步复位定义2. 异步复位的实现3. 异步复位的优点和缺点异步复位优点异步复位缺点 四、异步复位同步释放1. reco…...
03-3.2.4 双端队列
👋 Hi, I’m Beast Cheng👀 I’m interested in photography, hiking, landscape…🌱 I’m currently learning python, javascript, kotlin…📫 How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…...
SpringBoot的Mapper文件什么时候需要使用@Param注解
解决:nested exception is org.apache.ibatis.binding.BindingException: Parameter ‘XXX‘ not found 关于加注解,其他博客说的很清楚!但是有的人会遇见明明使用的springboot2.x以上版本,仍然提示需要加注解!这是为…...
2024.6.8
2024.6.8 **每日一题** 3040.相同分数的最大操作数目 Ⅱ,通多题意可知,该题最多有三种操作分数,分别是前两个,最后两个,以及第一个和最后一个的和。从这里也可以看出一共有三种状态转移方式,所以我们可以利…...
室内外融合定位是如何做到成为定位领域的新宠
在信息化高速发展的今天,定位技术已成为人们生活和工作中不可或缺的一部分。随着物联网、智慧城市等领域的蓬勃发展,传统的单一定位方式已无法满足复杂多变的环境需求。在这样的背景下,室内外融合定位技术应运而生,以其独特的优势…...
【刷题篇】分治-归并排序
文章目录 1、排序数组2、交易逆序对的总数3、计算右侧小于当前元素的个数4、翻转对 1、排序数组 给你一个整数数组 nums,请你将该数组升序排列。 class Solution { public:vector<int> tmp;void mergeSort(vector<int>& nums,int left,int right){…...
【经验】Ubuntu上离线安装VsCode插件浏览Linux kernel源码
1、下载VsCode离线安装包 1.1 下载 下载地址:https://marketplace.visualstudio.com/vscode 本人安装的插件: C/C++ checkpatch Chinese clangd kconfig Makefile Tools Perl Perl Toolbox注意:C/C++插件要安装Linux 64版本 1.2 安装 将离线安装包拷贝到Ubuntu中,执…...
鼠标侧键映射虚拟桌面切换 —— Win11
鼠标侧键映射虚拟桌面切换 —— Win11 基于 AutoHotkey 实现功能 下载软件 AutoHotkey建议安装在默认路径下(C盘) 此软件非常小,几乎不占用资源软件安装在默认路径以外的位置可能导致部分功能不可用 新建一个 .ahk 文件使用记事本打开该 .a…...
2024全国大学生数据统计与分析竞赛B题【电信银行卡诈骗的数据分析】思路详解
电信诈骗是指通过电话、网络和短信方式,编造虚假信息,设置骗局,对受害人实施远程、非接触式诈骗,诱使受害人打款或转账的犯罪行为,通常以冒充他人及仿冒、伪造各种合法外衣和形式的方式达到欺骗的目的,如冒…...
鸿蒙emitter 订阅事件封装 EmitterUtils
适用于api11 和api12 废话不多说,直接上代码 import emitter from ohos.events.emitter; import { StringUtils } from ohos/flutter_ohos;export class EmitterUtils{/*** 发射字符串类型的* param eventId* param data*/public static sendEvent(eventId:stri…...
C语言---深入指针(4)
回调函数 //回调函数就是通过函数指针调用的函数 //这个在之前的转移表-计算器里面很明显,通过函数指针数组内的函数指针进行函数的调用 // // // 将这四段代码分装成一个函数,一个代码将这4个问题都解决 int Add(int x, int y) {return x y; } int S…...
【启程Golang之旅】让文件操作变得简单
欢迎来到Golang的世界!在当今快节奏的软件开发领域,选择一种高效、简洁的编程语言至关重要。而在这方面,Golang(又称Go)无疑是一个备受瞩目的选择。在本文中,带领您探索Golang的世界,一步步地了…...
oracle视图无法删除,orcl视图删除卡住怎么办
话说,这是一个来自周四加班夜晚的故事,当时我的PL/SQL卡住了,每次查询这个表时都会卡住。 经过一番研究,我找到了解决办法,分为三个步骤: 使用以下查询语句获取正在执行的SQL查询的SID和OracleID…...
ug编程怎么录制宏:一步步探索自动化编程的奥秘
ug编程怎么录制宏:一步步探索自动化编程的奥秘 在UG编程的浩瀚领域中,录制宏是一项强大而神秘的功能。它就像一位魔法师,能够将繁琐的重复操作化为简单的指令,释放出惊人的编程效率。然而,对于许多初学者来说…...
深度学习Week16——数据增强
文章目录 深度学习Week16——数据增强 一、前言 二、我的环境 三、前期工作 1、配置环境 2、导入数据 2.1 加载数据 2.2 配置数据集 2.3 数据可视化 四、数据增强 五、增强方式 1、将其嵌入model中 2、在Dataset数据集中进行数据增强 六、训练模型 七、自定义增强函数 一、前言…...
猫抓插件:革新性浏览器资源捕获工具,让媒体下载效率倍增
猫抓插件:革新性浏览器资源捕获工具,让媒体下载效率倍增 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字内容爆炸的时代,如何高效获取网页中的视频、音频和图…...
OpCore-Simplify:零基础黑苹果配置终极指南,5分钟搞定复杂EFI
OpCore-Simplify:零基础黑苹果配置终极指南,5分钟搞定复杂EFI 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为黑苹果配置…...
汽车电子工程师必看:如何用MPC5643L实现ASIL-D级别的功能安全设计(附完整代码示例)
汽车电子工程师必看:如何用MPC5643L实现ASIL-D级别的功能安全设计(附完整代码示例) 在智能驾驶技术快速发展的今天,功能安全已成为汽车电子系统设计的核心考量。作为汽车电子工程师,我们面临的挑战不仅在于实现复杂功…...
手把手教你用SteamCMD在Windows服务器上搭建Rust腐蚀私服(附详细参数配置)
手把手教你用SteamCMD在Windows服务器上搭建Rust腐蚀私服(附详细参数配置) 在生存游戏领域,Rust以其硬核的PVP机制和高度自由的沙盒玩法,持续吸引着大量玩家。对于想要掌控游戏规则、打造专属社区的管理员来说,自建服…...
从智慧灯杆到无人驾驶:如何用Raspberry Pi 4和Arduino搭建微型智慧城市实验平台
从智慧灯杆到无人驾驶:如何用Raspberry Pi 4和Arduino搭建微型智慧城市实验平台 在创客文化和高校工程教育中,低成本硬件的创新应用正掀起一场微型智慧城市实验的革命。只需一块树莓派主板、几个传感器和开源软件,就能在桌面上复现价值数百万…...
BiliTools:全能B站资源管理工具,让离线学习与内容备份无忧
BiliTools:全能B站资源管理工具,让离线学习与内容备份无忧 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱,支持视频、音乐、番剧、课程下载……持续更新 项目地址: https://gitcode.com/GitHub_Tren…...
树莓派5跑n8n稳吗?实测Docker部署性能与避坑指南(Ubuntu 24.04 + 安全加固)
树莓派5实战:n8n工作流自动化平台的Docker部署与性能调优指南 在物联网与自动化技术蓬勃发展的今天,如何以最低成本构建稳定可靠的工作流自动化系统成为许多开发者和企业关注的重点。树莓派5凭借其出色的性价比和低功耗特性,配合Docker容器化…...
「webMAN-MOD」技术探索:构建PS3主机的多功能扩展生态
「webMAN-MOD」技术探索:构建PS3主机的多功能扩展生态 【免费下载链接】webMAN-MOD Extended services for PS3 console (web server, ftp server, netiso, ntfs, ps3mapi, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webMAN-MOD 一、基础认知&…...
AutoHotkey实战:5分钟搞定Mac/Windows跨平台快捷键统一(附完整脚本)
AutoHotkey实战:5分钟搞定Mac/Windows跨平台快捷键统一(附完整脚本) 对于频繁切换Mac和Windows双系统的开发者来说,最令人抓狂的莫过于两种操作系统下完全不同的快捷键体系。特别是Cmd/Ctrl键位的混乱,常常让人在复制粘…...
美胸-年美-造相Z-Turbo入门实战:跟着步骤操作,快速产出作品
美胸-年美-造相Z-Turbo入门实战:跟着步骤操作,快速产出作品 1. 快速了解美胸-年美-造相Z-Turbo 美胸-年美-造相Z-Turbo是一款基于Z-Image-Turbo架构优化的文生图模型,特别擅长生成具有特定艺术风格的人物图像。这个镜像已经预装了所有必要的…...
