zxd's Blog

1. link-to

notion: https://zxdfe.notion.site/Ajax-day02-49929d4bb4f242b18fdde1afb569eba9
Code-Share地址： git clone git@gitee.com:vrfe/code-share-28.git
接口文档：https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/api-25027790
axios官网：https://www.axios-http.cn/docs/req_config

axios线上地址

javascript

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

01 axios-config

javascript

<h2>axios-config模式</h2>
<button class="get">axios-get请求</button>
<button class="post">axios-post请求</button>
<script src="./lib/axios.js"></script>
<script>

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

    // 1. 测试get请求
    const getBtn = document.querySelector('.get')

    getBtn.addEventListener('click', function(){
        axios({
            url:api,
            method:'GET',
            params: {
                spoken:'听我说谢谢你'
            }
        }).then(res => {
            console.log(res)
        })
    })



    // 2. 测试post请求
    const postBtn = document.querySelector('.post')
    postBtn.addEventListener('click', function(){
        axios({
            url:api_login,
            method:'post',
            data:{
                username:'admin',
                password:'123456'
            }
        }).then(res => {
            console.log(res)
        })
    })

    // 3. 总结 
    axios({
        url:'地址'，
        method:'请求方法',
        params:{get参数}，
        data:{post参数}
    }).then(res => {})
</script>

02 英雄百科作业

防抖的形式

javascript

const debounce = (fn, ms) => {
  let timerId 
  return function(...args){
    clearTimeout(timerId)
    timerId = setTimeout(() => {
      fn.call(this, ...args)
    }, ms)
  }
}

const cb = function(){
    getHero(ipt.value)
}
ipt.addEventListener('keyup', debounce(cb, 500))

04- form表单原始的方式

javascript

<!-- 表单上可以写method -->
<form action="http://ajax-api.itheima.net/api/data" method="post">
  <!-- name属性加上之后，就可以设置属性名 -->
  <input name="username" type="text"  placeholder="请输入用户名" />
  
 
  <input name="food" type="text" placeholder="请输入喜欢的食物" />
  

  <input name="sign" type="textarea" placeholder="请输入个性签名" />
  

  <!-- 表单里面，按钮，如果不写type，默认是type是submit -->
  <button>提交</button>
</form>
<script>
  // const form = document.querySelector('form')
  // form.addEventListener('submit', function(e){
  //     e.preventDefault()
  // })
</script>

05- form-ajax提交数据

javascript

<script src="./lib/axios.js"></script>
<script>

  // 1. 如果是按钮提交表单
  // 如果按钮没有加type， 要用ajax提交数据的话，先阻止
  const btn = document.querySelector('button')
  // btn.addEventListener('click', function(e){
  //     e.preventDefault()
  // })


  // 2. 如果是form表单的submit
  const form = document.querySelector('form')
  // 属性选择器
  const username = document.querySelector('[name="username"]')
  const food = document.querySelector('[name="food"]')
  const sign = document.querySelector('[name="sign"]')

  form.addEventListener('submit', function(e){
      e.preventDefault()
      axios({
          url:'http://ajax-api.itheima.net/api/data',
          method: 'POST',
          data:{
              username:username.value,
              food:food.value,
              sign:sign.value
          }
      }).then(res => {
          console.log(res)
      })

  })
</script>

06-form-serialize简化表单取值

javascript

const form = document.querySelector('form')
// 属性选择器
// const username = document.querySelector('[name="username"]')
// const food = document.querySelector('[name="food"]')
// const sign = document.querySelector('[name="sign"]')

form.addEventListener('submit', function(e){
    e.preventDefault()

    // 1. 返回字符串 key=value&key2=val2 不传参数，直接传入form表单元素
    const data = serialize(form)
    // console.log(data)

    // 2. 传入一个hash:true
    // const data = serialize(form, {hash:true})

  // 属性名 ： 就是name属性
  // 属性值 ： 表单的value值

    axios({
        url:'http://ajax-api.itheima.net/api/data',
        method: 'POST',
        // data:{
        //     username:username.value,
        //     food:food.value,
        //     sign:sign.value
        // }
        data
    }).then(res => {
        console.log(res)
    })

})

07 form-data基本使用

form-data 传文件的时候使用

javascript

// 1. 实例化
const data = new FormData()
console.log(data)

// 2. append添加
data.append('name', '奥特曼')
data.append('skill', 'biubiubiu')
data.append('friend', '小怪兽')

console.log(data)
// 3. 获取查询 get 
console.log(data.get('skill'))

08 input-type-file选择文件

javascript

<!-- 
    1. type=file  选择文件 
    2. accept ==> 引导我们选择什么文件，接收的是image
 -->
