当前位置：首页 > news >正文

前端开发中的状态管理与网络请求封装

news 来源：原创 2025/6/8 16:49:18

本文将对比 Vuex 和 Pinia 在状态管理中的使用，并介绍如何封装 Axios 进行网络请求。此外，我们还将讨论动态路由、404 页面跳转以及面包屑导航的实现。

话不多说，正文开始~~~

一、状态管理：Vuex 与 Pinia 对比

1. Vuex

Vuex 是 Vue.js 官方推荐的状态管理库，适用于 Vue2 和 Vue3。它的核心概念包括：

State：存储应用的状态数据。
Getters：从 State 中派生出一些状态，类似于计算属性。
Mutations：同步修改 State 的方法。
Actions：异步操作，通常用于提交 Mutations。
Modules：将 Store 分割成模块，便于管理大型应用的状态。

2. Pinia

Pinia 是 Vue3 推荐的状态管理库，相较于 Vuex，它更加轻量且易于使用。Pinia 的核心特点包括：

更简单的 API：Pinia 的 API 更加简洁，去除了 Vuex 中的 Mutations，直接使用 Actions 进行同步和异步操作。
更好的 TypeScript 支持：Pinia 天生支持 TypeScript，提供了更好的类型推断和代码提示。
模块化：Pinia 自动支持模块化，无需手动划分模块。

3. 使用 Pinia 实现跨组件状态管理

以下是一个简单的 Pinia 示例：

安装 Pinia：
```
npm install pinia
```

创建 Store：
在 src/stores 目录下创建 userStore.js：

import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({userInfo: null,isLoggedIn: false,}),actions: {login(userInfo) {this.userInfo = userInfo;this.isLoggedIn = true;},logout() {this.userInfo = null;this.isLoggedIn = false;},},
});

在组件中使用 Store：

<script setup>
import { useUserStore } from '@/stores/userStore';const userStore = useUserStore();const handleLogin = () => {userStore.login({ name: 'John Doe' });
};const handleLogout = () => {userStore.logout();
};
</script><template><div><p v-if="userStore.isLoggedIn">Welcome, {{ userStore.userInfo.name }}</p><button @click="handleLogin">Login</button><button @click="handleLogout">Logout</button></div>
</template>

二、封装 Axios 进行网络请求

在实际项目中，我们通常会对 Axios 进行封装，以便统一处理请求和响应。以下是一个简单的 Axios 封装示例：

安装 Axios：
```
npm install axios
```

创建 Axios 实例：
在 src/utils 目录下创建 request.js：

import axios from 'axios';const instance = axios.create({baseURL: process.env.VITE_API_BASE_URL,timeout: 10000,
});instance.interceptors.request.use((config) => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);instance.interceptors.response.use((response) => {return response.data;},(error) => {return Promise.reject(error);}
);export default instance;

在组件中使用封装后的 Axios：

import request from '@/utils/request';const fetchUserData = async () => {try {const response = await request.get('/api/user');console.log(response);} catch (error) {console.error(error);}
};

三、登录鉴权与动态路由

在后台管理系统中，登录鉴权和动态路由是常见的需求。以下是实现这些功能的步骤：

1. 动态路由

动态添加路由：根据用户的权限动态加载路由，使用 addRoute 方法动态添加路由。
404 页面跳转：如果没有匹配的路由，跳转到 404 页面。

2. 面包屑导航

面包屑导航可以帮助用户了解当前页面的位置。可以通过路由的 meta 信息动态生成面包屑。

以下是一个简单的实现示例：

动态路由与 404 页面：

