02.URL的基本知识和使用

一.认识 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 => {
  // 对服务器返回的数据做后续处理
})
1
2
3
4
5
6
7
8

查询城市列表的 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>
  
  <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('
')
    })
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

小结

1. URL 是什么？

 统一资源定位符，网址，用于访问服务器上资源
1

2. 请解释这个 URL，每个部分作用？

http://hmajax.itheima.net/api/news

协议://域名/资源路径
1

3. URL 查询参数有什么用？

浏览器提供给服务器额外信息，获取对应的数据

4. axios 要如何携带查询参数？

使用 params 选项，携带参数名和值在对象结构中

相关阅读:
【身份证识别】基于matlab GUI BP神经网络身份证识别【含Matlab源码 2239期】
Python编程实例-播放音频汇总（Linux环境）
基于Android studio开发一款垃圾分类知识宣传APP
渗透测试--2.漏洞探测和利用
新能源仓储解决方案案例｜HEGERLS托盘四向穿梭车如何解决仓库地面集中载荷不够的困扰？
多人音视频实时通讯架构
【《高性能 MySQL》笔记】性能优化
温敏性N-异丙基丙烯酰胺(NIPA)和pH敏感性丙烯酸(AA)接枝纳米聚苯乙烯微球相关研究
实战 - 在Linux上部署各类软件
2023秋招华为技术岗线上面试经历

原文地址：https://blog.csdn.net/qq_53914247/article/details/136516786