<input type="file" name="avatar" accept="image/*" multiple  placeholder="请选择头像">
<script>
//   document.querySelector('input').onchange = function(e){
//     console.log('文件信息', e.target.files[0])
//   }

  const ipt = document.querySelector('input')
  ipt.addEventListener('change', function(e){
    // console.log('文件信息', )
    // console.log(e)
    console.log(e.target.files[0])
  })
</script>

09-FormData头像上传

html

<h2>直接通过FormData</h2>
<!-- 注意，文件在input标签 -->
<input type="file" accept="image/*" >
<img src="" alt="" />
<button>上传</button>

javascript

// <script src="./lib/axios.js"></script>

const btn = document.querySelector('button')
const ipt = document.querySelector('input')
const img = document.querySelector('img')

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

btn.addEventListener('click', function(){
    // e.target.files[0]
    console.log(ipt.files[0])

    // 1. 传文件，需要用到 FormData
    const data = new FormData()
    // data.append('avator', 文件)
    data.append('avatar', ipt.files[0])

    // 2. 发送请求
    axios({
        url:api,
        method:'post',
        data
    }).then(res => {
        console.log(res)
        img.src = res.data.data.url
    })
})

10 头像上传

javascript

<script>
  const btn = document.querySelector('#btnChoose')
  const ipt = document.querySelector('#iptFile')
  const img = document.querySelector('.thumb')

  btn.addEventListener('click', function(){
    // 1. 点击按钮的时候，自动触发ipt的click事件
    ipt.click()
  })

  // 2. 监听ipt的change事件

  const api = 'http://ajax-api.itheima.net/api/file'
  ipt.addEventListener('change', function(e){
    // 得到选中的图片
    // const file = 
    // console.log(e.target.files[0])
    // console.log(ipt.files[0])
    // console.log(this.files[0])

    const data = new FormData()
    data.append('avatar', ipt.files[0])

    axios({
      url:api,
      method:'POST',
      data
    }).then(res => {
      console.log(res)
      img.src = res.data.data.url
    }).catch(err => {
      alert('请正确选择图片')
    })
  })
</script>

content-type

表示传输的数据格式

javascript

<h2>form-data</h2>
<input class="ipt" type="file" accept="image/*" />
<h2>application/json</h2>
<button class="json">测试登录接口</button>
<h2>urlencoded</h2>
<button class="urlencoded">测试urlencoded格式</button>
<script src="./lib/axios.js"></script>
<script>
  // 1.测试formData
  document.querySelector('.ipt').onchange = function (e) {
    // 调用头像上传接口 提交图片
    const data = new FormData()
    data.append('avatar', e.target.files[0])
    axios({
      url: 'http://ajax-api.itheima.net/api/file',
      method: 'post',
      data: data,
    }).then(res => {
      console.log('res:', res)
    })
  }
  // 2.测试application/json
  document.querySelector('.json').onclick = function () {
    axios
      .post('http://ajax-api.itheima.net/api/login', {
        username: 'admin',
        password: '123456',
      })
      .then(res => {
        console.log('res:', res)
      })
  }
  // 3.测试 application/x-www-form-urlencoded
  document.querySelector('.urlencoded').onclick = function () {
    axios({
      url: 'http://ajax-api.itheima.net/api/data',
      method: 'post',
      data: 'name=jack&age=18&friend=rose',
    }).then(res => {
      console.log('res:', res)
    })
  }
</script>

axios-基地址

javascript

<h2>axios-基地址</h2>
<button>发送请求</button>
<script src="./lib/axios.js"></script>
<script>
    // 配置基地址
    axios.defaults.baseURL='http://ajax-api.itheima.net'

    const btn = document.querySelector('button')
    btn.addEventListener('click', function(){
        // 聊天接口
        axios({
            url:'/api/robot',
            method:'get',
            params:{
                spoken:'你好吗，我不好'
            }
        }).then(res => {
            console.log(res)
        })
    })

    // 测试post请求
    const postBtn = document.querySelector('.post')

    postBtn.addEventListener('click', function(){
        axios({
            url:'/api/login',
            // 如果还要单独的某个基地址，自己这个请求设置
            baseURL:base2,
            method:'post',
            data:{
                username:'admin',
                password:'123456'
            }
        }).then(res => {
            console.log(res)
        })
    })
</script>

图书管理列表渲染

javascript

 // 1. 配置基地址 
 axios.defaults.baseURL = 'http://ajax-api.itheima.net'
//  /api/books

// 2. 当所有资源加载完毕的时候，请求数据，渲染列表
window.addEventListener('load', function(){
  getBooks()
})

