一.认识 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 => {// 对服务器返回的数据做后续处理 })
查询城市列表的 url地址:http://hmajax.itheima.net/api/city
参数名:pname (值要携带省份名字)
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 选项,携带参数名和值在对象结构中