【VUE】axios组件

1. 快速使用

  • npm install axios
  • LoginView.vue
    import axios from "axios"
    axios.get("...")
    axios.post("...")
    axios.axios({method: "get"
    })
    

2. 通用配置

  • npm install axios
  • plugins/axios.js
    import axios from "axios";let config = {baseURL: "xxx",timeout: 20 * 1000   // ms
    }const _axios = axios.create(config)
    // 拦截器
    _axios.interceptors.request.use(function (config){xxx;return config
    })export default _axios
    
  • LoginView.vue
    <script setup>
    import _axios from "@/plugins/axios.js";
    _axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {console.log(res.data)
    })
    </script>
    

3. 示例

plugins/axios.js

import axios from "axios";let config = {baseURL: "https://api.luffycity.com/",timeout: 20 * 1000
}const _axios = axios.create(config)// 拦截器
_axios.interceptors.request.use(function (config){// console.log("请求前:", config)// 1. 去pinia中读取当前用户token// 2. 发送请求时携带tokenif(config.params){config.params["token"] = "djbfkjbdfkj"} else {config.params = {"token": "whejsabjdnfj"}}return config
})export default _axios

LoginView.vue

<template><div class="box"><p>用户名:<input type="text" placeholder="用户名" v-model="msg.username"></p><p>密码:<input type="text" placeholder="密码" v-model="msg.password"></p><p><button @click="doLogin">登录</button></p></div>
</template><script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {userInfoStore} from "@/stores/user.js";
import _axios from "@/plugins/axios.js";const msg = ref({username: "",password: ""
})
const router = useRouter()
const store = userInfoStore()const doLogin = function () {// 1、获取数据console.log(msg.value)// 2、发送网络请求_axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {console.log(res.data)})// 3、本地存储用户信息(登录凭证)// localStorage.setItem("name", msg.value.username)let info = {id: 1, name: msg.value.username, token: "ddsafhsjdfkj"}store.doLogin(info)// 3、跳转到首页router.push({name: "mine"})
}</script><style scoped>
.box {width: 300px;margin: 100px auto;
}
</style>

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

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

相关文章

基于nodejs+vue的农产品销售管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

C++学习笔记----8、掌握类与对象(一)---- 对象中的动态内存分配(4)

2.4、使用Move语法处理移动 类的move语法要求一个move构造函数和一个move赋值操作符。这些可以用于编译器&#xff0c;当源对象是一个临时对象在操作完成时就会被析构&#xff0c;你马上就会看到&#xff0c;显式地使用std::move()。move移动内存的属主以及从一个对象到另一个对…

FortiGate 无线组网

无线管理与配置 FortiAP 连接 internal 接口之后自动获得 ip 地址&#xff1a;192.168.1.xxx/24在 FortiGate 中创建 SSIDFortiGate 自动发现 FortiAP&#xff0c;将 FortiAP 添加到 FortiGate将 SSID 和 FortiAP 关联创建防火墙策略 下面我们就来一起看看在 FortiGate 中该如…

ModbusTCP通讯错误的排查

Modbus是一种由MODICON公司开发的工业现场总线协议标准&#xff0c;是一项应用层报文传输协议。该协议用于传输数字和模拟变量[1]。有关该协议的报文具体格式&#xff0c;以及一些基本概念&#xff0c;见[1]。 本文以一个例子&#xff0c;阐述当ModbusTCP通讯出现错误的时候&a…

开源鸿蒙OpenHarmony系统更换开机Logo方法,瑞芯微RK3566鸿蒙开发板

本文适用于开源鸿蒙OpenHarmony系统更换开机Logo&#xff0c;本次使用的是触觉智能的Purple Pi OH鸿蒙开源主板&#xff0c;搭载了瑞芯微RK3566芯片&#xff0c;类树莓派设计&#xff0c;是Laval官方社区主荐的一款鸿蒙开发主板。 介绍 OpenHarmony的品牌标志、版本信息、项目…

计算机毕业设计 基于Hadoop的智慧校园数据共享平台的设计与实现 Python 数据分析 可视化大屏 附源码 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

探索EasyCVR视频融合平台:在视频编解码与转码领域的灵活性优势

随着视频监控技术的飞速发展&#xff0c;各类应用场景对视频数据的处理需求日益复杂多样。从公共安全到智慧城市&#xff0c;再到工业监控&#xff0c;高效、灵活的视频处理能力成为衡量视频融合平台性能的重要标准。在众多解决方案中&#xff0c;EasyCVR视频融合平台凭借其在视…

大觅网之自动化部署(Automated Deployment of Da Mi Network)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…

音视频整体解码流程和同步流程

