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

vue 前端项目调用后端接口记录

axios中不同的类型的请求附带数据使用的关键字

请求类型关键字示例
GETparamsaxios({ method: 'get', url: 'example.com', params: { key: value } })
POSTdataaxios({ method: 'post', url: 'example.com', data: { key: value } })
PUTdataaxios({ method: 'put', url: 'example.com', data: { key: value } })
PATCHdataaxios({ method: 'patch', url: 'example.com', data: { key: value } })
DELETEdataaxios({ method: 'delete', url: 'example.com', data: { key: value } })
单引号 (') 和双引号 (") 与反引号 (``)(模板字符串)

  • 一段相同的代码,但上面亮,下面不亮。乍一看好像没啥问题,但细心的小伙伴能发现一个是’’ 一个是``
  • 使用单引号和双引号中的东西叫做字符串
  • 似乎用反引号的叫做模板字符串

 区别

特性单引号 (') 或 双引号 (")反引号 (``)
多行字符串不支持,需要使用转义字符 \n支持,可以自然换行
插值不支持支持 ${} 语法嵌入表达式
转义字符需要转义与外部引号相同的字符不需要对 ${} 进行转义
保留空格和换行符
使用场景普通字符串定义,单行字符串多行字符串,字符串插值,保持字符串格式

get 使用 params 来传递数据,而 post 才使用 data 来传递数据

methods: {// get 方法getBooksList() {axios({method: 'get',url: 'http://hmajax.itheima.net/api/books',params: {creator: 'Qiuner'}}).then(result => {let bookList = result.data})}// post 方法getBooksList() {axios({method: 'post',url: 'http://hmajax.itheima.net/api/books',data: {creator: 'Qiuner'}}).then(result => {let bookList = result.data})}
}
冷知识(对于我来说)
<div><label for="bg">更换背景</label><input type="file" id="bg">
</div>
  • 这里代码使用了label,当for与id相同时,点击这个label就等于点击input了。而这个input被用来上传文件
  • 但实际定位还是要定位到input上的

参考原文链接:两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day2-CSDN博客 

相关文章:

vue 前端项目调用后端接口记录

axios中不同的类型的请求附带数据使用的关键字 请求类型关键字示例GETparamsaxios({ method: get, url: example.com, params: { key: value } })POSTdataaxios({ method: post, url: example.com, data: { key: value } })PUTdataaxios({ method: put, url: example.com, dat…...

4.10、matlab生成脉冲序列:pulstran()函数

1、matlab生成脉冲序列简介 MATLAB生成脉冲序列通常涉及到使用MATLAB中的函数或编程来创建具有特定时间间隔和幅度的脉冲信号。脉冲序列通常用于数字信号处理、通信系统测试等应用中。 生成脉冲序列可以采用以下方法之一: 使用MATLAB中的函数,例如square()函数生成方波信号…...

【JAVA poi-tl-ext 富文本转word】

富文本转word 环境使用poi-tl-ext的原因富文本转word代码 环境 jdk 1.8 <dependency><groupId>io.github.draco1023</groupId><artifactId>poi-tl-ext</artifactId><version>0.4.16</version> </dependency>poi-tl-ext已经包…...

uniapp 小程序注册全局弹窗组件(无需引入,无需写标签)

由于uniapp没有开放根节点&#xff0c;所以一般情况下通过app.components注册&#xff0c;在需要的页面直接写组件标签&#xff0c;但是如果每个页面都需要的话&#xff0c;再每个都加的话会非常的麻烦 网上的思路都不咋地&#xff1a; 1.通过写一个透明弹窗页面来实现&#…...

python 语法学习 day 7

错题反思 1.九九乘法表 第一次提交的答案是&#xff1a;先把所有输入值放在列表里面 EOF&#xff0c;输入后产生异常-->>捕获异常&#xff0c;结束输入 3. 题意:统计单词的种类以及数量(忽略大小写)&#xff0c;最终以降序输出&#xff08;出现次数相同的单词根据单词的…...

【高中数学/幂函数】比较a=2^0.3,b=3^0.2,c=7^0.1的大小

【问题】 比较a2^0.3,b3^0.2,c7^0.1的大小 【解答】 a2^0.32^3/10(2^3)^1/108^1/10 b3^0.23^2/10(3^2)^1/109^1/10 c7^0.17^1/10 由于yx^1/10在x正半轴是增函数&#xff0c;底数大的得数就大。 因为9>8>7,所以b>a>c 【图像】 在图像上绘出曲线yx^1/10&…...

双向带头循环链表

一、概念 何为双向&#xff1a;此链表每一个节点的指针域由两部分组成&#xff0c;一个指针指向下一个节点&#xff0c;另一个指针指向上一个节点&#xff0c;并且两头的节点也是如此&#xff0c;头节点的下一个节点是尾节点&#xff0c;尾节点的上一个节点是头节点&#xff1b…...

探索TASKCTL和 DataStage 的ETL任务调度协同

在复杂多变的企业环境中&#xff0c;高效、准确的数据处理是支撑业务决策与运营的核心。本文将深入探讨任务调度平台TASKCTL与ETL工具DataStage的深度融合&#xff0c;通过详尽的代码示例、结合细节以及实际案例的具体描述&#xff0c;展示这两个工具如何携手打造企业数据处理生…...

Facebook软体机器人与机器人框架:创新社交互动的未来

随着人工智能技术的不断进步&#xff0c;Facebook正通过软体机器人和先进的机器人框架&#xff0c;重新定义社交互动的未来。这些创新不仅提升了用户体验&#xff0c;也为开发者提供了强大的工具来构建下一代社交应用。 一、Facebook软体机器人&#xff1a;智能化的社交伙伴 …...

掌握音视频转换的艺术:用FFmpeg解锁多媒体的无限可能

在数字时代&#xff0c;音视频内容无处不在&#xff0c;从在线课程、娱乐视频到专业会议&#xff0c;它们都是信息传播的关键载体。然而&#xff0c;随着多媒体格式的不断演进&#xff0c;我们常常会遇到格式不兼容的问题&#xff0c;这成为了享受或处理这些内容的一大障碍。幸…...

C基础day9

一、思维导图 二、课后练习 1> 使用递归实现 求 n 的 k 次方 #include<myhead.h>int Pow(int n,int k) {if(k 0 ) //递归出口{return 1;}else{return n*Pow(n,k-1); //递归主体} }int main(int argc, const char *argv[]) {int n0,k0;printf("请输入n和k:&…...

32. 小批量梯度下降法(Mini-batch Gradient Descent)

在深度学习模型的训练过程中&#xff0c;梯度下降法是最常用的优化算法之一。我们前面介绍了批量梯度下降法&#xff08;Batch Gradient Descent&#xff09;和随机梯度下降法&#xff08;Stochastic Gradient Descent&#xff09;&#xff0c;两者各有优缺点。为了在计算速度和…...

MySQL第八次作业

一、备份与恢复作业&#xff1a; 创库,建表&#xff1a; CREATE DATABASE booksDB; use booksDB; CREATE TABLE books ( bk_id INT NOT NULL PRIMARY KEY, bk_title VARCHAR(50) NOT NULL, copyright YEAR NOT NULL ); CREATE TABLE authors …...

【合集】临时邮箱网站 临时邮箱API(持续更新)

众所周知&#xff0c;在注册一些账户时&#xff0c;比较常见的验证方式就是邮箱&#xff0c;但是在进行一些小众和不知名网站注册时&#xff0c;邮箱的泄露可能预示着不休止的邮件推送。尤其是当我们只是想临时使用邮箱这种情况&#xff0c;第二种&#xff0c;批量注册账号的情…...

职场新人感受

互联网职场感受 阶段介绍 24届6月底毕业生&#xff0c;之前从未实习过。 岗位是后端开发&#xff08;JAVA&#xff09;&#xff0c;目前已经上班三周&#xff08;前两周看文档和做了半个简单需求&#xff0c;第三周脱产新人培训&#xff09;。 职场体验 职场和想象中的工作…...

Window 下Mamba 环境安装踩坑问题汇总及解决方法 (无需绕过selective_scan_cuda)

导航 Mamba 及 Vim 安装问题参看本人之前博客&#xff1a;Mamba 环境安装踩坑问题汇总及解决方法Linux 下Vmamba 安装教程参看本人之前博客&#xff1a;Vmamba 安装教程&#xff08;无需更改base环境中的cuda版本&#xff09;Windows 下 VMamba的安装参看本人之前博客&#xf…...

前端项目本地的node_modules直接上传到服务器上无法直接使用(node-sasa模块报错)

跑 jekins任务的服务器不能连接外网下载依赖包&#xff0c;就将本地下载的 node_modules直接上传到服务器上&#xff0c;但是运行时node-sass模块报错了ERROR in Missing binding /root/component/node_modules/node-sass/vendor/linux-x64-48/binding.node >> 报错信息类…...

Hadoop3:动态扩容之新增一台机器的初始化工作

一、需求描述 给Hadoop集群动态扩容一个节点 那么&#xff0c;这个节点是全新的&#xff0c;我们需要做哪些准备工作&#xff0c;才能将它融入集群了&#xff1f; 二、初始化配置 1、修改IP和hostname vim /etc/sysconfig/network-scripts/ifcfg-ens33 vim /etc/hostname2、…...

【正点原子i.MX93开发板试用连载体验】录音小程序采集语料

本文最早发表于电子发烧友论坛&#xff1a;【新提醒】【正点原子i.MX93开发板试用连载体验】基于深度学习的语音本地控制 - 正点原子学习小组 - 电子技术论坛 - 广受欢迎的专业电子论坛! (elecfans.com) 接下来就是要尝试训练中文提示词。首先要进行语料采集&#xff0c;这是一…...

【EasyExcel】动态替换表头内容并应用样式

1.定义实体类 import com.alibaba.excel.annotation.ExcelProperty; import com.alibaba.excel.annotation.ContentStyle; import com.alibaba.excel.metadata.BorderStyleEnum; import com.alibaba.excel.metadata.VerticalAlignmentEnum; import com.alibaba.excel.metadata.…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...