TypeScript高级内容

完整总结

本节课涵盖了本地开发环境的搭建、前后端的基本交互、以及如何封装 Axios 以增强代码的安全性和可维护性。此外,我们还解决了在代码实现过程中可能遇到的一些常见问题。

1. 本地环境搭建
  • 安装环境依赖:首先需要在本地安装 Node.js(推荐最新稳定版),并全局安装 Vite。通过 Vite 创建 Vue 3 + TypeScript 项目,安装相关依赖后,启动开发服务器进行调试。
  • Vue 单文件组件 (SFC):我们在 src/components/HelloWorld.vue 中看到,Vue 的单文件组件将组件的逻辑、模板和样式封装在一个文件内,便于管理和维护。
2. 使用 Axios 进行网络请求
  • 引入 Axios:在项目中引入 Axios 库,并通过 GET 和 POST 方法与 FastAPI 后端进行通信。示例代码展示了如何在 TypeScript 环境下进行网络请求,并处理返回的数据。
  • FastAPI 后端搭建:使用 Python 3.10.5 及以上版本搭建 FastAPI 后端,配置 CORS 中间件以支持跨域访问,并通过 Uvicorn 运行应用。在启动 FastAPI 后端时需要注意,0.0.0.0 不是一个具体的 IP 地址,访问时需使用 http://127.0.0.1:8009http://localhost:8009
3. 代码问题与解决方案

在实践中,遇到了一些常见的代码问题,包括:

  1. 网络请求无法访问后端:通常这是由于错误的 IP 地址引起的。通过使用本地 IP 地址 (127.0.0.1) 或 localhost 解决该问题。

  2. GET 和 POST 请求的正确配置:在封装 Axios 时,通过 params 参数传递 GET 请求的 URL 参数,确保在请求发出时这些参数能够正确传递给后端。

  3. 前后端交互不成功:检查前端 Axios 请求和后端 FastAPI 路由是否正确匹配,确保请求路径和参数格式一致。

4. 封装 Axios

为了克服 Axios 原生用法中的一些局限性,并更好地支持 TypeScript 的类型检查与语法提示,进行了以下封装工作:

  • 统一处理请求头:在 axios.create 方法中创建 Axios 实例对象,并设置全局的请求和响应拦截器,以确保请求头统一处理。
  • 统一管理接口:在 request 文件夹中添加 api.ts 文件,集中管理所有接口,避免每次请求都重新加载接口文件。
  • 避免回调地狱:通过封装异步请求,结合 async/await 语法,使代码结构更加清晰,避免传统回调方法带来的复杂性。
5. TypeScript 与 Axios 的结合
  • 类型声明:Axios 提供了完整的类型声明,通过泛型参数 TRD,分别定义服务器返回的数据类型、经过 Axios 包装后的响应对象类型,以及请求配置对象的类型。
  • 封装 Axios 实例:通过 axios.create 方法创建实例,设置请求和响应拦截器,处理全局的请求配置与错误响应。
  • 模块化接口管理:将请求接口根据业务模块划分到不同的文件中(如 user/api.ts),并在组件中调用这些封装好的接口,实现代码的高内聚与低耦合。
6. 前端与后端的交互
  • 示例实现:在 Vue 组件中,通过按钮点击触发 Axios 请求,使用封装后的接口函数发送请求,并在控制台输出服务器返回的数据。通过 GET 请求从 FastAPI 后端获取数据,或通过 POST 请求发送数据到后端。

结论

通过本节课的学习,不仅学会了如何在本地搭建 Vue 3 + TypeScript 的开发环境,还掌握了与 FastAPI 后端的交互方式。更重要的是,了解了如何通过封装 Axios 来优化代码结构,使其更加安全、简洁且易于维护。在解决代码问题的过程中,学会了如何排查和处理常见的前后端交互问题,使得开发过程更加顺畅。

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

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

相关文章

