ajax关于axios库的运用小案例

AJAX案例

图书管理

四大功能：

展示图书
删除图书
编辑图书信息
新增图书

步骤

1.bootstrap弹窗来实现新增和编辑图书时出现的弹窗

有两种方案：

a.可以用自带的属性来进行弹窗的显示和隐藏

b.可以通过JS进行控制，此操作可以进行自定义，比如在隐藏窗口的同时获取表单元素，并进行渲染页面

a方案

在想要进行隐藏和显示的按钮中增加自带的属性

b方案

JavaScript 复制代码

//1.创建弹窗对象
    const box = document.querySelector('.name-box');
    const modal = new bootstrap.Modal(box);
    //2.绑定点击事件并调用相关显示和隐藏的函数
    //2.1获取需要绑定点击事件的对象
    document.querySelector('.edit-btn').addEventListener('click', () => {
      modal.show();
    })
    document.querySelector('.save-btn').addEventListener('click', () => {
      //获取表单信息并打印
      const data = document.querySelector('.username').value;
      console.log('username', data);
      modal.hide();
    })

2.渲染列表

a.获取数据

b.渲染数据

图片上传

步骤：

获取图片文件
- 为input绑定change事件
使用FormData携带图片文件 -- 由于传到服务器的数据需要是form-data，所以需要进行转换，而img为服务器接口指定的参数名
提交到服务器，获取图片url网址使用

两个知识点：

获取input上传的文件数据：e.target.files -- 获取的是一个文件列表（伪数组），可以通过下标指定想要的数组
提交到服务器的数据需要是表单数据，则要通过FormData来实现对数据的包裹--const filedata = new FormData(); filedata.append('img', e.target.files[0]);

代码

JavaScript 复制代码

/**
     * 目标：图片上传，显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器，获取图片url网址使用
    */
    //1.1. 获取图片文件
    //为input绑定change事件
    document.querySelector('.upload').addEventListener('change', e => {
      console.log(e.target.files[0]);
      //1.2 使用 FormData 携带图片文件 -- 由于传到服务器的数据需要是form-data，所以需要进行转换，而img为服务器接口指定的参数名
      const filedata = new FormData();
      filedata.append('img', e.target.files[0]);
      //1.3 提交到服务器，获取图片url网址使用
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: filedata
      }).then(result => {
        console.log(result);
        const myimg = document.querySelector('.my-img');
        const imgurl = result.data.data.url;
        myimg.src = imgurl;
      })
    })

网页背景更换

步骤：

选择图片上传，获取文件数据，并转换为表单数据格式
提交到服务器，并获取返回的url地址，赋值给body的背景图style
将url地址存储到本地以便下次访问网站的时候可以对body的背景图style进行赋值（需要判断本地是否存储了数据）

代码

JavaScript 复制代码

/**
 * 目标：网站-更换背景
 *  1. 选择图片上传，设置body背景
 *  2. 上传成功时，"保存"图片url网址
 *  3. 网页运行后，"获取"url网址使用
 * */
//1.1为更换背景的表单元素绑定change事件
document.querySelector('.bg-ipt').addEventListener('change', e => {
  console.log(e.target.files[0]);
  //将文件数据追加到新建的formdata中
  const Filedata = new FormData();
  Filedata.append('img', e.target.files[0]);
  //将该表单数据上传到服务器
  axios({
    url: 'http://hmajax.itheima.net/api/uploadimg',
    method: 'POST',
    data: Filedata
  }).then(result => {
    //获取返回的url地址
    console.log(result.data.data.url);
    //给body的背景图赋值
    const imgUrl = result.data.data.url;
    document.body.style.backgroundImage = `url(${imgUrl})`;
    //将该url传入本地存储，以便刷新后依旧可以对body背景图进行赋值
    localStorage.setItem('bgImg', imgUrl);
  })
})
//网页运行后，通过本地存储进行背景图赋值，但是要注意第一次进入网站时没有设置背景图
const imgUrl = localStorage.getItem('bgImg');
console.log(imgUrl);
//判断是否存在imgUrl在进行赋值 通过逻辑与的逻辑中断特性

imgUrl && (document.body.style.backgroundImage = `url(${imgUrl})`); //逻辑与的优先级高于"="

个人信息

步骤

信息渲染
- 向服务器获取对应个人的信息
- 根据服务器所给的数据与表单元素进行对比，将数据进行渲染
  
  每次网页运行都调用一次渲染函数，从服务器获取数据并将数据渲染到对应标签中