目录 1. 整体解码流程1. 初始化 FFmpeg2. 打开媒体文件3. 查找解码器4. 打开解码器5. 读取和解码数据6. 处理解码后的帧7. 释放资源 2. 音视频同步整体流程1. 解复用媒体流2. 解码3. 以音频为时钟源进行音视频同步的策略4. 缓冲区设计 现在先说大体流程&#xff0c;不分析代码 …

使用python爬取豆瓣网站?如何简单的爬取豆瓣网站?

1.对python爬虫的看法 首先说说我对python的看法&#xff0c;我的专业是大数据&#xff0c;我从事的工作是java开发&#xff0c;但是在工作之余&#xff0c;我对python又很感兴趣&#xff0c;因为我觉得python是一门很好的语言&#xff0c;第一&#xff1a;它可以用来爬取数据…

如何使用 Rust 框架进行 RESTful API 的开发?

一、RESTful API 的开发 使用 Rust 框架进行 RESTful API 开发&#xff0c;你可以选择多种流行的 Rust Web 框架&#xff0c;如 Actix-web、Rocket、Warp 和 Tide 等。以下是使用这些框架进行 RESTful API 开发的基本步骤和概念&#xff1a; 选择框架&#xff1a;根据项…

DRF笔记

一、CBV与FBV FBV&#xff08;Function-Based Views&#xff09; # views.py from django.shortcuts import HttpResponse from django.views.decorators.csrf import csrf_exemptcsrf_exempt def book_views(request):if request.method "GET":return HttpRespo…

区块链—共享块存储安全可信任可追踪分布式数据库系统技术

审核不过&#xff1f;这里面没有广告 为什么被识别为广告&#xff1f; 什么是区块链&#xff1f; 区块链是一种不可篡改的共享分类账&#xff0c;有助于推动业务网络中记录交易和跟踪资产的过程。 资产可以是有形的&#xff08;房屋、汽车、现金、土地&#xff09;&#xff…

探索 Snowflake 与 Databend 的云原生数仓技术与应用实践 | Data Infra NO.21 回顾

上周六&#xff0c;第二十一期「Data Infra 研究社」在线上与大家相见。活动邀请到了西门子数据分析师陈砚林与 Databend 联合创始人王吟&#xff0c;为我们带来了一场关于 Snowflake 和 Databend 的技术探索。Snowflake&#xff0c;这个市值曾超过 700 亿美元的云原生数据仓库…

李宏毅机器学习2023-HW10-Adversarial Attack

文章目录 TaskBaselineFGSM (Fast Gradient Sign Method (FGSM)I-FGSM(Iterative Fast Gradient Sign Method)MI-FGSM(Momentum Iterative Fast Gradient Sign Method)M-DI2-FGSM(Diverse Input Momentum Iterative Fast Gradient Sign Method) Reportfgsm attackJepg Compress…

性能优化与资源管理:优化Selenium脚本的执行效率,合理管理浏览器实例和系统资源

目录 引言 一、Selenium基础与常用方法 1.1 Selenium简介 1.2 Selenium基础用法 二、Selenium性能优化技巧 2.1 使用WebDriverWait实现显式等待 2.2 启用无头模式 2.3 设置合理的页面加载策略 2.4 禁用图片和JavaScript加载 2.5 优化元素定位 2.6 合理使用隐式等待和…

国产化框架PaddleYOLO结合Swanlab进行作物检测

1. 项目介绍 粮食安全&#xff0c;作为人类生存与发展的基石&#xff0c;始终是全球关注的焦点。它不仅仅关乎粮食的充足供应&#xff0c;更涉及粮食的质量安全、营养健康以及可持续生产等多个维度。在全球化、气候变化和资源环境约束日益加剧的背景下&#xff0c;如何确保粮食…

Node-GDAL:简洁强大的Node.js地理空间数据处理库

一、简介 node-gdal是Node.js环境下的一个强大库&#xff0c;它是GDAL&#xff08;Geospatial Data Abstraction Library&#xff09;的原生绑定库。GDAL是一个开源的地理空间数据处理库&#xff0c;用于读写多种栅格和矢量地理空间数据集。node-gdal允许开发者在Node.js环境中…

@interface注解详解

Java 中用于定义注解的关键字。虽然它看起来像接口的定义&#xff0c;但它实际上是一个特殊的类型&#xff0c;用于创建自定义注解。 注解的特点 自定义元数据: 注解允许你为代码中的元素&#xff08;类、方法、字段等&#xff09;添加元数据&#xff0c;这些元数据可以在运行…

从0开始linux(5)——vim

欢迎来到博主的专栏&#xff1a;从0开始linux 博主ID&#xff1a;代码小豪 文章目录 vim的多种模式底行模式命令命令模式视块模式&#xff08;visual block&#xff09; vim的配置 vim是linux系统的文本编辑器。就像windows的记事本一样。 使用vim指令可以使用vim打开一个文本文…