使用vue3+ts+vite从零开始搭建bolg(三)(持续更新中)

三、axios,API和路由封装

3.1 axios二次封装

pnpm i axios

在src下建立如图文件夹

在request下配置请求拦截器,响应拦截器

import axios from 'axios'
import { ElMessage } from 'element-plus'let request = axios.create({baseURL: import.meta.env.VITE_SERVE,timeout: 5 * 1000,
})request.interceptors.request.use((config) => {return config
})request.interceptors.response.use((response) => {return response.data},(error) => {let message = ''let status = error.response.statusswitch (status) {case 401:message = 'TOKEN过期'breakcase 403:message = '无权访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器出现问题'breakdefault:message = '网络出现问题'break}ElMessage({type: 'error',message,})return Promise.reject(error)},
)export default request

 3.2API统一管理

这里是登录api举例,src建立如下文件夹

首先是index.ts

import request from '@/utils/request'
import type { loginForm, loginResponseData, userInfoData } from './type'enum API {LOGIN_URL = 'user/login',USERINFO_URL = 'user/info',
}//登录接口方法
export const login = (data: loginForm) =>request.post<any, loginResponseData>(API.LOGIN_URL, data)//获取用户信息
export const userInfo = () => request.get<any, userInfoData>(API.USERINFO_URL)

其次是type.ts

//登录接口需要携带参数的ts类型
export interface loginForm {username: stringpassword: string
}//登录返回的参数类型
export interface loginResponseData {code: numbermessage: stringdata: string
}//返回的userInfo类型
export interface userInfoData {code: numbermessage: stringdata: {id: stringroleNames: string[]avatar: stringname: string}
}

3.3router配置

src建立如图文件夹

pnpm i vue-router

在index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routes'let router = createRouter({history: createWebHashHistory(),routes: constantRoute,
})export default router

routes.ts下,登录,404,home配置相似

export const constantRoute: Array<RouteRecordRaw> = [{path: '/login',name: 'login',component: () => import('@/views/login/index.vue'),meta: {title: '登录',hidden: true,},},// 404{path: '/404',name: '404',component: () => import('@/views/404/index.vue'),meta: {title: '404',hidden: true,},},{path: '/:pathMatch(.*)*',redirect: '/404',name: 'Any',meta: {title: '任意路由',hidden: true,},},
]

main.ts引入路由

//引入路由
import router from './router'

注册路由

//注册路由
app.use(router)

App.vue文件

<template><router-view></router-view>
</template><script setup lang="ts">
</script><style lang="scss" scoped></style>

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

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

相关文章

DFS与回溯专题:路径总和问题

DFS与回溯专题&#xff1a;路径总和问题 一、路径总和 题目链接&#xff1a; 112.路径总和 题目描述 代码思路 对二叉树进行dfs搜索&#xff0c;递归计算每条路径的节点值之和&#xff0c;当某个节点的左右子节点都为空时&#xff0c;说明已经搜索完成某一条路径&#xff0…

牛客NC195 二叉树的直径【simple DFS C++ / Java /Go/ PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/15f977cedc5a4ffa8f03a3433d18650d 思路 最长路径有两种情况&#xff1a; 1.最长条路径经过根节点&#xff0c;那么只需要找出根节点的左右两棵子树的最大深度然后相加即可。 2.最长路径没有经过根节点&#xf…

js some对比forEach

some&#xff1a;return true可以停止循环 forEach&#xff1a;return true无法停止循环 <!DOCTYPE html> <html ng-app"my_app"><head><script type"text/javascript">const array [10, 20, 30];const targetValue 10;// 检测…

Vue3的监听属性watch和计算属性computed

监听属性watch 计算属性computed 一、监听属性watch watch 的第一个参数可以是不同形式的“数据源&#xff0c;watch 可以监听以下几种数据&#xff1a; 一个 ref (包括计算属性)、 一个响应式对象、 一个 getter 函数、 或多个数据源组成的数组 watch 的参数:监视的回调&…

Linux驱动开发——(四)内核定时器

一、内核的时间管理 1.1 节拍率 Linux内核中有大量的函数需要时间管理&#xff0c;比如周期性的调度程序、延时程序等等&#xff0c;对于驱动编写者来说最常用的是定时器。 硬件定时器提供时钟源&#xff0c;时钟源的频率可以设置&#xff0c;设置好以后就周期性的产生定时中…

STM32单片机C语言模块化编程实战:按键控制LED灯并串口打印详解与示例

一、开发环境 硬件&#xff1a;正点原子探索者 V3 STM32F407 开发板 单片机&#xff1a;STM32F407ZGT6 Keil版本&#xff1a;5.32 STM32CubeMX版本&#xff1a;6.9.2 STM32Cube MCU Packges版本&#xff1a;STM32F4 V1.27.1 虽然这里演示的是STM32F407&#xff0c;但是ST…

书生·浦语大模型第二期实战营第三节-茴香豆:搭建你的 RAG 智能助理 笔记和作业

