vue.js【网络请求和状态管理】

简介: vue.js【网络请求和状态管理】

章节概述/ Summary
在前面的开发案例中,数据都是直接定义在组件中的;而在实际开发中,项目的数据需要从服务器中获得。当我们希望互联网上的其他用户访问我们自己编写的网页时,就需要用到服务器了。在传统的网页开发中,一般使用Ajax实现JavaScript程序与服务器交互,而在Vue中,则更推荐使用Axios实现JavaScript程序与服务器交互。如果希望在项目中跨组件或页面存储、共享一些数据以实现数据的状态管理,可以使用Vuex和Pinia。本章将讲解Axios、Vuex和Pinia的使用。

Axios
Axios概述
Axios是一个基于Promise的HTTP库,可以发送get、post等请求,它作用于浏览器和Node.js中。当运行在浏览器时,使用XMLHttpRequest接口发送请求;当运行在Node.js时,使用HTTP对象发送请求。

Axios的主要特性如下:

支持所有的 API。
支持拦截请求和响应。
可以转换请求数据和响应数据,并可以将响应的内容自动转换为JSON类型的数据。
安全性高,客户端支持防御跨站请求伪造(Cross-Site Request Forgery,CSRF)。
安装Axios
Axios的安装方式主要有两种,一种是通过标签引入,另一种是使用包管理工具安装

通过标签引入
使用Unpkg或jsDelivr的内容分发网络服务提供的Axios文件,也可以将Axios文件下载至本地再引入。

使用包管理工具安装
使用npm或yarn包管理工具安装Axios。

  1. 通过标签引入
    ① 使用Unpkg的CDN服务引入Axios。


② 使用jsDelivr的CDN服务引入Axios。


注意:读者也可以从Axios官方网站中直接下载Axios,下载后再将文件引入网页。因为需要将文件下载到本地,所以不需要考虑无网络的情况。

  1. 使用包管理工具安装
    使用npm或yarn包管理工具安装Axios。

使用npm包管理工具安装

npm install axios --save

使用yarn包管理工具安装

yarn add axios --save
在Vue 3项目中使用yarn安装Axios

使用Axios
在项目中使用Axios时,通常的做法是先将Axios封装成一个模块,然后在组件中导入模块。

① 将Axios封装成模块,创建src\axios\request.js文件。

import axios from 'axios'
const request = axios.create({
timeout: 2000
})
export default request
② 在组件中导入模块,在src\App.vue文件中导入模块。

import request from './axios/request.js'
Axios常用的请求方式:get请求和post请求。

① 使用Axios发送get请求的基本语法格式。

request({
url: '请求路径',
method: 'get',
params: { 参数 }
}).then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})
② 使用Axios发送post请求的基本语法格式

request({
url: '请求路径',
method: 'post',
data: { 参数 }
}).then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})
Axios图书列表案例
使用Axios实现图书列表案例,图书列表页面初始效果如下图所示。

单击上图中“请求数据”按钮,数据请求成功页面效果如下图所示。

图书列表案例的实现分为以下2步。

模拟数据:

为了方便演示,使用mockjs模拟后端接口,下面讲解如何安装mockjs,以及编写模拟数据和配置模拟数据的相关信息。

使用mockjs模拟后端接口

请求数据:

后端接口和模拟数据准备好之后,就可以请求接口、获取数据了。下面讲解如何在页面中请求接口并获取数据。

在页面中请求接口并获取数据

Vuex
Vuex概述
Vuex是一个专为Vue开发的状态管理库,它采用集中式存储的方式管理应用的所有组件的状态,解决了多组件数据通信的问题,使数据操作更加简洁。

在Vue中,组件的状态变化是通过单向数据流的设计理念实现的,单向数据流是指只能从一个方向修改状态,主要包含以下3个部分。

状态(State):驱动应用的数据源。
视图(View):以声明方式将状态映射到视图。
操作(Actions):响应在视图上的用户输入导致的状态变化。
Vuex的工作流程如下图所示。

