vue学习笔记(十一)——开发心得(axios的封装、promise细节、vue-router开发中的使用)

1. axios的网络请求的封装

1.1 为什么要封装api?

        代码分层,便于以后的修改,无需触碰逻辑页面
目标:
        网络请求,不散落在各个逻辑页面里,封装起来方便以后修改

1.2 封装api步骤

① 在项目 src 下新建目录 utlis ,此目录一般用于管理项目下所使用到的工具,如 axios。

② 在 utils 目录下新建 request.js 文件,对axios进行二次封装,并且制定项目的根地址并使用默认导出将 axios 导出。(每个模块中,只允许使用唯一的一次 export default,否则会报错!

③ 在 src 下新建目录 api ,用于统一管理所有需要的 url地址,封装网络请求方法导出。

如在 api 目录下新建 home.js 用于统一管理首页 Home 组件中的所有网络请求

④ 在 api 目录下新建 index.js,将 api 文件夹下各个请求模块的 js 都统一导入到 index.js 中,再统一向外导出接口,导出的方法统一加一个 API 后缀,开发时使用时就知道这是接口函数了。

⑤ 在某个组件中使用的时候,直接导入使用该方法。

2. promise 的使用细节

2.1 async修饰的函数 -> 默认返回一个全新Promise对象

        如在 methods 方法中使用的 getSongList 方法,由于 searchResultAPI 是使用 axios 封装的一个接口函数,所以该接口函数返回的是一个 promise 对象,可以通过使用 await 修饰直接拿到返回的结果。如果某个方法内部使用了 await 修饰,那么这个方法需要使用 async 来修饰该方法。

        在 hotsFun 函数中调用 getSongList 方法时,getSongList方法返回值的是一个 promise 对象。因为 getSongList 用了 async 方法修饰,所以返回了一个新的 promise 对象。因此可以使用 await 来修饰,直接拿到返回的结果。某个函数内部用了 await 修饰后,需要加 async 修饰。

3. vue-router 开发中的使用细节

3.1 vue-router 开发中的统一管理

① router/index.js – 配置路由规则和对应路由页面        

        在 src 下新建目录 router,再新建文件 index.js,在 index.js 中配置路由规则和对应路由页面,之后使用默认导出。

② main.js – 引入路由对象注入到vue中

③ App.vue – 留好router-view显示路由页面(挂载)

3.2 路由元信息-meta

① meta是什么?

        是用来存储路由相关的一些额外信息。可以把它理解为附加在路由上的标签或属性,这些标签或属性对应的信息可以在路由守卫、组件等地方被访问和利用。

② meta 的使用

        直接写在路由规则的配置里

        

        在组件里可以通过 this.$route.meta.属性名 的方式拿到具体的值。

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

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

相关文章

VTD学习笔记(一)-启动vtd、基本界面和按钮

写在前面:真快啊,眨眼就毕业上班了,岗位也是做仿真,看来以后就是一直做仿真了,再见了定位~。公司使用的是vtd,看资料是一个很庞大的自动驾驶仿真软件,囊括了车辆动力学到传感器仿真,…

Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)

Python list comprehension {列表推导式 - 列表解析式 - 列表生成式} 1. Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)2. Example3. ExampleReferences Python 中的列表解析式并不是用来解决全新的问题,只是为解决已有问题提供新的语法。 列…

iPad型号数据解析:了解不同iPad型号的连接和扩展性能力

iPad是一款非常受欢迎的平板电脑,拥有多种型号和规格可供选择。在本篇文章中,我们将深入研究不同iPad型号的连接和扩展性能。数据源来自于挖数据平台,该平台提供了全面的iPad型号数据,共计1485个型号。 首先,让我们来…

【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访(Nadieh Bremer)+ 2.7 本章小结

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介(已完结) 1.1 何为 D3.js?1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践(上)1.3 数据可视化最佳实践(下)1.4 本章小结 第二章…

怎样用Java程序与数据库建立联系?

首先我们要了解一下JDBC,一个为Java程序与关系型数据库交互提供便利的API(应用程序编程接口), 本期我们尝试用Java编程软件IDEA与MYSQL数据库建立联系。 首先我们在IDEA中穿件一个(SQL),然后导…

系统编程--Linux下文件其他操作

这里写目录标题 文件存储理论补充dentry、inode 文件其他操作stat函数作用函数原型代码(以获取文件大小为例)补充(获取文件类型) lstat函数作用函数原型代码补充(获取文件权限)总结 tipslink函数作用简介函…