Linux安装virtualenvwrapper

workon 是 virtualenvwrapper 工具的一部分,用于管理 Python 虚拟环境。如果你看到这个错误,可能是因为 virtualenvwrapper 没有正确安装或配置。 解决步骤 安装 virtualenv 和 virtualenvwrapper 首先,确保你已经安装了 virtualenv 和 virt…

【Java数据结构】 链表

【本节目标】 1. ArrayList 的缺陷 2. 链表 3. 链表相关 oj题目 一. ArrayList的缺陷 上节课已经熟悉了ArrayList 的使用&#xff0c;并且进行了简单模拟实现。通过源码知道&#xff0c; ArrayList 底层使用数组来存储元素&#xff1a; public class ArrayList<E>…

二叉树进阶学习——从中序和后续遍历序列构建二叉树

1.题目解析 题目来源&#xff1a;106.从中序和后序遍历序列构造二叉树 测试用例 2.算法原理 后序遍历&#xff1a;按照左子树->右子树->根节点的顺序遍历二叉树&#xff0c;也就是说最末尾的节点是最上面的根节点 中序遍历&#xff1a;按照左子树->根节点->右子树…

一次解决Go编译问题的经过

用Go语言编写了一个小的项目&#xff0c;项目开发环境是在本地的Windows环境中&#xff0c;一切单元测试和集成测试通过后&#xff0c;计划将项目部署到VPS服务器上自动运行&#xff0c;但在服务器上执行go run运行时&#xff0c;程序没有任何响应和回显&#xff0c;甚至main函…

前端辅助工具分享(像素大厨)

引言&#xff1a; 我们在从事前端开发工作时&#xff0c;常会需要测量许多盒子的尺寸&#xff0c;颜色提取种种&#xff0c;切图&#xff0c;还有文字大小等信息&#xff0c;光从肉眼很难看出来&#xff0c;当然我们传统的会使用Photoshop来帮助我们完成这些工作&#xff0c;但…

【LuBase低代码框架】动态数据源服务介绍

功能介绍&#xff1a; 可以通过配置一个QueryOption对象或者一条select 查询语句&#xff0c;返回当前应用下的数据&#xff0c;避免后端写代码开发。 使用方法&#xff1a; 1. 动态服务需要通过/invoke/datasource和/invoke/datasourceNoRight 地址发起调用 2. 可使用参数…

工程师 - 什么是DRM

DRM 是数字版权管理&#xff08;Digital Rights Management&#xff09;的缩写&#xff0c;是一套用于控制数字内容&#xff08;如音乐、电影、电子书、软件和游戏&#xff09;的访问、共享和分发方式的技术和工具。DRM 的目标是防止未经授权复制、分发和修改受版权保护的数字资…

解决Excel时出现“被保护单元格不支持此功能“的解决办法,详细喂饭级教程

今天有个朋友发过来一个excel文件&#xff0c;本来想修改表格的内容&#xff0c;但是提示&#xff0c;被保护单元格不支持此功能&#xff0c;对于这个问题&#xff0c;找到一个解决方法&#xff0c;现记录下来&#xff0c;分享给有需要的朋友。 表格文件名为aaa.xls,以WPS为例。…

用Python实现运筹学——Day 11: 线性规划的实际应用

一、学习内容 1. 不同领域中线性规划的经典应用场景 线性规划在多个领域中有广泛的应用&#xff0c;常见的应用领域包括&#xff1a; 生产计划与资源分配&#xff1a;用于优化生产调度、资源分配和生产线管理&#xff0c;最大化利润或最小化成本。物流与运输&#xff1a;解决…

【RabbitMQ】面试题

在本篇文章中&#xff0c;主要是介绍RabbitMQ一些常见的面试题。对于前几篇文章的代码&#xff0c;都已经在码云中给出&#xff0c;链接是mq-test: 学习RabbitMQ的一些简单案例 (gitee.com)&#xff0c;如果存在问题的话欢迎各位提出&#xff0c;望共同进步。 MQ的作用以及应用…