头像修改
- 绑定change事件
- 由于服务器要求，将文件数据和外号都追加到一个新建的表单数据中
- 向服务器进行提交
- 获取url网址,对头像的src重新进行赋值
表单修改
- 为表单提交按钮绑定点击事件
- 通过serialize快速获得表单信息
- 根据服务器添加外号属性
- 由于服务器要求的gender需要是数字型，因此进行修改
- 将修改的表单数据提交到服务器
- 重新调用渲染函数
操作成功提示
- 获取提示框标签，并使用bootstrap内置的对象
- 调用show()方法

新的方法

提示框对象Toast，bootstrap中的一个对象，需要在标签中内置类名toast，并且引入bootstrap相关的JavaScript文件

语法：

//html中的提示框
<!-- toast 提示框 -->
  <div class="toast my-toast" data-bs-delay="1500">
    <div class="toast-body">
      <div class="alert alert-success info-box">
        操作成功
      </div>
    </div>
  </div>
  
  //js中的运用操作，何时调用show()方法
  //获取提示框标签，并使用bootstrap内置的对象
    const tiptoastDom = document.querySelector('.my-toast');
    const tiptoast = new bootstrap.Toast(tiptoastDom);
    //调用show()方法
    tiptoast.show();

代码：

JavaScript 复制代码

/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
//封装一个渲染函数，在运行的时候进行调用，以及修改头像或者表单元素内容的时候进行调用
//将外号作为一个常量进行声明，避免反复向服务器进行操作写错外号
const creator = '老吴';
function painthtml() {
  //向服务器获取对应个人的信息
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'GET',
    params: {
      creator
    }
  }).then(result => {
    console.log(result.data.data);
    //将数据进行渲染
    const objData = result.data.data;
    Object.keys(objData).forEach(key => {
      //根据服务器所给的数据与表单元素进行对比
      //如果当前的属性名为avatar，对头像的src属性进行赋值
      if (key === 'avatar') {
        document.querySelector('.prew').src = objData[key];
      } else if (key === 'gender') {
        //如果当前值为gender，对单选框进行赋值
        //获取单选框对象
        const whatGender = document.querySelectorAll('.gender');
        //由于服务器给的规则是0男1女，刚好和下标位置相符，因此可以直接通过下标直接赋值
        whatGender[objData[key]].checked = true;
      } else {
        //其他表单元素无需进行特殊操作，进行对其内容进行赋值
        document.querySelector(`.${key}`).value = objData[key];
      }

    })

  })

}
//每次网页运行都调用一次渲染函数，从服务器获取数据并将数据渲染到对应标签中
painthtml();

/**
 * 目标2：头像切换
 *  2.1 为对应表单元素绑定change事件
 *  2.2 获取表单中的文件数据，并按服务器的格式将数据传给服务器
 *  2.3 将返回的url地址赋值给对应的标签，进行赋值操作
 * */

//绑定change事件
const imgFile = document.querySelector('.upload');
imgFile.addEventListener('change', e => {
  console.log(e.target.files);
  //由于服务器要求，将文件数据和外号都追加到一个新建的表单数据中
  const formdata = new FormData();
  formdata.append('avatar', e.target.files[0]);
  formdata.append('creator', creator);
  //向服务器进行提交
  axios({
    url: 'http://hmajax.itheima.net/api/avatar',
    method: 'PUT',
    data: formdata
  }).then(result => {
    //获取url网址
    console.log(result.data.data.avatar);
    document.querySelector('.prew').src = result.data.data.avatar;
  })
})

//快速获取表单元素内容
// const form = document.querySelector('.user-form');
//     const formdata = serialize(form, { hash: true, empty: true });
//     const { avatar, desc, email, gender, nickname } = formdata; //对对象进行结构

/**
 * 目标2：表单修改
 *  2.1 为对应表单元素绑定change事件
 *  2.2 获取表单中的文件数据，并按服务器的格式将数据传给服务器
 *  2.3 将返回的url地址赋值给对应的标签，进行赋值操作
 * */
//为表单提交按钮绑定点击事件
document.querySelector('.submit').addEventListener('click', () => {
  //通过serialize快速获得表单信息
  const form = document.querySelector('.user-form');
  const formdata = serialize(form, { hash: true, empty: true });
  //根据服务器添加外号属性
  formdata.creator = creator;
  //由于服务器要求的gender需要是数字型，因此进行修改
  formdata.gender = +formdata.gender;
  console.log(formdata);

  //将修改的表单数据提交到服务器
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'PUT',
    data: formdata
  }).then(result => {
    console.log(result);
    //目标4 提示框提示操作成功
    //获取提示框标签，并使用bootstrap内置的对象
    const tiptoastDom = document.querySelector('.my-toast');
    const tiptoast = new bootstrap.Toast(tiptoastDom);
    //调用show()方法
    tiptoast.show();
    //重新渲染页面
    painthtml();
  })
})