2.AJAX 综合案例 DAY2

1.Bootstrap 弹框

(1) 通过自定义属性

  
  
  
  
  
  



  
  
    显示弹框
  
  
  

    

      
      

        
        

          
Modal title
          
        
        
        

          
Modal body text goes here.
        
        
        

          Close
          Save changes
        
      
    
  

  
  

(2) 通过JS控制

  
  
  
  
  
  



  
  
    编辑姓名
  

  

    

      

        

          
请输入姓名
          
        
        

          

            姓名：
            
          
        
        

          取消
          保存
        
      
    
  

  
  
  

2.案例 - 图书管理

ps:动态创建元素（删除这个按钮）的要给父元素（.list）添加监听事件（事件委托）

3.图片上传

1. 获取图片文件对象
2. 使用 FormData携带图片文件
   
3. 提交表单数据到服务器，使用图片 url 网址

4.网站-更换背景

1. 选择图片上传，设置body背景
2. 上传成功时，保存url网址
3. 网页运行后，获取url网址使用

/**
 * 目标：网站-更换背景
 *  1. 选择图片上传，设置body背景
 *  2. 上传成功时，"保存"图片url网址
 *  3. 网页运行后，"获取"url网址使用
 * */
document.querySelector('.bg-ipt').addEventListener('change', e => {
    // 1. 选择图片上传，设置body背景
    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 => {
        const imgUrl = result.data.data.url
        document.body.style.backgroundImage = `url(${imgUrl})`
        // 2. 上传成功时，"保存"图片url网址
        localStorage.setItem('bgImg', imgUrl)
    })
})
// 3. 网页运行后，"获取"url网址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
// 本地有背景图才设置
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

5. 案例 - 个人信息设置

/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
// 1.1 获取用户的数据
const creator = '波仔'
axios({
    url: 'http://hmajax.itheima.net/api/settings',
    params: {
        creator
    }   
}).then(result => {
    // console.log(result)
    const userObj = result.data.data
    // 1.2 回显数据到标签上
    Object.keys(userObj).forEach(key => {
        if (key === 'avatar') {
            // 赋予默认头像
            document.querySelector('.prew').src = userObj[key]
        } else if (key === 'gender') {
            // 赋予默认性别
            // 获取性别单选框：[男radio元素，女radio元素]
            const gRadioList = document.querySelectorAll('.gender')
            // 获取性别数字：0男1女
            const gNum = userObj[key]
            // 通过性别数字，作为下标，找到对应性别单选框，设置选中状态
            gRadioList[gNum].checked = true
        } else {
            // 赋予默认内容
            document.querySelector(`.${key}`).value = userObj[key]
        }
    })

})
/**
 * 目标2：修改头像
 * 2.1 获取头像文件
 * 2.2 提交服务器并更新头像
 */
// 文件选择元素-> change事件
document.querySelector('.upload').addEventListener('change',e => {
    // 2.1获取头像文件
    console.log(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)
        const imgUrl = result.data.data.avatar
        // 把新的头像回显到页面上
        document.querySelector('.prew').src = imgUrl
    })
})
/**
 * 目标3：提交表单
 * 3.1 收集表单信息
 * 3.2 提交到服务器保存
 */
// 保存修改-> 点击
document.querySelector('.submit').addEventListener('click', () => {
    // 3.1 收集表单信息
    const userForm = document.querySelector('.user-form')
    const userObj = serialize(userForm, {hash: true, empty: true})
    // console.log(userObj)
    userObj.creator = creator
    // 性别数字字符串，转成数字类型
    userObj.gender = +userObj.gender
    console.log(userObj)
    // 3.2 提交到服务器保存
    axios({
        url: 'http://hmajax.itheima.net/api/settings',
        method: 'PUT',
        data: userObj
    }).then(result => {
        // 4.1创建toast提示框对象
        const toastDom = document.querySelector('.my-toast')
        const toast = new bootstrap.Toast(toastDom)
        // 4.2 调用show方法 -> 显示提示框
        toast.show()
    })



})