.Net 6.0 监听Windows网络状态切换

上次发了一个文章获取windows网络状态&#xff0c;判断是否可以访问互联网。传送门&#xff1a;获取本机网络状态 这次我们监听网络状态切换&#xff0c;具体代码如下&#xff1a; public class WindowsNetworkHelper {private static Action<bool>? _NetworkStatusCh…

【课程学习】Wireless Communications

Goldsmith A. Wireless communications[M]. Cambridge university press, 2005. Wireless Communications 无线通信课程 文章目录 2-Path Loss, Shadowing, and Multipath2.4-Two-Ray Multipath Model时延扩展 delay spread P33 3-Statistical Multipath Channel Models3.3-Wid…

一站式大语言模型API调用:快速上手教程

智匠MindCraft是一个强大的AI工具及开发平台&#xff0c;支持多种大语言模型和多模态AI模型。本文将详细介绍如何通过API调用智匠MindCraft中的大语言模型&#xff0c;帮助开发者快速上手。 注册与登录 访问智匠MindCraft官网&#xff0c;注册并登录账号。 进入开发者平台&…

scrapy爬虫基础

一、初识 创建项目&#xff1a; scrapy startproject my_one_project # 创建项目命令 cd my_one_project # 先进去&#xff0c; 后面在里面运行 运行爬虫命令为&#xff1a;scrapy crawl tk spiders下创建test.py 其中name就是scrapy crawl tk &…

Cpp::STL—string类的使用与理解(上)(8)

文章目录 前言一、string类对象的构造函数string()string(const char* s)string(size_t n, char c)string(const string& s)string(const string& str&#xff0c;size_t pos&#xff0c;size_t len npos) 二、string类对象的容量操作size与lengthcapacitycapacity返回…

缓存穿透、击穿、雪崩及解决方案

在分布式系统中&#xff0c;尤其是使用缓存的系统中&#xff0c;缓存雪崩、缓存穿透和缓存击穿是常见的问题。下面详细说明这三者的定义和解决方案&#xff1a; 1. 缓存穿透 定义&#xff1a;缓存穿透是指请求的数据在缓存和数据库中都不存在。由于每次请求都会直接查询数据库…

Docekrfile和docker compose编写指南及注意事项

Dockerfile 基础语法 我们通过编写dockerfile,将每一层要做的事情使用语法固定下来&#xff0c;之后运行指令就可以通过docker来制作自己的镜像了。 构建镜像的指令&#xff1a;docker build /path -t imageName:tag 注意&#xff0c;docker build后的path必须是dockerfile…

阿里云对象存储OSS 速学

目录 1.创建一个Bucket 2.创建密钥AccessKey 3.在文档中心打开阿里云对象存储OSS 4.参考上传文件示例 以官网的文档为主&#xff0c;我的文章教学为辅 官网有详细的视频介绍&#xff1a; OSS快速入门_对象存储(OSS)-阿里云帮助中心 (aliyun.com)https://help.aliyun.com/…

25考研咨询周开启,西安电子科技大学是否改考408??

学长这几天帮大家问了西安电子科技大学是否会从833、834、953改考为408&#xff1f; 西电老师回复&#xff1a;根据上级文件要求&#xff0c;招生简章以及专业目录会在网上报名开始前公布&#xff0c;专业课不会又大变动&#xff01; 因为大家安心复习即可&#xff0c;保证今…

java解决跨域问题时的403报错

什么是跨域问题&#xff1f; 当一个请求的url的协议&#xff0c;域名&#xff0c;端口三者之间任意一个与当前页面url不同 即为跨域 问题背景&#xff1a; 如图&#xff0c;前端端口为8090&#xff0c;而后端端口为8099&#xff0c;形成跨域&#xff0c;无法对接 试图利用Spr…