zxd's Blog

一些地址

Code-Share地址： `git clone git@gitee.com:vrfe/code-share-28.git`

Notion 地址： https://zxdfe.notion.site/Ajax-day01-c6e13938d17540b1b18a80158c0a8b68

复习

javascript

// 1. 配置用户名邮箱
git config --global user.name 用户名
git config --global user.email 邮箱

// 2. git init 初始化仓库

// 常用
// 1. git status
// 2. git add . 
// 3. git commit -m "msg" 提交更新

// git log --oneline  ==> 推荐
// git reflog   查看所有的记录

// git reset --hard id  ==> 回退版本
.gitinore ==> 未跟踪的文件才能忽略  

// 远端
// 添加远端仓库
git remote add origin 地址
// 查看
git remote 
git remote -v
// 移除
git remote rm origin

// 第一次推送
git push 别名 分支名
git push -u origin master // 以后 都可以git push

// git clone 仓库地址  克隆仓库 、下载 

// git pull  拉取远端的更新，合并到本地

// 分支
git branch 分支名 
git branch 
git checkout 分支名   // ===> 切换分支的时候，注意查看状态，
// 创建并切换分支
git checkout -b 新分支名  

// 删除分支
git branch -d 分支名 

// 合并分支
git merge 分支名   // ==> 要把login合并到master，一定要先切换到master

1. 服务器相关概念

1.1 服务器

javascript

// 1. C/S 架构 ===> 客户端 client  服务器 server 
// 服务器： 为客户提供服务的计算机

// 2. B/S 架构 ==> 浏览器 browser  服务器 server 


// 3. C/S架构的通讯过程是怎么样的？
// 主要就是请求和响应 

// 请求：客户端向服务器发送一条请求，我想要什么资源？
// 比如说，我顺着网线找到建国家的位置，拿着刀架着建国的脖子说，V我50，这，就是请求

// 响应：服务器考虑了一下，给我资源

// 建国考虑了一下，说 V我100（不行，我就要50）

// 请求：request  ， 响应： response

1.2 认识URL

javascript

// URL : Uniform Resource Locator 统一资源定位符

// URL由哪几部分组成  四部分

// 1. 协议   https  http  file  ftp 
// 2. 主机名   ip / 域名
//    是哪台计算机提供的服务，可以通过IP或域名访问
// 3. 端口号   
//     80 => http  443 => https  
//     一个端口一次只能被一个服务占用
// 4. 路径   资源路径
//    表示主机上的一个目录或文件地址

2. ajax

javascript

// 1. 同步和异步的概念
// 同步：一件事情做完了才能做下一件事情，顺序执行。一件一件的做
// 异步：在做这件事情的同时，可以做另一些事情。 煮饭的时候，可以炒菜


// 2. Ajax  ==> Asynchronous JavaScript and XML,  异步JavaScript和XML
// // ==> 最大的特性：异步 =>  局部刷新页面
// 在不刷新页面的情况下与服务端通讯

// ==> 如何理解异步?
// 当我们触发Ajax请求,用户仍可在请求等待响应时工作（JS还可以做其他的），
// 当服务器返回响应时,会运行回调来处理它.

// 3. 我们可以用Ajax做什么？
// 我们可以使用Ajax与服务器通信，
// 在不刷新页面的情况下发送请求给服务器，
// 接收并使用从服务器发来的数据，交换数据，更新页面

2.1 体验ajax

javascript


<h2>城市数据</h2>
<p class="province">
  <!-- 数据渲染到这里 -->
</p>
<button class="btn">渲染省份数据</button>
<!-- 
    axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址: http://hmajax.itheima.net/api/province
    需求: 点击按钮 通过 axios 获取省份数据 并渲染
   -->
<!-- 使用axios记得先导包 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  const btn = document.querySelector('.btn')
  btn.addEventListener('click', () => {
    // console.log('点了按钮')
    // 通过 axios 获取省份数据 并渲染
    // 1. 调用axios函数
    axios({
        url: 'http://hmajax.itheima.net/api/province',
        method:'GET'
      }).then(res => {
        // 2. 接收并使用数据
        // res.data 可以获取服务器返回的数据
        alert(res.data.list)
      })

  })
</script>

2.2 接口文档

javascript

<!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>Document</title>
  </head>

  <body>
    <h2>接口及接口文档</h2>
    <button>测试</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 1.绑定点击事件
      document.querySelector('button').onclick = function () {
        // 调用方法 和 服务器 通讯
        axios({
          url: 'url地址',
          method: 'get',
        }).then(result => {
          console.log(result)
        })
      }
    </script>
  </body>