安装Vuex
Vuex的安装方式主要有两种,一种是通过标签引入,另一种是使用包管理工具安装。

通过标签引入
使用Unpkg的CDN服务提供的Vuex文件,也可以将Vuex文件下载至本地再引入。

使用包管理工具安装
使用npm或yarn包管理工具安装Vuex。

  1. 通过标签引入
    使用Unpkg的CDN服务引入Vuex。


注意:读者也可以从Vuex官方网站直接下载Vuex,下载后再将文件引入网页。

  1. 使用包管理工具安装
    使用npm或yarn包管理工具安装Vuex。

使用npm包管理工具安装

npm install vuex --save

使用yarn包管理工具安装

yarn add vuex --save
在Vue 3项目中使用yarn安装Vuex

使用Vuex
在项目中使用Vuex时,通常的做法是先在项目中创建一个store模块,然后导入并挂载store模块。store模块是用于管理状态数据的仓库。

① 编写store模块,创建src\store\index.js文件。

② 在src\main.js文件中导入并挂载store模块。

Vuex计数器案例
要求使用Vuex实现计数器案例:

计数器初始页面中定义2个初始数字0和100,定义“+”和“-”2个按钮。每次单击“+”按钮,数字从0自增1;每次单击“-”按钮,数字会从100自减1。

计数器初始页面效果如下图所示。

在计数器初始页面中单击“+”按钮,数字从0变为1,效果如下图所示。

在计数器初始页面中单击“-”按钮,数字从100变为99,效果如下图所示。

讲解计数器案例的实现

相关文章
|
2月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
68 4
|
2月前
|
存储 监控 算法
公司内部网络监控中的二叉搜索树算法:基于 Node.js 的实时设备状态管理
在数字化办公生态系统中,公司内部网络监控已成为企业信息安全管理体系的核心构成要素。随着局域网内终端设备数量呈指数级增长,实现设备状态的实时追踪与异常节点的快速定位,已成为亟待解决的关键技术难题。传统线性数据结构在处理动态更新的设备信息时,存在检索效率低下的固有缺陷;而树形数据结构因其天然的分层特性与高效的检索机制,逐渐成为网络监控领域的研究热点。本文以二叉搜索树(Binary Search Tree, BST)作为研究对象,系统探讨其在公司内部网络监控场景中的应用机制,并基于 Node.js 平台构建一套具备实时更新与快速查询功能的设备状态管理算法框架。
60 3
|
4月前
|
监控 算法 JavaScript
企业用网络监控软件中的 Node.js 深度优先搜索算法剖析
在数字化办公盛行的当下,企业对网络监控的需求呈显著增长态势。企业级网络监控软件作为维护网络安全、提高办公效率的关键工具,其重要性不言而喻。此类软件需要高效处理复杂的网络拓扑结构与海量网络数据,而算法与数据结构则构成了其核心支撑。本文将深入剖析深度优先搜索(DFS)算法在企业级网络监控软件中的应用,并通过 Node.js 代码示例进行详细阐释。
70 2
|
4月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
存储 监控 算法
局域网网络管控里 Node.js 红黑树算法的绝妙运用
在数字化办公中,局域网网络管控至关重要。红黑树作为一种自平衡二叉搜索树,凭借其高效的数据管理和平衡机制,在局域网设备状态管理中大放异彩。通过Node.js实现红黑树算法,可快速插入、查找和更新设备信息(如IP地址、带宽等),确保网络管理员实时监控和优化网络资源,提升局域网的稳定性和安全性。未来,随着技术融合,红黑树将在网络管控中持续进化,助力构建高效、安全的局域网络生态。
106 9
|
8月前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
8月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
1163 1
|
9月前
|
存储 JavaScript 前端开发
深入理解 Vuex:Vue.js 状态管理的利器
【10月更文挑战第11天】 深入理解 Vuex:Vue.js 状态管理的利器
146 2
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript重定向对网络爬虫的影响及处理
JavaScript重定向对网络爬虫的影响及处理
|
9月前
|
存储 缓存 资源调度
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
330 0

热门文章

最新文章