02.URL的基本知识和使用

小明 2025-04-28 18:56:17 7

一.认识 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. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码：

                    

  
  
  
  查询参数


  
  
  
  
    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('')
    })

                    小结

                    1. URL 是什么？

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

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

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

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

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

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

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

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

The End

标签：

微信