import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',component: () => import('@/views/Home.vue'),},{path: '/login',component: () => import('@/views/Login.vue'),},{path: '/:pathMatch(.*)*',component: () => import('@/views/NotFound.vue'),},
];const router = createRouter({history: createWebHistory(),routes,
});router.beforeEach((to, from, next) => {const isLoggedIn = localStorage.getItem('token');if (to.path !== '/login' && !isLoggedIn) {next('/login');} else {next();}
});export default router;
```![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bb1e899be70845dc9c1a98246113d393.webp#pic_center)

面包屑导航：

<script setup>
import { useRoute } from 'vue-router';const route = useRoute();
const breadcrumbs = computed(() => {return route.matched.map((record) => ({text: record.meta.breadcrumb,path: record.path,}));
});
</script><template><div><nav><span v-for="(crumb, index) in breadcrumbs" :key="index"><router-link :to="crumb.path">{{ crumb.text }}</router-link><span v-if="index < breadcrumbs.length - 1"> / </span></span></nav></div>
</template>

四、HTTP 与 HTTPS

1. HTTP
HTTP（HyperText Transfer Protocol）是用于传输超文本的应用层协议。它是明文传输的，容易被中间人攻击。
2. HTTPS
HTTPS（HyperText Transfer Protocol Secure）是 HTTP 的安全版本，通过 SSL/TLS 加密传输数据，防止数据被窃取或篡改。

3. 使用 HTTPS

获取 SSL 证书：可以从证书颁发机构（CA）获取 SSL 证书，或者使用 Let’s Encrypt 免费获取。
配置服务器：在服务器上配置 SSL 证书，启用 HTTPS。
前端配置：确保前端请求的 API 地址使用 HTTPS。

五、总结

通过对比 Vuex 和 Pinia，我们可以看到 Pinia 在 Vue3 中更加简洁和高效。封装 Axios 可以帮助我们统一处理网络请求，提高代码的可维护性。

前端开发中的状态管理与网络请求封装

本文将对比 Vuex 和 Pinia 在状态管理中的使用，并介绍如何封装 Axios 进行网络请求。此外，我们还将讨论动态路由、404 页面跳转以及面包屑导航的实现。话不多说，正文开始~~~ 一、状态管理：Vuex 与 Pinia 对比 1. Vuex Vuex 是…...

编程日记 2025/6/2 19:19:39

AI 大爆发时代，音视频未来路在何方？

AI 大模型突然大火了回顾2024年，计算机领域最大的变革应该就是大模型进一步火爆了。回顾下大模型的发展历程： 萌芽期：（1950-2005） 1956年：计算机专家约翰麦卡锡首次提出“人工智能”概念，标志…...

编程日记 2025/6/3 15:10:56

30分钟内搭建一个全能轻量级springboot 3.4 + 脚手架＜5＞ 5分钟集成好caffeine并使用注解操作缓存

快速导航 <1> 5分钟快速创建一个springboot web项目 <2> 5分钟集成好最新版本的开源swagger ui，并使用ui操作调用接口 <3> 5分钟集成好druid并使用druid自带监控工具监控sql请求 <4> 5分钟集成好mybatisplus并使用mybatisplus generator自…...

编程日记 2025/6/3 15:12:00

STM32 FreeRTOS中断管理

目录 FreeRTOS的中断管理 1、STM32中断优先级管理 2、FreeRTOS任务优先级管理 3、寄存器和内存映射寄存器 4、BASEPRI寄存器 5、FreeRTOS与STM32中断管理结合使用 vPortRaiseBASEPRI vPortSetBASEPRI 6、FromISR后缀 7、在中断服务函数中调用FreeRTOS的API函数需注意 F…...

编程日记 2025/6/3 15:10:40

第10章：Python TDD优化货币类方法与引入工厂方法

写在前面这本书是我们老板推荐过的，我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后，我突然思考，对于测试开发工程师来说，什么才更有价值呢？如何让 AI 工具更好地辅助自己写代码，或许…...

编程日记 2025/6/3 2:35:46

嵌入式硬件篇---基本组合逻辑电路

文章目录前言基本逻辑门电路1.与门（AND Gate）2.或门（OR Gate）3.非门（NOT Gate）4.与非门（NAND Gate）5.或非门（NOR Gate）6.异或门（XOR Gate&#x…...

编程日记 2025/6/3 12:17:16

回归人文主义，探寻情感本质：从文艺复兴到AI时代，我的情感探索之旅

回归人文主义，探寻情感本质：从文艺复兴到AI时代，我们的情感探索之旅多年来，我们的团队一直关注人工智能，尤其是AI在音乐领域的应用研究。随着技术的不断演进，我们也不断反思：在“算法、代码、…...

编程日记 2025/6/3 12:17:00

接上回--综合AIDemo测试

一，前言上回外挂了知识库之后，我们需要使用知识库中的信息，让AI为我们实际处理业务上的需求。这里我们让AI扮演公司的人事助手，帮我们处理员工请假的业务。具体流程如下感知用户需要请假提取用户请假信息获取用户数据库中…...

编程日记 2025/6/3 6:38:11

几何数据结构之四叉树与八叉树

几何数据结构之四叉树与八叉树四叉树的定义四叉树深度的计算公式推导假设：计算过程：1. 划分空间：2. 节点容纳的最小距离：3. 解出深度：4. 考虑常数项： 总结： 八叉树四叉树的定义四叉树&#…...

编程日记 2025/6/3 3:35:42

postman请求参数化

postman界面介绍一、使用环境变量（Environment Variables）进行参数化 1、在请求中使用环境变量在请求的url、请求头（Headers）、请求体（Body）等部分都可以使用环境变量。 URL 部分示例点击 Postman 界面右上角的 “眼睛” 图标（Environment Quick Look）打开环境管理…...

编程日记 2025/6/4 16:30:38

private final static String tempPath "C:\\Users\\xxx\\Desktop\\Word2Html\\src\\test\\";//图片及相关文件保存的路径public static void main(String argv[]) {try {JFileChooser fileChooser new JFileChooser();fileChooser.setDialogTitle("Select a …...

编程日记 2025/6/3 12:17:31

＜电子幽灵＞开发笔记:BAT基础笔记(一）

BAT脚本基础笔记(一) 介绍费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。提示：作为低代码…...

编程日记 2025/6/3 12:18:04

Leetcode::3427.变长子数组求和

给你一个长度为 n 的整数数组 nums 。对于每个下标 i（0 < i < n），定义对应的子数组 nums[start ... i]（start max(0, i - nums[i])）。返回为数组中每个下标定义的子数组中所有元素的总和。子数组是数组中…...

编程日记 2025/6/3 12:18:51

通过以太网加载linux内核、设备树、根文件系统方法（以stm32MP135为例）

0 硬件平台正点原子stm32MP135开发板 1 通过以太网加载linux内核、设备树、根文件系统方法（以stm32MP135为例） 在产品正式发布前，为了调试方便，我们可以使用以太网加载linux内核、设备树、根文件系统以加快调试速度。本文以stm3…...

编程日记 2025/6/3 12:17:47

mac配置stable diffusion以及模型出图优化

1. 基础stable diffusion webui安装使用的工程是stable-diffusion-webui，直接clone下来即可。然后创建一个conda环境，python为3.9 激活conda环境后，执行./webui.sh即可。脚本会自动安装必要的包，然后启动网页。默认有一个sd…...

编程日记 2025/6/3 12:18:20

LeetCode热题100(子串篇)

LeetCode热题100 说是子串，其实是子区间~ 560. 和为 K 的子数组给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。思路思路： 和为k的子数组，看到…...

编程日记 2025/6/3 5:19:41

从密码学原理与应用新方向到移动身份认证与实践

相关学习资料放下面啦！ 记得关注❤️～后续分享更多资料通过百度网盘分享的文件：从密码学原理与应... 链接https://pan.baidu.com/s/1mHpHkvPuf8DUwReQkoYQlw?pwdGza7 提取码：Gza7 复制这段内容打开「百度网盘APP 即可获取」记…...

编程日记 2025/6/3 5:01:56

【Flink系列】9. Flink容错机制

9. 容错机制在Flink中，有一套完整的容错机制来保证故障后的恢复，其中最重要的就是检查点。 9.1 检查点（Checkpoint） 9.1.1 检查点的保存 1）周期性的触发保存 “随时存档”确实恢复起来方便，可是需要我…...

编程日记 2025/6/3 20:29:52

【物联网】ARM核介绍

文章目录一、芯片产业链1. CPU核(1)ARM(2)MIPS(3)PowerPc(4)Intel(5)RISC-V 2. SOC芯片(1)主流厂家(2)产品解决方案 3. 产品二、ARM核发展1. 不同架构的特点分析(1)VFP(2)Jazelle(3)Thumb(4)TrustZone(5)SIMD(6)NEON 三、ARM核(ARMv7)工作模式1. 权限级别(privilege level)2.…...

编程日记 2025/6/3 6:50:44

spring的事物管理的认知

事物它是一个原子操作要么全部不执行，要么全部执行成功，如果有一个失败也会撤销，它保证用户每一次的操作都是可靠的，即使时出现了错误也不至于破坏数据的完整性它包含了四种特性： 原子性：保证事物要么…...

编程日记 2025/6/4 14:25:12

QT跨平台应用程序开发框架（3）—— 信号和槽

目录一，基本概念二，connect函数使用 2.1 connect 2.2 Qt内置信号和槽 2.3 一些细节三，自定义信号和槽 3.1 自定义槽函数 3.2 自定义信号 3.3 带参数的信号槽四，信号和槽的意义五，信号和槽断开连接六&…...

编程日记 2025/6/3 20:28:02

技术面试中的软素质技巧性答复集锦

1、请你自我介绍一下你自己？ 回答提示：一般人回答这个问题过于平常，只说姓名、年龄、爱好、工作经验，这些在简历上都有。其实，企业最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研…...

编程日记 2025/6/3 20:28:33

JavaWeb项目——如何处理管理员登录和退出——笔记

一、知识点 1、WebServlet注解的使用 WebServlet注解是Servlet 3.0引入的一个特性，它允许开发者在Servlet类上使用注解来声明Servlet的一些属性，从而避免在web.xml文件中进行配置。这种方式简化了Servlet的配置过程，使得代码更加简洁&#…...

编程日记 2025/6/3 20:29:21

函数递归的介绍

1.递归的定义在C语言中，递归就是函数自己调用自己上面的代码就是 main 函数在函数主体内自己调用自己但是，上面的代码存在问题：main 函数反复地自己调用自己 ，不受限制，停不下来。最终形成死递归，…...

编程日记 2025/6/3 3:19:31

昇腾环境ppstreuct部署问题记录

测试代码我是在华为昇腾910B3上测试的PPStructure。 import os import cv2 from PIL import Image #from paddleocr import PPStructure,draw_structure_result,save_structure_res from paddleocr_asyncio import PPStructuretable_engine PPStructure(show_logTrue, imag…...

编程日记 2025/6/3 20:28:49

《知识图谱：鸿蒙NEXT中人工智能的智慧基石》

在鸿蒙NEXT系统的人工智能应用中，知识图谱技术犹如一座智慧基石，为系统的智能化提供了强大的知识支撑，开启了更智能、更高效、更个性化的交互新时代。提升语义理解能力知识图谱以其结构化的知识表示方式，将各种实体和它们之间…...

编程日记 2025/6/3 10:45:18

Springboot项目Jackson支持多种接收多种时间格式

前言在springboot项目中经常会使用Jackson框架，当前端给后端传输时间类型时，我们一般需要先配置好时间格式，否则后端无法接收。以下是一些配置方法统一配置 spring:jackson:time-zone: GMT+8date-format: yyyy-MM-dd HH:mm:ss这种配置就是要求前端统一传输的格式是yyyy-…...

编程日记 2025/6/3 10:45:02

go语言zero框架通过chromedp实现网页在线截图的设计与功能实现

在 GoZero 框架中实现网页在线截图的功能，可以通过集成 chromedp 库来控制 Chrome 浏览器进行截图。chromedp 是一个基于 Chrome DevTools 协议的 Go 包，可以用来在 Go 程序中模拟浏览器操作，如页面截图、DOM 操作、表单提交等。下面是一个…...

编程日记 2025/6/3 1:55:41

基于深度学习的视觉检测小项目（十四）用SQLite数据库进行用户管理

在开始做用户管理之前，先要了解一下SQLite数据库的基础知识：https://blog.csdn.net/xulibo5828/category_12785993.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12785993&sharereferPC&sharesourcexulibo5828&sharefrom…...

编程日记 2025/6/2 14:57:12

【2024年华为OD机试】 (B卷,100分)- 敏感字段加密（Java JS PythonC/C++）

一、问题描述题目描述给定一个由多个命令字组成的命令字符串：字符串长度小于等于 127 字节，只包含大小写字母、数字、下划线和偶数个双引号；命令字之间以一个或多个下划线 _ 进行分割；可以通过两个双引号 "" 来标识包含下划线 _ 的命令字或空命令字（仅包含…...

编程日记 2025/6/3 10:47:10

图像去雾数据集的下载和预处理操作

前言目前，因为要做对比实验，收集了一下去雾数据集，并且建立了一个数据集的预处理工程。这是以前我写的一个小仓库，我决定还是把它用起来，下面将展示下载的路径和数据处理的方法。下面的代码均可以在此找到。Auo…...

编程日记 2025/6/2 14:58:58

Vue3数据响应式原理

什么是数据响应式当数据变化时，引用数据的函数（副作用函数）自动重新执行。即数据触发了函数的响应，如：视图渲染中使用了某数据，数据改变后，视图跟着自动更新。触发者：数据响应者…...

编程日记 2025/6/3 10:46:07

5.最长回文子串--力扣

给你一个字符串 s，找到 s 中最长的回文子串。示例 1： 输入：s “babad” 输出：“bab” 解释：“aba” 同样是符合题意的答案。示例 2： 输入：s “cbbd” 输出：“bb” 原题如上&…...

编程日记 2025/6/3 10:46:54

ChatGPT大模型极简应用开发-CH1-初识 GPT-4 和 ChatGPT

文章目录 1.1 LLM 概述1.1.1 语言模型和NLP基础1.1.2 Transformer及在LLM中的作用1.1.3 解密 GPT 模型的标记化和预测步骤 1.2 GPT 模型简史：从 GPT-1 到 GPT-41.2.1 GPT11.2.2 GPT21.2.3 GPT-31.2.4 从 GPT-3 到 InstructGPT1.2.5 GPT-3.5、Codex 和 ChatGPT1.2.6 …...

编程日记 2025/6/3 10:45:50

python学opencv|读取图像（三十九）阈值处理Otsu方法

【1】引言前序学习了5种阈值处理方法，包括(反)阈值处理、(反)零值处理和截断处理，还学习了一种自适应处理方法，相关文章链接为： python学opencv|读取图像（三十三）阈值处理-灰度图像-CSDN博客 python学o…...

编程日记 2025/6/3 10:46:22

统信V20 1070e X86系统编译安装mysql-5.7.44版本以及主从构建

设备信息操作系统版本架构CPU内存备注统信UOS V20 1070eX864C8G此配置仅做编译安装验证，持续运行或数据量增长大请自行评估资源配置。统信UOS V20 1070eX864C8G 资源包该包包含mysql-5.7.44源码包、boost资源包、统信编译mysql-5.7.44安装包通过网盘分享的文件…...

编程日记 2025/6/4 2:08:54

麒麟LINUX V10SP3 2401安装ORACLE 12.2.1 runInstaller直接报UNZIP格式不对

好久没有安装ORACLE了，一般都是RHEL上安装得比较多，这不，现在大家都是选择国产操作系统来安装数据库了，以前在龙蜥，欧拉，麒麟上也安装过，都没有问题，想来在麒麟LINUX v10sp3 2401上面…...

编程日记 2025/6/4 2:07:33

10 为什么系统需要引入分布式、微服务架构

java技术的发展在java开始流行起来之后，主要服务于企业家应用，例如ERP,CRM等等，这些项目是为企业内部员工使用，我们的思维是怎么用设计模式，如何封装代码。让开发人员关注到业务上去，系统也就那么几十几百…...

编程日记 2025/6/4 2:09:25

【Web】2025西湖论剑·中国杭州网络安全安全技能大赛题解(全)

目录 Rank-l Rank-U sqli or not Rank-l username存在报错回显，发现可以打SSTI 本地起一个服务，折半查找fuzz黑名单，不断扔给fenjing去迭代改payload from flask import Flask, request, render_template_stringapp Flask(__name__)app…...

编程日记 2025/6/3 17:02:43

openharmony应用开发快速入门

开发准备本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用（如下图所示），快速了解工程目录的主要文件，熟悉OpenHarmony应用开发流程。在开始之前，您需要了解有关OpenHarmon…...

编程日记 2025/6/4 2:09:09

解决npm install安装出现packages are looking for funding run `npm fund` for details问题

当我们运行npm install时，可能会收到类似以下的提示信息：“x packages are looking for funding.” 这并不是错误提示，也不会影响项目的正常运行。其实实在提醒有一些软件包正在寻求资金支持。根据提示输入npm fund可以查看详细的信息&#…...

编程日记 2025/6/2 18:02:05

python助力WRF自动化运行

对大部分人而言，特别是新用户，WRF模式的安装繁琐且不必要，可以作为后续进阶掌握的技能，本学习跳过繁琐的安装步骤，直接聚焦模式的运行部分，通过短平快的教学，快速掌握模式运行。进一步将python语…...

编程日记 2025/6/4 2:08:06

Go-知识版本演进

Go-知识版本演进 Go release notesr56(2011/03/16)r57(2011/05/03)Gofix 工具语言包工具小修订 r58(2011/06/29)语言包工具小修订 r59(2011/08/01)语言包工具 r60(2011/09/07)语言包工具 [go1 2012-03-28](https://golang.google.cn/doc/devel/release#go1)[go1.1 2013-05-13]…...

编程日记 2025/6/4 16:45:08

企业级NoSQL数据库Redis

1.浏览器缓存过期机制 1.1 最后修改时间 last-modified 浏览器缓存机制是优化网页加载速度和减少服务器负载的重要手段。以下是关于浏览器缓存过期机制、Last-Modified 和 ETag 的详细讲解： 一、Last-Modified 头部定义：Last-Modified 表示服务器上资源…...

编程日记 2025/6/4 13:21:36

Android渲染Latex公式的开源框架比较

对比主流框架，介绍如下几款 1、AndroidMath 官网：https://github.com/gregcockroft/AndroidMath/tree/master 基于android原生view方式渲染优点：速度快，开源协议 MIT license 缺点：不支持文字公式混合渲染 2、Ma…...

编程日记 2025/6/4 2:08:22

ARM学习（42）CortexM3/M4 MPU配置

笔者之前学习过CortexR5的MPU配置，现在学习一下CortexM3/M4 MPU配置 1、背景介绍笔者在工作中遇到NXP MPU在访问异常地址时，就会出现总线挂死，所以需要MPU抓住异常，就需要配置MPU。具体背景情况可以参考ARM学习（41）NXP MCU总线挂死，CPU could not be halted以及无法连…...

编程日记 2025/6/3 0:00:21