// 3. 封装获取全部书籍的方法
const tbody = document.querySelector('tbody')
function getBooks(){
  axios({
    url:'/api/books',
    // method:'get', // get是默认值，可以省略
  }).then(res => {
    console.log(res)
    const htmlArr = res.data.data.map(el => {
      
      const {id, bookname, createdAt, author, publisher, updatedAt} = el 
      return `
          <tr>
          <th scope="row">${id}</th>
          <td>${bookname}</td>
          <td>${author}</td>
          <td>${publisher}</td>
          <td>
            <button type="button" class="btn btn-link btn-sm btn-delete">
              删除
            </button>
            <button type="button" class="btn btn-link btn-sm btn-update">
              编辑
            </button>
          </td>
        </tr>
      `
    }) // end map 


    tbody.innerHTML = htmlArr.join('')
  })
}

bootstrap

model : https://v5.bootcss.com/docs/components/modal/#live-demo

javascript

//     1. 自定义属性操作
//     data开头都是自定义属性 
//     data-bs-toggle  ==> 切换弹窗
//     data-bs-target  ==> 切换哪个弹窗
//     data-bs-dismiss  ===> 关掉弹窗
//  


 // 用js的方式操作model
// 实例化一个model对象，
const myModel = new bootstrap.Modal('#exampleModal')
// 调用js方法，show , hide 开启 关闭
setTimeout(() => {
    myModel.show() // 开启
    myModel.hide()
}, 3000);

添加图书

javascript

// 添加图书 
const addModal = new bootstrap.Modal('#addModal')
const addForm = document.querySelector('#addForm')
const addBtn = document.querySelector('#addBtn')

// 点击确认的时候，将输入的内容发送给后端存起来
addBtn.addEventListener('click', function(){
  // www-form-urlen
    // 使用serialize ==> 快速获取表单元素的值
    const data = serialize(addForm, {hash:true})
    // console.log('data' , data)
    axios({
      url:'/api/books',
      method:'POST',
      data
    }).then(res => {
      // 如果请求成功了，应该把弹窗关掉，还要渲染更新数据
      getBooks()
      // 关掉弹窗
      addModal.hide()
      // 重置表单
      addForm.reset()
    })
})

删除功能

javascript

// 删除功能
tbody.addEventListener('click', function(e){
  if (e.target.classList.contains('btn-delete')){
    const id = e.target.dataset.id
    axios({
      url:`/api/books/${id}`,
      method:'DELETE'
    }).then(res => {
      console.log(res)
      alert('删除成功')
      getBooks()
    })
    
  } // end if 
})

编辑图书

获取图书详情-接口

javascript

// ==> 编辑图书
const editModal = new bootstrap.Modal('#editModal')
const editForm = document.querySelector('#editForm')
// 事件委托的方式给tbody绑定
tbody.addEventListener('click', function(e){
  if (e.target.classList.contains('btn-update')){

    axios({
      url:`/api/books/${e.target.dataset.id}`,
    }).then(({data:res}) => {
      // 填充内容
      // editForm.querySelector(`[name=author]`).value = res.data.author
      // editForm.querySelector(`[name=bookname]`).value = res.data.bookname
      // editForm.querySelector(`[name=publisher]`).value = res.data.publisher
      // editForm.querySelector(`[name=id]`).value = res.data.id

      for(let key in res.data){
        editForm.querySelector(`[name=${key}]`).value = res.data[key]
      }

    })
    editModal.show()

  } // 处理编辑的逻辑
})

保存修改

javascript

// 保存 
const editBtn = document.querySelector('#editBtn')
editBtn.addEventListener('click', function(){
  // 获取表单元素的数据，发给后端
  const data = serialize(editForm, {hash:true})
  console.log(data)
  axios({
      url:`/api/books/${data.id}`,
      method:'put',
      data, // 别忘了参数data
  }).then(res => {
      console.log(res)
      // 提示更新修改成功
      alert(res.data.message)
      // 关闭弹窗
      editModel.hide()
      // 更新数据
      getBooks()
  })
})

作业-API接口文档

https://apifox.com/apidoc/project-1937884/api-49760221

1. link-to ​

01 axios-config ​

02 英雄百科作业 ​

04- form表单原始的方式 ​

05- form-ajax提交数据 ​

06-form-serialize简化表单取值 ​

07 form-data基本使用 ​

08 input-type-file选择文件 ​

09-FormData头像上传 ​

10 头像上传 ​

content-type ​

axios-基地址 ​

图书管理列表渲染 ​

bootstrap ​

添加图书 ​

删除功能 ​

编辑图书 ​

保存修改 ​

作业-API接口文档 ​

1. link-to

01 axios-config

02 英雄百科作业

04- form表单原始的方式

05- form-ajax提交数据

06-form-serialize简化表单取值

07 form-data基本使用

08 input-type-file选择文件

09-FormData头像上传

10 头像上传

content-type

axios-基地址

图书管理列表渲染

bootstrap

添加图书

删除功能

编辑图书

保存修改

作业-API接口文档