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

Axios、SASS学习笔记

目录

前言

一、Axios基础认识

1、简介

2、相关文档

3、基本配置

4、基础快捷使用

二、Axios封装

1、公共配置文件

2、细化每个接口的配置

3、使用并发送请求

三、SASS

1、简介

2、相关文档

3、使用前奏

4、使用变量

5、嵌套规则

6、父级选择器标识 &


前言

1、打包工程各个页面的统一命名

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

注意:/* webpackChunkName: "about" */不是注释,作用:打包工程时文件的命名开头统一

2、网页地址时有时无的 #

const router = new VueRouter({mode: "history",//控制网址是否有#,设置了就没有#base: process.env.BASE_URL,routes,
});

一、Axios基础认识

1、简介

Axios 是一个基于 promise 网络请求库,作用于 node.js 和浏览器中

它是 isomorphic (同构)的,即同一套代码可以运行在浏览器和 node.js 中

在服务端它使用原生 node.js http 模块,而在客户端 (浏览端) 则使用 XMLHttpRequests

2、相关文档

(1)Axios官方文档

起步 | Axios中文文档 | Axios中文网icon-default.png?t=N7T8https://www.axios-http.cn/docs/intro(2)现代 JavaScript 教程之Promise

Promiseicon-default.png?t=N7T8https://zh.javascript.info/promise-basics

3、基本配置

(1)安装

npm install axios

(2)引入:在main.js文件中引入

// 使用CommonJS规范
const axios = require('axios').default;
// 使用Es6规范
import axios from 'axios'

4、基础快捷使用

(1)未带请求参数