</html>

请求方法

2.3 axios-get请求

接口地址 : [https://gitee.com/westblueflower/testApi#lol-](https://gitee.com/westblueflower/testApi#lol-)查询

javascript

<p>点击发送请求</p>
<button class="btn1">没有参数</button>
<button class="btn2">有参数</button>
<!-- 1. 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

javascript

// 接口地址 :  `https://gitee.com/westblueflower/testApi#lol-查询`

<h2>axios-get</h2>
<button class="btn1">测试 没有参数</button>
<button class="btn2">测试 有参数</button>
<!-- 1. 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const btn1 = document.querySelector('.btn1')
    const btn2 = document.querySelector('.btn2')

    const api_url = 'http://ajax-api.itheima.net/api/news123'
    const api_city = 'http://ajax-api.itheima.net/api/area?pname=辽宁省&cname=辽阳市'
    const api_lol = 'https://autumnfish.cn/api/lol/search'

    btn1.addEventListener('click', () => {
        axios.get(api_url)
        .then( res => {
            // 成功的
            console.log(res)
        })
        .catch(err => {
            // 如果地址写错了，或者其他一些报错的情况，进入到这里
            console.clear()
            console.log(err)
        })
    })


    // GET方式请求
  	// 1. 拼接字符串的方式 ?key=val&key2=val&key3=val
    // btn2.addEventListener('click', () =>{
    //     axios.get(`${api_lol}?q=提莫`)
    //     // ?key=value&key2=value2
    //     .then(res => {
    //         console.log(res)
    //     })
    // })

    // 用params的形式传递数据
    btn2.addEventListener('click', () => {
        axios.get(api_lol, {
            params:{  // 这个params不能改，固定
                q: '提莫'
            }
        })
        .then(res => {
            console.log(res)
        })
    })

2.4 axios.get发送请求

javascript


// axios方法get请求 几种方式 ？ 2 种 ， 本质上都是把参数拼接到url地址后面

// 1. 字符串拼接
axios.get(url地址?key=val)
  .then(res => {
    console.log(res)
  })
  .catch(err => {console.logI(err)} )

// 2. 对象的形式
axios.get('地址', {
    // 实际上params这种方式，也是字符串拼接
    params:{
        key: val
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

2.4 eg.新闻列表

https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/api-24999380

javascript

// 等页面加载之后发送请求
// window ==> load   页面完全加载之后渲染
// document => DOMContentLoaded
window.addEventListener('load', () => {

  const box = document.querySelector('#news-list')

  // 1. 调用axios.get发送请求
  const api = 'http://ajax-api.itheima.net/api/news'
  axios.get(api).then(res => {
    // res response ，如果请求成功，后端返给我的数据
  	// 2. 成功的回调
    // console.log(res)
    const htmlArr = res.data.data.map(el => {
      // 对象的解构
      const {cmtcount, id, img, source, time, title} = el
      return `
      <div class="news-item">
      <img class="thumb" src="${img}" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${time}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${cmtcount}</span>
        </div>
      </div>
    </div>
      `
    })
    // 3. 渲染到页面上~~~
    box.innerHTML = htmlArr.join('')
    
  }) // end then

})

调用接口 ==> 类似于访问后端封装好的一个函数 /方法

中午复习

javascript

// 前后端 
// ===>  Ajax  异步JavaScript and  XML  
// 特点： 不用刷新页面就可以发送请求，更新数据

// URL地址： 四个
// 1. 协议：http  https 
// 2. 主机名 ： ip/域名 
// 3. 端口号： 0-65535 http: 80  https: 443
// 4. 路径 ：资源的路径

// 接口： url地址 ==> 就叫做接口
// 调用一个接口  ===> 类似于访问调用后端的一个函数方法

// 接口文档 注意三个点：
// 1. 接口的地址
// 2. 接口的方法
// 3. 参数

// 请求的方法常见的有5个  （2个）
// GET   获取数据，查询数据
// POST  传递数据

// DELETE  删除
// PUT  更新完整的数据
// PATCH  更新部分数据


// axios 是一个js库，专门用作网络请求的，基于XHR封装  XMLHttpRequest对象封装

// axios发送GET请求，

// 1. 先引入axios包 

// axios-get请求
// 1.1 字符串拼接

axios.get(URL地址?key=value&key2=value2).then(res => {
	   console.log(res)
}).catch(err => { 错误处理})

// 1.2 传一个params对象
axios.get(URL地址, {
  params:{
    key1:val1,
    key2:val2,
  }
}).then(res => {
  // 成功的回到
}).catch(err => {
  // 失败的回调
})

2.5 axios-post请求

登录接口-文档地址

javascript

<h2>axios-POST</h2>
<button class="btn">测试 POST</button>
<!-- 1. 引入axios -->
<!-- http://ajax-api.itheima.net/api/login -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', () => {
      // 2. 点击发送请求， 根据文档设置请求方法和参数信息
        axios.post('http://ajax-api.itheima.net/api/login',{
            username:'admin',
            password:'123456'
        }).then(res => {
            // 成功的逻辑
            console.log(res)
        }).catch(err => {
            // 失败的逻辑
            console.log(err.message)
        })
    })
</script>

2.6 用户登录案例

javascript

<script src="./lib/axios.js"></script>
<script>
  // 1. 获取按钮表单
  const btn = document.querySelector('#btnLogin')
  const user_ipt = document.querySelector('#username')
  const pwd_ipt = document.querySelector('#password')

  // 接口地址
  const api = 'http://ajax-api.itheima.net/api/login'

  // 2. 注册事件
  btn.addEventListener('click', () => {
    // 箭头函数没有this
    // 点击按钮的时候，获取usrename和password的值 
    const username = user_ipt.value
    const password = pwd_ipt.value

    // 3. 发送请求
    axios.post(api, {
      // ES6 的简写
      username,
      password
    }).then(res => {
      // console.log(res)
      alert(res.data.message)
    }).catch(err => {
      // console.log(err)
      console.dir(err)
      alert(err.response.data.message)
      // alert('登录失败')
    })
    
  })
</script>

3. 报文

3.1 请求报文

3.2 响应报文

4. 状态码

4.1 http状态码

三位数字组成，在network => 网络中查看 http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态。在状态行中所包含的状态码，叫做响应状态码 / http状态码 响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。

常见的http状态码

CV体验一下

javascript

<!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>Document</title>
  </head>

  <body>
    <h2>测试http状态码</h2>
    <button class="class-a">200状态码</button>
    <button class="class-b">400状态码</button>
    <button class="class-c">401状态码</button>
    <button class="class-d">404状态码</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 正常请求 200
      document.querySelector('.class-a').onclick = function (e) {
        // ajax前后端交互
        axios({
          url: `http://ajax-api.itheima.net/api/news`,
          method: 'get',
        }).then(res => {
          // 逻辑略
          console.log('res:', res)
        })
      }
      // 参数错误 400
      document.querySelector('.class-b').onclick = function (e) {
        // ajax前后端交互
        axios({
          url: `http://ajax-api.itheima.net/login`,
          method: 'post',
          data: {
            username: 'jack',
            password: '123456',
          },
        }).then(res => {
          // 逻辑略
          console.log('res:', res)
        })
      }
      // 未授权(未登录) 401
      document.querySelector('.class-c').onclick = function (e) {
        // ajax前后端交互
        axios({
          url: `http://ajax-api.itheima.net/dashboard`,
          method: 'get',
        }).then(res => {
          // 逻辑略
          console.log('res:', res)
        })
      }
      // 地址不存在 404
      document.querySelector('.class-d').onclick = function (e) {
        // ajax前后端交互
        axios({
          url: `http://ajax-api.itheima.net/login123`,
          method: 'post',
          data: {
            username: 'jack',
            password: '123456',
          },
        }).then(res => {
          // 逻辑略
          console.log('res:', res)
        })
      }
    </script>
  </body>
</html>

4.2 业务状态码

在响应体的数据中所包含的状态码，叫做业务状态码 业务状态码是后端程序员自定义的，不具有通用性。

eg.机器人聊天

聊天接口地址

todo01 按下回车或点击按钮发送请求

javascript

const ipt = document.querySelector('.input_txt')
const btn = document.querySelector('.input_sub')

// 1. 回车的时候
ipt.addEventListener('keyup', function(e){
  // 怎么判断按下了哪个键？
  // console.log(e.key)
  if (e.key === 'Enter'){
    // 发送请求，和机器人聊天
    chat()
  }
})

// 2. 按下按钮的时候
btn.addEventListener('click', function(){
  // 发送请求
  chat()
})

// 3. 和机器人聊天
const chat = function(){
  // 发送请求，和机器人聊天
  console.log('ohayo')
}

todo 02 创建自己的聊天框

javascript

const chat = function(){
  /* ==================== 创建一个自己的聊天框 ===================== */
  // 1. 有内容才创建聊天li标签
  const value = ipt.value.trim()
  // 如果输入的值等于空，不执行后面的代码
  if(!value) return
  // 创建一个li标签
  const myLi = document.createElement('li')
  myLi.innerHTML = `
    <img src="img/person02.png" />
      <span>${value}</span>
  `
  myLi.classList.add('right_word')
  // 把创建好的li标签放到box中
  box.append(myLi)
  // 清空数据
  ipt.value = ''
  /* ==================== 发送请求，并创建机器人的聊天框 ===================== */
}

todo03 发送请求，创建机器人聊天框

javascript

  // axios.get(`${api}?spoken=${value}`)
  axios.get(api, {
    params:{
      spoken:value
    }
  }).then(res => {
    // 在这个位置创建机器人的聊天框
      console.log(res)
      const robotLi = document.createElement('li')
      robotLi.innerHTML = `
      <img src="img/person01.png" />
        <span>${res.data.data.info.text}</span>
    `
    robotLi.classList.add('left_word')
    // 追到到box中
    box.append(robotLi)
    // 调用滚动的方法
    resetui()
  })

完整的代码

javascript

const ipt = document.querySelector('.input_txt')
const btn = document.querySelector('.input_sub')
const box = document.querySelector('.talk_list')

const api = 'http://ajax-api.itheima.net/api/robot'

// 1. 回车的时候
ipt.addEventListener('keyup', function(e){
  // 怎么判断按下了哪个键？
  if (e.key === 'Enter'){
    // 发送请求，和机器人聊天
    chat()
  }
})

// 2. 按下按钮的时候
btn.addEventListener('click', function(){
  // 发送请求
  chat()
})

// 3. 
const chat = function(){
  /* ==================== 创建一个自己的聊天框 ===================== */
  // 1. 有内容才创建聊天li标签
  const value = ipt.value.trim()
  // 如果输入的值等于空，不执行后面的代码
  if(!value) return
  // 创建一个li标签
  const myLi = document.createElement('li')
  myLi.innerHTML = `
    <img src="img/person02.png" />
      <span>${value}</span>
  `
  myLi.classList.add('right_word')
  // 把创建好的li标签放到box中
  box.append(myLi)
  // 清空数据
  ipt.value = ''

  resetui()
  /* ==================== 发送请求，并创建机器人的聊天框 ===================== */

  // axios.get(`${api}?spoken=${value}`)
  axios.get(api, {
    params:{
      spoken:value
    }
  }).then(res => {
    // 在这个位置创建机器人的聊天框
      console.log(res)
      const robotLi = document.createElement('li')
      robotLi.innerHTML = `
      <img src="img/person01.png" />
        <span>${res.data.data.info.text}</span>
    `
    robotLi.classList.add('left_word')
    // 追到到box中
    box.append(robotLi)
    // 调用滚动的方法
    resetui()
  })
}

一些地址 ​

Code-Share地址 ： git clone git@gitee.com:vrfe/code-share-28.git ​

Notion 地址 ： https://zxdfe.notion.site/Ajax-day01-c6e13938d17540b1b18a80158c0a8b68 ​

复习 ​

1. 服务器相关概念 ​

1.1 服务器 ​

1.2 认识URL ​

2. ajax ​

2.1 体验ajax ​

2.2 接口文档 ​

请求方法 ​

2.3 axios-get请求 ​

2.4 axios.get发送请求 ​

2.4 eg.新闻列表 ​

中午复习 ​

2.5 axios-post请求 ​

2.6 用户登录案例 ​

3. 报文 ​

3.1 请求报文 ​

3.2 响应报文 ​

4. 状态码 ​

4.1 http状态码 ​

常见的http状态码 ​

4.2 业务状态码 ​

eg.机器人聊天 ​

todo01 按下回车或点击按钮发送请求 ​

todo 02 创建自己的聊天框 ​

todo03 发送请求，创建机器人聊天框 ​

完整的代码 ​

一些地址

Code-Share地址： `git clone git@gitee.com:vrfe/code-share-28.git`

Notion 地址： https://zxdfe.notion.site/Ajax-day01-c6e13938d17540b1b18a80158c0a8b68

复习

1. 服务器相关概念

1.1 服务器

1.2 认识URL

2. ajax

2.1 体验ajax

2.2 接口文档

请求方法

2.3 axios-get请求

2.4 axios.get发送请求

2.4 eg.新闻列表

中午复习

2.5 axios-post请求

2.6 用户登录案例

3. 报文

3.1 请求报文

3.2 响应报文

4. 状态码

4.1 http状态码

常见的http状态码

4.2 业务状态码

eg.机器人聊天

todo01 按下回车或点击按钮发送请求

todo 02 创建自己的聊天框

todo03 发送请求，创建机器人聊天框

完整的代码