畅玩游戏新选择 :游戏本 Windows10 64位 专业版!

对于喜欢游戏竞技的玩家而言,选择一款合适的操作系统对于提升游戏体验至关重要。为了满足这一需求,系统之家小编将带来高性能的游戏本专用Win10操作系统。这一版本系统不仅注重游戏的稳定性,还针对玩家在游戏中可能遇到的超时检测和恢复&…

收银系统源码-千呼新零售收银视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统,包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体,线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

JavaScript 模板字符串:让字符串拼接变得更优雅

在 JavaScript 开发中,字符串拼接是一个常见的需求。从简单的用户界面文本生成到复杂的动态数据格式化,字符串操作无处不在。传统的字符串拼接方法虽然功能强大,但往往显得冗长且难以阅读。为了解决这一问题,ES6(ECMAS…

240718_使用Labelme制作自己的图像分割数据集

240718_使用Labelme制作自己的图像分割数据集 从目标检测入门的朋友们可能更熟悉的是LabelImg,这里要注意做好区分,LabelImg和Labelme不是一个东西,如下经典图: (a)图像分类(目标检测&#xff…

Mysql深入讲解(索引、事务、锁机制)

一、MySQL索引 1、何为索引? MySQL中的索引是一种数据结构,用于加快对数据库表中数据的查询速度【查询速度提升】。它类似于书本目录,使得用户可以根据特定字段快速定位到所需的数据行,而无需扫描整个表。 2、索引分类 Hash索…

怎样对 PostgreSQL 中的慢查询进行分析和优化?

🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会!📚领书:PostgreSQL 入门到精通.pdf 文章目录 怎样对 PostgreSQL 中的慢查询进行分析和优化?一、理解慢查询的危害二、找出慢查询&#x…

Linux可视化工具-netdata之docker安装

版本要求 docker cli安装 docker pull netdata/netdata docker run -d --namenetdata \ --pidhost \ --networkhost \ -v netdataconfig:/etc/netdata \ -v netdatalib:/var/lib/netdata \ -v netdatacache:/var/cache/netdata \ -v /:/host/root:ro,rslave \ -v /etc/passwd…

[集成学习]基于python的Stacking分类模型的客户购买意愿分类预测

1 导入必要的库 import pandas as pd import numpy as np import missingno as msno import matplotlib.pyplot as plt from matplotlib import rcParams import seaborn as sns from sklearn.metrics import roc_curve, auc from sklearn.linear_model import LogisticRegres…

业务架构、数据架构、应用架构和技术架构分析

一文看懂:什么是业务架构、数据架构、应用架构和技术架构 TOGAF(开放集团架构框架)是企业广泛应用的架构设计和管理利器。其核心在于四大架构领域:业务、数据、应用和技术,助力组织高效运作。TOGAF,让架构设…

【深度学习入门篇 ⑩】Seq2Seq模型:语言翻译

【🍊易编橙:一个帮助编程小伙伴少走弯路的终身成长社群🍊】 大家好,我是小森( ﹡ˆoˆ﹡ ) ! 易编橙终身成长社群创始团队嘉宾,橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…

【Sklearn-混淆矩阵】一文搞懂分类模型的基础评估指标:混淆矩阵ConfusionMatrixDisplay

【Sklearn-混淆矩阵】一文搞懂分类模型的基础评估指标:混淆矩阵ConfusionMatrixDisplay 本次修炼方法请往下查看 🌈 欢迎莅临我的个人主页 👈这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合,智慧小天地! &…

unity渲染人物模型透明度问题

问题1:有独立的手和衣服的模型,但最终只渲染出来半透明衣服 问题2:透明度贴图是正确的但显示却不正确 这上面两个模型的问题都是因为人物模型是一个完整的,为啥有些地方可以正常显示,有些地方透明度却有问题。 其中…

使用C#实现无人超市管理系统——数据结构课设(代码+PPT+说明书)

说明:这是自己做的课程设计作业,得分情况98/100 如果想要获取私信我 本项目采用线性表中的链表来进行本次系统程序的设计。链表分为两条线,分别是存储用户信息和商品信息,并且都设为公共属性,方便对用户信息和商品信息…

艺术与技术的交响曲:CSS绘图的艺术与实践

在前端开发的世界里,CSS(层叠样式表)作为网页布局和样式的基石,其功能早已超越了简单的颜色和间距设置。近年来,随着CSS3的普及,开发者们开始探索CSS在图形绘制方面的潜力,用纯粹的代码创造出令…