来源&#xff1a; 视频教程&#xff1a;茴香豆&#xff1a;搭建你的 RAG 智能助理 文字教程&#xff1a;茴香豆&#xff1a;搭建你的 RAG 智能助理 作业来源&#xff1a;第三课作业 茴香豆web链接&#xff1a;茴香豆web-零编程接入飞书微信&#xff08;更新了高精度 LLM&am…

使用R语言生成频数分布表

概要 使用R语言生成频数分布表 在R语言中&#xff0c;可以使用freq()函数来生成频数分布表。首先&#xff0c;将需要分组的数据存储在一个向量中。然后&#xff0c;使用freq()函数将这个向量作为参数输入&#xff0c;即可生成频数分布表。以下是一个示例&#xff1a; 示例 …

内插和抽取

抽取&#xff1a; 频域表达式的关系&#xff1a; 1、角频率扩大M倍 2、移动2pi、22pi…&#xff08;n-1&#xff09; 2pi 3、相加 4、幅度变为1/M 内插&#xff1a; 加入低通滤波&#xff0c;减小混叠&#xff0c;但是由于截短&#xff0c;也会造成误差&#xff0c;但是…

【YOLOv8改进[检测头Head]】YOLOv8的“新头”之动态头(DynamicHead)

目录 一 DynamicHead 二 YOLOv8的“新头”之动态头 1 总体修改 2 配置文件 3 训练 其他 一 DynamicHead 官方论文地址&#xff1a;https://arxiv.org/pdf/2106.08322.pdf 官方代码地址&#xff1a;GitCode - 开发者的代码家园 在计算机视觉应用中&#xff0c;目标检测…

第四百七十五回

文章目录 1. 概念介绍2. 功能与用法2.1 主要功能2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"四个bublue包对比与总结"相关的内容&#xff0c;本章回中将介绍Get包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中将介…

力扣HOT100 - 2. 两数相加

解题思路&#xff1a; 缺位的节点进行补零处理&#xff0c;如97323补充为973023 注意相加的进位问题 class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {ListNode head null, tail null;int carry 0;while (l1 ! null || l2 ! null) {int n1 l…

2013-2021年各省经济韧性相关测度指标面板数据

2013-2021年各省经济韧性相关测度指标面板数据 1、时间&#xff1a;2013-2021年 2、指标&#xff1a;城镇化率 %、财政科学技术支出&#xff08;亿元&#xff09;、万人高等教育在校人数&#xff08;万人&#xff09;、财政教育支出&#xff08;亿元&#xff09;、第三产业占…

semaphore信号量使用+原理分析

1.概述 Semaphore 信号量&#xff0c;相当于一个计数器&#xff0c;通常用来限制线程的数量。 每个线程操作前会先获取一个许可证&#xff0c;逻辑处理完成之后就归还这个许可证。 通俗的解释&#xff1a;相当于一个停车场&#xff0c;有10个停车位&#xff0c;进来一个车&am…

本地部署Docker容器可视化图形管理工具DockerUI并实现无公网IP远程访问——“cpolar内网穿透”

文章目录 前言1. 安装部署DockerUI2. 安装cpolar内网穿透3. 配置DockerUI公网访问地址4. 公网远程访问DockerUI5. 固定DockerUI公网地址 前言 DockerUI是一个docker容器镜像的可视化图形化管理工具。DockerUI可以用来轻松构建、管理和维护docker环境。它是完全开源且免费的。基…

stack、queue(priority_queue)的模拟实现和deque的简单介绍

stack和queue(priority_queue) 1. 容器适配器 适配器(Adapter)&#xff1a;一种用来修饰容器(Containers)或仿函数(Functors)或迭代器(Iterator)接口的东西。 适配器是一种设计模式&#xff0c;该模式将一个类的接口转换成客户希望的另外一个接口。 现实中拿插座来说&#xf…

C语言进阶课程学习记录- 函数与宏分析

C语言进阶课程学习记录- 函数与宏分析 实验-宏和函数实验-宏的副作用实验-宏的妙用小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学习记录 实验-宏和函数 #include <stdio.h>#define RESET(p, len) …

【Nginx】centos和Ubuntu操作系统下载Nginx配置文件并启动Nginx服务详解

目录 &#x1f337; 安装Nginx环境 &#x1f340; centos操作系统 &#x1f340; ubuntu操作系统 &#x1f337; 安装Nginx环境 以下是在linux系统中安装Nginx的步骤&#xff1a; 查看服务器属于哪个操作系统 cat /etc/os-release安装 yum&#xff1a; 如果你确定你的系统…

Spring是如何解决循环依赖的

简介 所谓循环依赖指的是&#xff1a;BeanA对象的创建依赖于BeanB&#xff0c;BeanB对象的创建也依赖于BeanA&#xff0c;这就造成了死循环&#xff0c;如果不做处理的话势必会造成栈溢出。Spring通过提前曝光机制&#xff0c;利用三级缓存解决循环依赖问题。 变量描述single…

【C语言__指针01__复习篇11】

目录 前言 一、什么是指针 二、计算机中常见的单位 三、CPU是怎样找到一块内存空间的 四、如何得到变量的地址 五、指针变量 六、解引用指针变量的作用 七、指针变量的大小 八、指针变量类型的意义 8.1 指针的解引用 8.2 指针-整数 九、void*指针 十、const修饰变…