一.认识 URL
1. 为什么要认识 URL ?
- 虽然是后端给我的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下
2. 什么是 URL ？
- 统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）
3. URL 的组成?
- 协议，域名，资源路径（URL 组成有很多部分，我们先掌握这3个重要的部分即可）
4. 什么是 http 协议 ?
- 叫超文本传输协议，规定了浏览器和服务器传递数据的格式（而格式具体有哪些稍后我们就会学到）
5. 什么是域名 ?
- 标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以
6. 什么是资源路径 ?
- 一个服务器内有多个资源，用于标识你要访问的资源具体的位置
二.URL 查询参数
1. 什么是查询参数 ?
-
携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
-
举例：查询河北省下属的城市列表，需要先把河北省传递给服务器
2. 查询参数的语法 ？
- 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
- 参数名一般是后端规定的，值前端看情况传递即可
3. axios 如何携带查询参数?
-
使用 params 选项即可
axios({ url: '目标资源地址', params: { 参数名: 值 } }).then(result => { // 对服务器返回的数据做后续处理 })
4. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询参数</title>
</head>
<body>
<!--
城市列表: http://hmajax.itheima.net/api/city
参数名: pname
值: 省份名字
-->
<p></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/city',
// 查询参数
params: {
pname: '辽宁省'
}
}).then(result => {
console.log(result.data.list)
document.querySelector('p').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
</html>
小结
1. URL 是什么？
统一资源定位符，网址，用于访问服务器上资源
2. 请解释这个 URL，每个部分作用？
http://hmajax.itheima.net/api/news
协议://域名/资源路径
3. URL 查询参数有什么用？
浏览器提供给服务器额外信息，获取对应的数据
4. axios 要如何携带查询参数？
使用 params 选项，携带参数名和值在对象结构中