AJAX学习日记——Day 2

一、Bootstrap

1、功能：不离开当前页面，显示单独内容

2、导入：

1、导入bootstrap.css
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
2、导入bootstrap.js
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>

3、主体

 <!-- 
    目标：使用Bootstrap弹框
    1. 引入bootstrap.css 和 bootstrap.js
    2. 准备弹框标签，确认结构
    3. 通过自定义属性，控制弹框的显示和隐藏
   -->
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
    显示弹框
  </button>
 
  <!-- 
    弹框标签
    bootstrap的modal弹框，添加modal类名（默认隐藏）
   -->
  <div class="modal my-box" tabindex="-1">
    <div class="modal-dialog">
      <!-- 弹框-内容 -->
      <div class="modal-content">
        <!-- 弹框-头部 -->
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 弹框-身体 -->
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <!-- 弹框-底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

4、通过自定义属性控制

data-bs-toggle="modal" ：点击按钮之后会切换显示或隐藏
data-bs-target=".my-box"：点击按钮后需要被控制的弹框的css
data-bs-dismiss="modal"：点击之后隐藏
 
alert-success：成功颜色
alert-danger： 失败颜色

5、通过JS代码控制

const modalDOM = document.querySelector('.my-box')
//获取DOM
const modal = new bootstrap.Modal(modalDOM)
//通过DOM获取modal对象
document.querySelector('.edit-btn').addEventListener('click',() => {
    modal.show();
    //显示
})
document.querySelector('.btn-close-one').addEventListener('click',() =>{
    modal.hide();
    //隐藏
})

二、图片上传

1、用FormData携带图片文件
    const fd = new FormData()
    fd.append(参数名，值)
    
    如：
      const fd = new FormData()
      fd.append('img',e.target.files[0])
      
2、实例：
    document.querySelector('.upload').addEventListener('change',e =>{
      console.log(e.target.files[0])
      const fd = new FormData()
      fd.append('img',e.target.files[0])
 
      axios({
        url:'http://hmajax.itheima.net/api/uploadimg',
        method:'POST',
        data:fd,
      }).then(result => {
        console.log(result.data.data.url);
        document.querySelector('.my-img').src = result.data.data.url;
      })
    })                                

三、背景替换

  document.querySelector('.bg-ipt').addEventListener('change',e => {
      const fd = new FormData();
      console.log(e.target.files[0]);
      fd.append('img',e.target.files[0]);
 
      axios({
        url:'http://hmajax.itheima.net/api/uploadimg',
        method:'post',
        data:fd,
      }).then(result => {
        console.log(result.data.data.url);
        const MyImg = result.data.data.url
        document.body.style.backgroundImage = `url(${MyImg})`
 
        const bgUrl = localStorage.setItem('bgImg',MyImg)
      })
    })
 
    const bgUrl = localStorage.getItem('bgImg');
    bgUrl && (document.body.style.backgroundImage = `url(${bgUrl}`);

四、个人信息

1、默认值
const creator = "guge";
 
axios({
    url:"http://hmajax.itheima.net/api/settings",
    method:"get",
    params:{
        creator,
    }
}).then(result => {
    console.log(result.data.data);
    const userObj = result.data.data
    Object.keys(userObj).forEach(key => {
        if(key === 'avatar'){
            document.querySelector('.prew').src = userObj[key]
            //通过键获取头像对象的值
        }
        else if(key === 'gender'){
            const gender = document.querySelectorAll('.gender');
            gender[userObj[key]].checked = true;
            //单选框的值是用checked控制
        }
        else{
            document.querySelector(`.${key}`).value = userObj[key];
        }
        console.log(key);
    })
})
2、修改头像
document.querySelector('.upload').addEventListener('change',e=>{
    // const MyImg = e.target.files[0];
    const fd = new FormData()
    fd.append('avatar',e.target.files[0])
    fd.append('creator',creator)
 
    axios({
        url:'http://hmajax.itheima.net/api/avatar',
        method:'put',
        data:fd,
    }).then(result => {
        console.log(result.data.data.avatar);
        document.querySelector('.prew').src = result.data.data.avatar;
    })
})