/* GET请求 */
axios.get('url',{}).then((res)=>{//成功console.log(res)}).catch((err)=>{console.log(err)})/* POST请求 */
axios.post("url", {username: "xxxxxx",password: "xxxxxx",
}).then((res) => {console.log(res);}).catch((err) => {console.log(err);});

(2)带请求参数

注意:GET请求带参使用params;POST请求带参使用data

/* GET请求 */
axios({method:"GET",url:'',params:{key:'',},
}).then((res)=>{console.log(res)}).catch((err) => {console.log(err);});/* POST请求 */
axios({method:"POST",url:'',data:{key:'',},headers:{'content-type':'application/x-www-form-urlencoded',},
}).then((res)=>{console.log(res)}).catch((err) => {console.log(err);});

二、Axios封装

1、公共配置文件

在src文件夹下=》创建request文件夹=》request.js文件

/* request.js */
// 引入axios
import axios from "axios";// 创建实例,并带上默认配置
const instance = axios.create({baseURL: "",// timeout 指定请求超时的毫秒数// 如果请求时间超过 timeout 的值,则请求会被中断timeout: 1000, // 默认值是 0 (永不超时)headers: {'X-Custom-Header': 'f3oobar'} // 默认请求头
});// 导出实例
export default instance;

2、细化每个接口的配置

在src文件夹下=》新建api文件夹=》新建js文件,如about.js、home.js、index.js...

/* /api/index.js */// 引入axios实例
import instance from '@/request/request.js'// 获取用户信息(GET请求)
export function userInfo(params){return instace({url:"/user",method:"GET",params//增强写法})
}// 获取用户信息(POST请求)
export function userInfo(data){return instace({url:"/user",method:"POST",data,headers:{'content-type':'application/x-www-form-urlencoded'}})
}

3、使用并发送请求

到.vue页面文件中,按需引入需要用的接口函数

<template>
<div>欢迎登录系统。
</div>
</template>
<script>// 引入接口函数import { userInfo } form '@/api/index.js'export default{created(){this.getUserInfo()},method:{getUserInfo(){userInfo({ID:12345}).then(res=>{console.log(res)}).catch(err=>{console.error(err)})}}}
</script>

三、SASS

1、简介

Sass 是一款强化 CSS 的辅助工具

它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能

这些拓展令 CSS 更加强大与优雅,以及更高效地开发项目

2、相关文档

Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言icon-default.png?t=N7T8https://www.sass.hk/guide/

3、使用前奏

(1)快速安装

通过创建Vue脚手架时,勾选【CSS Pre-processors】=>【Sass/SCSS (with dart-sass)】

(2)开启sass

<style>标签中,加上属性配置:lang="scss"

<style lang="scss">

4、使用变量

(1)声明变量

用 $ 声明变量,用 : 赋值

$highlight-color: #F90;

(2)变量引用

用 $ 直接引用变量,sass会自动解析

border: 1px solod $highlight-color;

(3)代码示例

<template><div><h1>主页</h1><p>1</p><p>1</p></div>
</template><style lang="scss" scoped>
$font-color: #F90;
$bg: #4662D9;h1 {color: $font-color;
}
p {color: $font-color;
}
</style>

5、嵌套规则

在sass中,可以像俄罗斯套娃那样在规则块中嵌套规则块,嵌套关系即父子关系

sass在输出css时会把这些嵌套规则处理好,避免重复书写

注意:此嵌套关系并非严谨的直系父子关系,仅代表包含关系

<template><div><div class="card"><div class="header">头部</div><div class="content">内容<div class="header">内容的头部</div></div></div></div>
</template><style lang="scss" scoped>
// 变量
$font-color: #F90;
$bg: #4662D9;// 嵌套
.card {font-weight: bold;width: 600px;height: 300px;background-color: $font-color ;.header {height: 40px;background-color: $bg;}.content {height: 300px;background-color: yellow;.header {background-color: aqua;}}
}
</style>

6、父级选择器标识 &

& 符号在每一层的选择器中,标识当前选择器自身,方便直接在联级中书写伪类等 css 属性

<style lang="scss" scoped>.header {background-color: aqua;&:hover {background-color: red;}}
</style>

相关文章:

Axios、SASS学习笔记

目录 前言 一、Axios基础认识 1、简介 2、相关文档 3、基本配置 4、基础快捷使用 二、Axios封装 1、公共配置文件 2、细化每个接口的配置 3、使用并发送请求 三、SASS 1、简介 2、相关文档 3、使用前奏 4、使用变量 5、嵌套规则 6、父级选择器标识 & 前言…...

开发工作中常用到的免费API分享

企业行政许可&#xff1a;通过公司名称/公司ID/注册号或社会统一信用代码获取企业行政许可信息&#xff0c;企业行政许可信息包括许可文件名称、决定许可机关、许可内容、决定日期/有效期自、截止日期/有效期至、数据来源等。企业作品著作权&#xff1a;通过公司名称/公司ID/注…...

外汇天眼:三大方法提高容错率——成功投资者的秘密策略!

容错率是什么&#xff1f; 虽然A股市场投资体验不佳&#xff0c;但相较于中概股市场的波动&#xff0c;A股投资者仍有幸福感。以中概股的代表&#xff0c;金龙指数ETF为例&#xff0c;仅一年多时间内从85.90元下跌至20.47元&#xff0c;跌幅高达76%。 然而&#xff0c;有一位…...

设计模式-状态模式

介绍 一个对象有状态变化每次状态变化都会触发一个逻辑不能总是用if else来控制 示例 交通信号灯不同颜色的变化 UML类图 传统UML类图 简化后的UML类图 代码演示 // 状态&#xff08;红灯、绿灯、黄灯&#xff09; class State {constructor(color) {this.color col…...

支持多种格式照片处理软件Lightroom Classic 2022 mac中文功能特点

Lightroom Classic 2022 mac是一款专业级数字图像处理软件&#xff0c;主要用于数字照片的后期处理和管理。它提供了丰富的工具和功能&#xff0c;可以帮助用户对照片进行调整、修饰、管理和分享。 Lightroom Classic 2022 mac软件功能和特点 RAW格式支持&#xff1a;Lightroo…...

UML简介

UML&#xff0c;全称为Unified Modeling Language&#xff08;统一建模语言&#xff09;&#xff0c;是一种用于软件工程和系统设计的标准化建模语言。它提供了一套图形化的符号和标记&#xff0c;用于描述和表示软件系统、系统架构、流程、数据结构、行为和交互。UML的设计旨在…...

【PostgreSQL内核学习(十七)—— (AutoAnalyze)】

AutoAnalyze 概述AutoAnaProcess 类AutoAnaProcess 函数AutoAnaProcess::executeSQLCommand 函数AutoAnaProcess::runAutoAnalyze 函数AutoAnaProcess::run 函数AutoAnaProcess::check_conditions 函数AutoAnaProcess::cancelAutoAnalyze 函数AutoAnaProcess::~AutoAnaProcess …...

C++中指向成员的指针运算符(.* 和 ->*)用法说明

目录 一 MSDN中使用说明1.1 语法1.2 备注 二 一个使用案例 一 MSDN中使用说明 1.1 语法 expression .* expression //直接成员解除引用运算符 expression –>* expression //间接成员解除引用运算符 1.2 备注 C中指向成员的指针运算符&#xff08;.* 和 ->*&#xff09;…...

ASUS华硕ZenBook灵耀X逍遥UXF3000E_UX363EA原装出厂预装Win11系统工厂模式安装包

下载链接&#xff1a;https://pan.baidu.com/s/1WLPp0e5AZErtX3bJIhTZMg?pwd2j7i 带有ASUS Recovery恢复功能、自带所有驱动、出厂主题壁纸、Office办公软件、MyASUS华硕电脑管家等预装程序 所需要工具&#xff1a;16G或以上的U盘(非必需) 文件格式&#xff1a;HDI,SWP,OFS,E…...

【数据结构】栈和队列-- OJ

目录 一 用队列实现栈 二 用栈实现队列 三 设计循环队列 四 有效的括号 一 用队列实现栈 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; typedef int QDataType; typedef struct QueueNode {struct QueueNode* next;QDataType data; }QNode;typedef struct …...

访问Apache Tomcat的管理页面

配置访问Tomcat管理页面的用户名、密码、角色 Tomcat安装完成后&#xff0c;包含了一个管理应用&#xff0c;默认安装在 <Tomcat安装目录>/webapps/manager 例如&#xff1a; 要使用管理页面的功能&#xff0c;需要在conf/tomcat-users.xml文件中配置用户、密码及角色…...

企业组织内如何避免山头文化?

1&#xff0c;什么是山头文化 2&#xff0c;山头文化的危害 3&#xff0c;如何避免山头文化 01什么是山头文化 山头文化就是指某一组织中的一部分人员组成一个以共同利益为基础的集体&#xff0c;就如同古代占山头一样&#xff0c;在组织中形成一股无形的力量&#xff0c;其…...

【c#】线程Monitor.Wait和Monitor.Pulse使用

介绍 以一个简易版的数据库连接池的实现来说明一下 连接池的connection以队列来管理 getConnection的时候&#xff0c;如果队列中connection个数小于50&#xff0c;且暂时无可用的connection&#xff08;个数为0或者peek看下头部需要先出那个元素还处于不可用状态&#xff09;…...

GitLab平台安装中经典安装语句含义解析

yum -y install policycoreutils openssh-server openssh-clients postfix 这是一个Linux命令&#xff0c;用于使用YUM包管理器安装指定的软件包。下面是对这个命令各部分的解释&#xff1a; yum&#xff1a;这是一个Linux命令行工具&#xff0c;用于管理RPM&#xff08;Red …...

湘潭大学 2023年下学期《C语言》作业0x03-循环1 XTU OJ 1094,1095,1096,1112,1113

第一题 #include<stdio.h>int main() {int t;int count1;scanf("%d",&t);while(t--){int a,b,c;scanf("%d%d",&a,&b);cab;printf("Case %d: %d\n",count,c);count;}return 0; } 记住多样例输入的模板&#xff0c;熟悉计数器…...

【Linux系统满足产品实时性需求】

一、背景&#xff1a; 应用实时性&#xff1a;应用程序1以固定周期执行实时算法&#xff1b; 应用程序2以固定周期&#xff0c;执行串口收发&#xff1b; 驱动实时性&#xff1a;驱动sdio接口&#xff0c;实现与FPGA数据交互&#xff0c;实现串口数据收发。 二、实时性保证&…...

不用休眠的 Kotlin 并发:深入对比 delay() 和 sleep()

本文翻译自&#xff1a; https://blog.shreyaspatil.dev/sleepless-concurrency-delay-vs-threadsleep 毫无疑问&#xff0c;Kotlin 语言中的协程 Coroutine 极大地帮助了开发者更加容易地处理异步编程。该特性中封装的诸多高效 API&#xff0c;可以确保开发者花费更小的精力去…...

在Ubuntu中批量创建用户

一、背景知识 在Linux操作系统中创建新用户可以使用useradd或adduser命令。 使用useradd命令创建用户时&#xff0c;不会在/home目录下创建用户文件夹&#xff0c;需要用户自己指定主目录和bash目录的位置。同时&#xff0c;创建的用户没有设置密码&#xff0c;无法进行登录&a…...

汽车冲压车间的RFID技术设计解决方案

一、RFID技术的基本原理 RFID技术是一种利用非接触式自动识别的技术&#xff0c;通过将RFID标签放置在被识别物品上&#xff0c;并使用RFID读写器对标签进行扫描和识别&#xff0c;实现对物品的自动识别和追踪。RFID标签分为被动式和主动式两种。被动式标签无内置电源&#xf…...

TCP 和UDP通信流程

TCP 通信流程 根据上图可以看到&#xff0c;TCP 服务器和客户端通信分为 TCP 服务端和客户端&#xff0c;需要先建立服务 端然后再建立客户端与之连接进行数据交互。 服务端编程步骤&#xff1a; 1.使用 socket 创建流式套接字 2.使用 bind 绑定将服务器绑定到 IP 3.listen…...

第三章 Qt 编译及安装

1. Qt 编译安装 2 Qt 在线安装 在线安装包的下载地址&#xff1a; https://download.qt.io/official_releases/online_installers/ Qt对不同的平台提供了不同版本的安装包&#xff0c;可根据实际情况自行下载安装&#xff0c;本文档使用qt-online-installer-windows-x64-on…...

AI 模型推理框架性能分析与对比

AI模型推理框架性能分析与对比 随着人工智能技术的快速发展&#xff0c;AI模型推理框架成为支撑各类应用落地的核心工具。无论是计算机视觉、自然语言处理还是推荐系统&#xff0c;高效的推理框架直接影响模型的响应速度、资源占用和部署成本。本文将从多个维度对比主流AI推理…...

老牌CMS的隐痛:从DedeCMS漏洞看开源系统会员模块的安全设计误区

DedeCMS会员模块漏洞剖析&#xff1a;开源系统安全设计的深层反思 当一款拥有百万级安装量的老牌CMS系统曝出前台任意密码修改漏洞时&#xff0c;我们看到的不仅是一个具体的技术缺陷&#xff0c;更是开源项目在安全架构设计上的系统性隐忧。2018年那场影响广泛的DedeCMS漏洞事…...

用STM32+物联网做个智能药盒:手把手教你搞定毕设硬件选型与代码框架

基于STM32的智能药盒开发实战&#xff1a;从硬件选型到云端联调 在老龄化社会加速和慢性病管理需求激增的背景下&#xff0c;智能医疗设备正从医院走向家庭。作为嵌入式开发者&#xff0c;将STM32与物联网技术结合打造智能药盒&#xff0c;不仅能解决实际用药管理痛点&#xff…...

Qwen3-14B-AWQ模型效果深度评测:在算法题求解上的表现

Qwen3-14B-AWQ模型效果深度评测&#xff1a;在算法题求解上的表现 1. 评测背景与模型简介 在AI技术快速发展的今天&#xff0c;大语言模型在代码生成和算法解题领域展现出越来越强的能力。Qwen3-14B-Int4-AWQ作为通义千问系列的最新量化版本&#xff0c;在保持较高推理能力的…...

Dify私有化部署实战:如何在企业内网快速搭建AI开发平台(含Docker镜像打包技巧)

Dify私有化部署实战&#xff1a;企业内网AI开发平台搭建全攻略 1. 企业内网部署Dify的核心价值与挑战 在数字化转型浪潮中&#xff0c;越来越多的企业开始将AI能力纳入核心业务系统。Dify作为开源的大语言模型应用开发平台&#xff0c;其私有化部署方案尤其适合对数据安全有严…...

OpenCore辅助工具(OCAT)全攻略:从配置到优化的黑苹果必备工具

OpenCore辅助工具(OCAT)全攻略&#xff1a;从配置到优化的黑苹果必备工具 【免费下载链接】OCAuxiliaryTools Cross-platform GUI management tools for OpenCore&#xff08;OCAT&#xff09; 项目地址: https://gitcode.com/gh_mirrors/oc/OCAuxiliaryTools 核心价值&…...

SAP资产主数据批量修改避坑大全:GGB1替代+AR31工作清单配置详解(含日期字段特殊处理)

SAP资产主数据批量修改实战指南&#xff1a;从GGB1替代到AR31工作清单全流程解析 当财务团队需要对上千条资产记录进行成本中心迁移时&#xff0c;手工修改不仅效率低下&#xff0c;还容易产生数据不一致。SAP系统提供的GGB1替代规则与AR31工作清单组合方案&#xff0c;正是解决…...

3个AI脚本让Illustrator设计效率提升300%:从重复劳动到创意爆发

3个AI脚本让Illustrator设计效率提升300%&#xff1a;从重复劳动到创意爆发 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 作为设计师&#xff0c;你是否每天花费40%以上时间在重复…...

Doris从入门到上天系列第六篇:Doris中修改表的操作

一&#xff1a;修改表使用 ALTER TABLE 命令可以对表进行修改&#xff0c;包括 partition 、rollup、schemachange、rename 和 index 五种。语法&#xff1a;ALTER TABLE [database.]table alter_clause1[, alter_clause2, ...];alter_clause 分为 partition 、rollup、schema …...