AJAX Day02图书管理案例,上传背景图案例,个人信息设置案例
bootstrap弹框案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 弹框title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
显示弹框
button>
<div class="modal my-box" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal titleh5>
<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">Closebutton>
<button type="button" class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
body>
html>
图书管理案例
/**
* 目标1：渲染图书列表
* 1.1 获取数据
* 1.2 渲染数据
*/
// 封装-获取并渲染列表一次
// 1.1 获取数据
const creator = '杉而'
function getBookList() {
axios({
url: 'http://hmajax.itheima.net/api/books',
params: {
creator
}
}).then(result => {
console.log(result)
const bookList = result.data.data
console.log(bookList)
// 渲染数据
const htmlStr = bookList.map((item, index) => {
return `
<tr>
<td>${index + 1}td>
<td>${item.bookname}td>
<td>${item.author}td>
<td>${item.publisher}td>
<td data-id =${item.id}>
<span class="del">删除span>
<span class="edit">编辑span>
td>
tr>
`
}).join('')
console.log(htmlStr)
document.querySelector('.list').innerHTML = htmlStr
})
}
// 网页加载运行，获取并渲染一次
getBookList()
/**
* 目标2：新增图书
* 2.1 新增弹框-》显示和隐藏
* 2.2 收集表单数据，并提交到服务器保存
* 2.3 刷新图书列表
*/
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮 -》点击 -》隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
// 收集表单数据，并提交到服务器保存
const addForm = document.querySelector('.add-form')
const bookObj = serialize(addForm, { hash: true, empty: true })
console.log(bookObj)
// 提交到服务器
axios({
url: 'http://hmajax.itheima.net/api/books',
method: 'post',
data: {
...bookObj,
creator
}
}).then(result => {
console.log(result)
// 添加成功后，重新请求并渲染图书列表
getBookList()
// 重置表单
addForm.reset()
// 隐藏弹框
addModal.hide()
})
})
/**
* 目标3：删除图书
* 3.1 删除元素绑定点击事件-》获取图书id
* 3.2调用删除接口
* 3.3 刷新图书列表
*/
// 删除元素-》点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {
// 获取触发事件目标元素
console.log(e.target)
// 判断点击的是删除元素
if (e.target.classList.contains('del')) {
// console.log('点击删除元素')
const theId = e.target.parentNode.dataset.id
console.log(theId)
// 调用删除接口
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
method: 'delete'
}).then(() => {
// 刷新图书列表
getBookList()
})
}
})
/**
* 目标4：编辑图书
* 4.1 编辑弹框，-》显示和隐藏
* 4.2获取当前编辑图书数据-》 回显到编辑表单中
* 4.3 提交保存修改，并刷新列表
*/
// 编辑弹框，-》显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 编辑元素-》点击-》弹窗显示
document.querySelector('.list').addEventListener('click', e => {
// 判断点击的是否为编辑元素
if (e.target.classList.contains('edit')) {
// console.log('编辑')
// 获取当前编辑图书数据-》回显到编辑表单中
const theId = e.target.parentNode.dataset.id
console.log(theId)
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
method: 'get'
}).then(result => {
const bookObj = result.data.data
// document.querySelector('.edit-form .bookname').value = bookObj.bookname
// document.querySelector('.edit-form .author').value = bookObj.author
// document.querySelector('.edit-form .publisher').value = bookObj.publisher
// 遍历对象“属性”和标签“类名”一致
// 遍历数组对象，使用属性去获取对应的标签，快速赋值
const keys = Object.keys(bookObj)
console.log(keys) // ["id", "bookname", "author", "publisher"]
keys.forEach(key => {
document.querySelector(`.edit-form .${key}`).value = bookObj[key]
})
// console.log(result)
})
editModal.show()
}
})
// 修改按钮 点击隐藏事件
document.querySelector('.edit-btn').addEventListener('click', () => {
// 4.3 提交保存修改，并刷新列表
const editForm = document.querySelector('.edit-form')
const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
// console.log(bookObj)
// 保存正在编辑的图书id，隐藏起来：无需让用修改
// {id: "270332", bookname: "三国演义", author: "罗贯", publisher: "人民出版社"}
axios({
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'put',
data: {
bookname,
author,
publisher,
creator
}
}).then(() => {
// 修改成功后，重新获取并渲染
getBookList()
// 隐藏弹框
editModal.hide()
})
})
更换背景图片
/**
* 目标：网站-更换背景
* 1. 选择图片上传，设置body背景
* 2. 上传成功时，"保存"图片url网址
* 3. 网页运行后，"获取"url网址使用
* */
document.querySelector('.bg-ipt').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)
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})`)
个人信息设置
/**
* 目标1：信息渲染
* 1.1 获取用户的数据
* 1.2 回显数据到标签上
* */
// 获取个人信息
const creator = '杉而'
axios({
url: 'http://hmajax.itheima.net/api/settings',
method: 'get',
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')
// console.log(gRadioList)
// 获取性别数字 0男1女
const gNum = userObj[key]
// console.log(gNum)
// 通过性别数字，作为下标，找到对应性别单选框，设置选中状态
gRadioList[gNum].checked = true
} else {
// 赋予默认内容
document.querySelector(`.${key}`).value = userObj[key]
}
})
})
/**
* 目标2：修改头像
* 2.1 获取头像
* 2.2 提交服务器并更新头像
* */
// 文件选择元素-》change事件
document.querySelector('.upload').addEventListener('click', e => {
// 获取头像文件
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 => {
const imgUrl = result.data.data.avatar
// 把新的头像回显到页面上
document.querySelector('.prew').src = imgUrl
})
})
/**
* 目标3：提交表单
* 3.1 收集表单信息
* .2 提交服务器保存
* */3
document.querySelector('.submit').addEventListener('click', () => {
// 收集表单信息
const userForm = document.querySelector('.user-form')
const userObj = serialize(userForm, { hash: true, empty: true })
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 => {
// 创建toast对象
const toastDom = document.querySelector('.my-toast')
const toast = new bootstrap.Toast(toastDom)
// 调用show方法-》显示提示框
toast.show()
})
})