【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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/849954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 数据库连接(JDBC)的使用,包括连接数据库、执行SQL语句等

一、简介 Java Database Connectivity&#xff08;JDBC&#xff09;是Java应用程序与关系数据库进行交互的一种API。它提供了一组用于访问和操作数据库的标准接口&#xff0c;使开发人员能够使用Java代码执行数据库操作&#xff0c;如查询、插入、更新和删除等。 二、JDBC架构…

除留取余法构造散列表--c++【做题记录】

【题目描述】 用除留取余法构造散列表&#xff0c;输入序列并实现查找操作。 【算法】 哈希函数使用除留余数法 若已知整个哈希表的最大长度 m&#xff0c;可以取一个不大于 m 的数 p&#xff0c;然后对该关键字 key 做取余运算&#xff0c;即&#xff1a;H&#xff08;key&a…

gbase 扩容 集群数据同步 主备切换

问题&#xff1a; 问题1磁盘满 1.原本是100G的大小&#xff0c;我们实际还没接入真正业务&#xff0c;昨日空间满了&#xff0c;需要帮忙看下是什么原因导致磁盘满的吗 数据库是每天备份一次&#xff0c;是不是备份的太频繁&#xff0c;还是数据量的问题导致&#xff0c;需要…

[工具探索]富士mini90拍立得使用指南

文章目录 1. 基本功能介绍1.1 相机外观1.2 电池与胶片 2. 设置相机2.1 装入电池2.2 装入胶片 3. 拍摄模式3.1 标准模式3.2 儿童模式3.3 远景模式3.4 双重曝光模式3.5 Bulb&#xff08;B&#xff09;模式3.6 **派对模式**3.7 微距模式3.8 **亮度模式**3.9 **定时拍摄模式**3.10 …

Elastic Search(ES)Java 入门实操(2)搜索代码

上篇解释了 ES 的基本概念和分词器。Elastic Search &#xff08;ES&#xff09;Java 入门实操&#xff08;1&#xff09;下载安装、概念-CSDN博客 Elastic Search&#xff08;ES&#xff09;Java 入门实操&#xff08;3&#xff09;数据同步-CSDN博客 这篇主要演示 Java 整合…

React Hooks 封装可粘贴图片的输入框组件(wangeditor)

需求是需要一个文本框 但是可以支持右键或者ctrlv粘贴图片&#xff0c;原生js很麻烦&#xff0c;那不如用插件来实现吧~我这里用的wangeditor插件&#xff0c;初次写初次用&#xff0c;可能不太好&#xff0c;但目前是可以达到实现需求的一个效果啦&#xff01;后面再改进吧~ …

个位为0的数字-第13届蓝桥杯省赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第81讲。 个位为0的数字&am…

秋招突击——算法打卡——6/6——复习{三数之和、考试最大困扰度}——快速新作{环形链表}

文章目录 复习最大考试困扰度三数之和——做的不好 新作环形链表实现代码 明天面试拼多多&#xff0c;因为今天面华为遇到了一个做过的题目&#xff0c;没做出来&#xff0c;关键是这个题目第一次做出来了&#xff0c;这次居然没有做出来&#xff0c;比较烦&#xff0c;所以今天…

光通信技术路线

自从1947年Bell实验室诞生第一支晶体管以来&#xff0c;芯片的尺寸大小和晶体管的集成度都遵循着“摩尔定律”进行飞速的发展。然而摩尔定律随着芯片尺寸的减小&#xff0c;进入到深亚微米或纳米量级之后&#xff0c;其发展也面临越来越严峻的挑战。近几年来虽然芯片上的晶体管…

标准发布实施 |《新能源电池工业废水处理技术指南磷酸铁锂电池》

T/ACEF 130&#xff0d;2024《新能源电池工业废水处理技术指南磷酸铁锂电池》欢迎各单位引用执行&#xff01;有课题也可联合立项&#xff01; 发布日期&#xff1a;2024年02月04日 实施日期&#xff1a;2024年03月01日 主要起草人&#xff1a;刘愿军、孙冬、丁炜鹏、何小芬…

【HarmonyOS】代码规范参考

【HarmonyOS】代码规范参考 一、通用原则 直白简单的逻辑代码比起注释来的更有意义&#xff1b; 空格、换行相关的规范&#xff0c;需使用IDE自带的格式化&#xff0c;快捷键是 CtrlAltL &#xff0c; 快速对代码进行格式化&#xff1b; 开发者不能为了快速开发而牺牲了代码…

whistle手机抓包

环境&#xff1a;whistle&#xff1a;2.9.59 whistle手机抓包&#xff08;ios可以抓小程序的包&#xff1b;安卓机不能抓小程序的包&#xff0c;但是小程序的有开发者工具就够用了&#xff09; 以安卓手机为例&#xff08;手机跟电脑要连同一个wifi&#xff09; 1.电脑安装w…

Django项目上线-报错汇总

Django项目上线-报错汇总 下列报错基本都是Python环境相关 pip install 报错 WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. debian运行pip报错ssl module in Python is not available - z417 - 博…

4.00003 postgresql的内存管理 - 我是怎么获得可用内存的?

文章目录 从一个例子开始何时设置分配内存的函数?分配函数是何时生效的?分配函数的详细动作是什么?从一个例子开始 Breakpoint 1, MemoryContextCreate (node=0x1008940, tag=T_AllocSetContext, method_id=MCTX_ASET_ID, parent=0x1000fe0, name=0xe21351 "dynahash&…

计算机专业本科论文起稿咋写

举例基于SpringBoot的Java基础的旅游管理系统 摘要 随着旅游业的快速发展&#xff0c;传统的旅游管理方式已经难以满足现代企业的需求。为了提高旅游企业的管理水平和服务质量&#xff0c;本文设计并实现了一个基于SpringBoot框架的旅游管理系统。本文首先介绍了旅游管理系统的…

Sql-labs的第一关

前言 我们在使用Sql-libs靶场进行Sql注入实验的时候&#xff0c;前提要求我们对mysql数据库结构要有一个大概的了解&#xff0c;因为mysql5.0以上的版本都会自带一个名为information_schema的数据库&#xff0c;这个数据库下面会有columns和tables两个表。 tables这个表的table…

3-1RT-Thread时钟管理

这里写自定义目录标题 时钟节拍是RT thread操作系统的最小时间单位。 第一个功能&#xff0c;rt tick值自动加1&#xff0c;在RT thread当中通过RT_USING_SMP定义了多核和单核的场景。第二个功能&#xff0c;检查当前线程的时间片&#xff0c;首先获取当前线程&#xff0c;将当…

Vitis HLS 学习笔记--初始化与复位

目录 1. 简介 2. 控制初始化与复位 2.1 初始化 2.2 复位 2.3 全局复位选项 2.4 复位排除 3. 阵列初始化和复位 3.1 不使用 static 限定符 3.2 使用 static 限定符 3.3 BRAM 和 URAM 4. 总结 1. 简介 本文对比分析两个方面的初始化和复位&#xff1a;阵列和控制&…

Java采取擦除式泛型到底兼容了什么场景?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;Java擦除式泛型是一个妥协,…

美颜相机「BeautyCam」v12.0.80 祛广告解索会员版(美妆相机功能,展现女神魅力)

软件介绍 美颜相机&#xff0c;一款由知名移动互联网企业Meitu Inc.开发的移动设备照片编辑与美化应用&#xff0c;起初主要针对娱乐消费市场&#xff0c;随后集成了商业营销功能。目前&#xff0c;它已跻身全球最受欢迎的手机摄影应用程序之列。在中国&#xff0c;美颜相机和…