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博客