一、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.js2. 准备弹框标签，确认结构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.urldocument.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.dataObject.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;})
})