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

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

请求类型 关键字 示例
GET params axios({ method: 'get', url: 'example.com', params: { key: value } })
POST data axios({ method: 'post', url: 'example.com', data: { key: value } })
PUT data axios({ method: 'put', url: 'example.com', data: { key: value } })
PATCH data axios({ method: 'patch', url: 'example.com', data: { key: value } })
DELETE data axios({ 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博客 

相关推荐

  1. vue3前端调用接口实现批量删除

    2024-07-13 09:50:02       33 阅读
  2. vue3前端调用接口实现分页,搜索

    2024-07-13 09:50:02       25 阅读
  3. vue3前端请求接口动态渲染菜单

    2024-07-13 09:50:02       23 阅读
  4. Vue项目使用mockjs模拟接口

    2024-07-13 09:50:02       22 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 09:50:02       53 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 09:50:02       56 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 09:50:02       46 阅读
  4. Python语言-面向对象

    2024-07-13 09:50:02       57 阅读

热门阅读

  1. Redis原子计数器incr,防止并发请求

    2024-07-13 09:50:02       23 阅读
  2. 求某个矩阵的鞍点的个数

    2024-07-13 09:50:02       20 阅读
  3. 13 IP层协议-网际控制报文协议ICMP

    2024-07-13 09:50:02       23 阅读
  4. Electron31.x+vite5+vue3 setup客户端Exe聊天系统演示

    2024-07-13 09:50:02       21 阅读
  5. 远程调试Xcode:一键解锁iOS开发新境界

    2024-07-13 09:50:02       26 阅读
  6. oracle 表空间文件迁移

    2024-07-13 09:50:02       24 阅读
  7. xml详解

    xml详解

    2024-07-13 09:50:02      32 阅读
  8. 【软件测试】 1+X中级 自动化测试试题

    2024-07-13 09:50:02       21 阅读
  9. PostgreSQL UPDATE 命令

    2024-07-13 09:50:02       17 阅读