综合案例 --- 个人信息设置 + Bootstrap5 提示框(Toast)
1. 获取个人信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息设置</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4512145_zn7nbghvkxg.css">
<style>
.message input, .message textarea {
width: 300px;
}
</style>
</head>
<body>
<div>
<h3>基本设置</h3>
<form class="message">
<div class="mb-3" style="width: 100px;height: 100px">
<img src="../images/默认头像.png" alt=""
style="width: 100px;height: 100px;border-radius: 50%;margin-bottom: 10px" class="avatar">
<label for="exampleFormControlInputAvatar" class="form-label"
style="border: 1px solid gray;border-radius: 15%;padding: 5px 10px">更换头像</label>
<input type="file" class="form-control" id="exampleFormControlInputAvatar" name="avatar"
style="display: none">
</div>
<div class="mb-3" style="margin-top: 80px">
<label for="exampleFormControlInputEmail" class="form-label">邮箱</label>
<input type="email" class="form-control email" id="exampleFormControlInputEmail" name="email"
placeholder="请输入邮箱">
</div>
<div class="mb-3">
<label for="exampleFormControlInputNickname" class="form-label">昵称</label>
<input type="text" class="form-control nickname" id="exampleFormControlInputNickname" name="nickname"
placeholder="请输入昵称">
</div>
<div class="mb-3">
<label for="exampleFormControlInputGender" class="form-label">性别</label>
<div id="exampleFormControlInputGender">
<input type="radio" class="gender" name="gender" value="1">男
<input type="radio" class="gender" name="gender" value="0">女
</div>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">个人简介</label>
<textarea class="form-control desc" id="exampleFormControlTextarea1" name="desc" rows="3"></textarea>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.min.js"></script>
<script>
// 获取用户的基本信息,并将用户信息填写进form表单中
const creator = "老孙"
axios({
url: "http://hmajax.itheima.net/api/settings",
params: {
creator
}
}).then(result => {
const data = result.data.data
console.log(data)
Object.keys(data).forEach(key => {
// 头像需要单独处理
if (key === "avatar") {
document.querySelector(".avatar").src = data[key]
} else if (key === "gender") { // 性别需要单独处理
document.querySelectorAll(".gender").forEach(item => {
// 从服务器返回的gender是数组类型,需要转成字符串再进行比较
item.value === String(data[key]) ? item.checked = true : item.checked = false
})
} else {
document.querySelector(`.message .${key}`).value = data[key]
}
})
})
</script>
</body>
</html>
2. 修改头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息设置</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4512145_zn7nbghvkxg.css">
<style>
.message input, .message textarea {
width: 300px;
}
</style>
</head>
<body>
<div>
<h3>基本设置</h3>
<form class="message">
<div class="mb-3" style="width: 100px;height: 100px">
<img src="../images/默认头像.png" alt=""
style="width: 100px;height: 100px;border-radius: 50%;margin-bottom: 10px" class="avatar">
<label for="exampleFormControlInputAvatar" class="form-label"
style="border: 1px solid gray;border-radius: 15%;padding: 5px 10px">更换头像</label>
<input type="file" class="form-control" id="exampleFormControlInputAvatar" name="avatar"
style="display: none">
</div>
<div class="mb-3" style="margin-top: 80px">
<label for="exampleFormControlInputEmail" class="form-label">邮箱</label>
<input type="email" class="form-control email" id="exampleFormControlInputEmail" name="email"
placeholder="请输入邮箱">
</div>
<div class="mb-3">
<label for="exampleFormControlInputNickname" class="form-label">昵称</label>
<input type="text" class="form-control nickname" id="exampleFormControlInputNickname" name="nickname"
placeholder="请输入昵称">
</div>
<div class="mb-3">
<label for="exampleFormControlInputGender" class="form-label">性别</label>
<div id="exampleFormControlInputGender">
<input type="radio" class="gender" name="gender" value="1">男
<input type="radio" class="gender" name="gender" value="0">女
</div>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">个人简介</label>
<textarea class="form-control desc" id="exampleFormControlTextarea1" name="desc" rows="3"></textarea>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.min.js"></script>
<script>
const creator = "老孙"
axios({
url: "http://hmajax.itheima.net/api/settings",
params: {
creator
}
}).then(result => {
const data = result.data.data
console.log(data)
Object.keys(data).forEach(key => {
if (key === "avatar") {
document.querySelector(".avatar").src = data[key]
} else if (key === "gender") {
document.querySelectorAll(".gender").forEach(item => {
item.value === String(data[key]) ? item.checked = true : item.checked = false
})
} else {
document.querySelector(`.message .${key}`).value = data[key]
}
})
})
// 修改头像
// 1. 发送请求提交数据到后端接口
// 2. 将返回的url覆盖img的src
document.querySelector("#exampleFormControlInputAvatar").addEventListener("change", function (e) {
const fileObj = e.target.files[0]
const formData = new FormData()
formData.append("avatar", fileObj)
formData.append("creator", creator)
axios({
url: "http://hmajax.itheima.net/api/avatar",
method: "put",
data: formData
}).then(result => {
console.log(result)
if (result.status === 200) {
document.querySelector(".avatar").src = result.data.data.avatar
}
})
})
</script>
</body>
</html>
3. 修改信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息设置</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4512145_zn7nbghvkxg.css">
<style>
.message input, .message textarea {
width: 300px;
}
</style>
</head>
<body>
<div>
<h3>基本设置</h3>
<form class="message">
<div class="mb-3" style="width: 100px;height: 100px">
<img src="../images/默认头像.png" alt=""
style="width: 100px;height: 100px;border-radius: 50%;margin-bottom: 10px" class="avatar">
<label for="exampleFormControlInputAvatar" class="form-label"
style="border: 1px solid gray;border-radius: 15%;padding: 5px 10px">更换头像</label>
<input type="file" class="form-control" id="exampleFormControlInputAvatar" name="avatar"
style="display: none">
</div>
<div class="mb-3" style="margin-top: 80px">
<label for="exampleFormControlInputEmail" class="form-label">邮箱</label>
<input type="email" class="form-control email" id="exampleFormControlInputEmail" name="email"
placeholder="请输入邮箱">
</div>
<div class="mb-3">
<label for="exampleFormControlInputNickname" class="form-label">昵称</label>
<input type="text" class="form-control nickname" id="exampleFormControlInputNickname" name="nickname"
placeholder="请输入昵称">
</div>
<div class="mb-3">
<label for="exampleFormControlInputGender" class="form-label">性别</label>
<div id="exampleFormControlInputGender">
<input type="radio" class="gender" name="gender" value="1">男
<input type="radio" class="gender" name="gender" value="0">女
</div>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">个人简介</label>
<textarea class="form-control desc" id="exampleFormControlTextarea1" name="desc" rows="3"></textarea>
</div>
<div class="btn btn-primary save-btn">保存</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.min.js"></script>
<script>
const creator = "老孙"
axios({
url: "http://hmajax.itheima.net/api/settings",
params: {
creator
}
}).then(result => {
const data = result.data.data
console.log(data)
Object.keys(data).forEach(key => {
if (key === "avatar") {
document.querySelector(".avatar").src = data[key]
} else if (key === "gender") {
document.querySelectorAll(".gender").forEach(item => {
item.value === String(data[key]) ? item.checked = true : item.checked = false
})
} else {
document.querySelector(`.message .${key}`).value = data[key]
}
})
})
document.querySelector("#exampleFormControlInputAvatar").addEventListener("change", function (e) {
const fileObj = e.target.files[0]
const formData = new FormData()
formData.append("avatar", fileObj)
formData.append("creator", creator)
axios({
url: "http://hmajax.itheima.net/api/avatar",
method: "put",
data: formData
}).then(result => {
console.log(result)
if (result.status === 200) {
document.querySelector(".avatar").src = result.data.data.avatar
}
})
})
// 修改个人信息
// 1. 收集form表单的数据
// 2. 将收集到的表单数据提交到后台服务器保存
// 3. 重新写回到表单中
document.querySelector(".save-btn").addEventListener("click", function () {
const form = document.querySelector(".message")
const formObj = serialize(form, {hash: true, empty: true})
formObj.creator = creator
formObj.gender = Number(formObj.gender)
console.log(formObj)
axios({
url: "http://hmajax.itheima.net/api/settings",
method: "put",
data: formObj
}).then(result => {
const data = result.data.data
Object.keys(data).forEach(key => {
if (key === "avatar") {
document.querySelector(".avatar").src = data[key]
} else if (key === "gender") {
document.querySelectorAll(".gender").forEach(item => {
if (item.value === String(data[key])) {
item.checked = true
}
})
} else {
document.querySelector(`.${key}`).value = data[key]
}
})
})
})
</script>
</body>
</html>
4. 修改成功后的提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息设置</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4512145_zn7nbghvkxg.css">
<style>
.message input, .message textarea {
width: 300px;
}
</style>
</head>
<body>
<div>
<h3 style="position: relative">基本设置</h3>
<!-- 1. 提前配置好提示框的样式和内部信息,data-bs-delay为1.5s后消失 -->
<div class="toast message-toast" data-bs-delay="1500" style="background-color: #d1e7dd;padding: 10px 10px;position: absolute;z-index: 10;float: left">操作成功</div>
<div class="toast message-toast1" data-bs-delay="1500" style="background-color: #d1e7dd;padding: 10px 10px;position: absolute;z-index: 10;float: left">头像修改成功</div>
<form class="message">
<div class="mb-3" style="width: 100px;height: 100px">
<img src="../images/默认头像.png" alt=""
style="width: 100px;height: 100px;border-radius: 50%;margin-bottom: 10px" class="avatar">
<label for="exampleFormControlInputAvatar" class="form-label"
style="border: 1px solid gray;border-radius: 15%;padding: 5px 10px">更换头像</label>
<input type="file" class="form-control" id="exampleFormControlInputAvatar" name="avatar"
style="display: none">
</div>
<div class="mb-3" style="margin-top: 80px">
<label for="exampleFormControlInputEmail" class="form-label">邮箱</label>
<input type="email" class="form-control email" id="exampleFormControlInputEmail" name="email"
placeholder="请输入邮箱">
</div>
<div class="mb-3">
<label for="exampleFormControlInputNickname" class="form-label">昵称</label>
<input type="text" class="form-control nickname" id="exampleFormControlInputNickname" name="nickname"
placeholder="请输入昵称">
</div>
<div class="mb-3">
<label for="exampleFormControlInputGender" class="form-label">性别</label>
<div id="exampleFormControlInputGender">
<input type="radio" class="gender" name="gender" value="1">男
<input type="radio" class="gender" name="gender" value="0">女
</div>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">个人简介</label>
<textarea class="form-control desc" id="exampleFormControlTextarea1" name="desc" rows="3"></textarea>
</div>
<div class="btn btn-primary save-btn">保存</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.min.js"></script>
<script>
const creator = "老孙"
axios({
url: "http://hmajax.itheima.net/api/settings",
params: {
creator
}
}).then(result => {
const data = result.data.data
Object.keys(data).forEach(key => {
if (key === "avatar") {
document.querySelector(".avatar").src = data[key]
} else if (key === "gender") {
document.querySelectorAll(".gender").forEach(item => {
item.value === String(data[key]) ? item.checked = true : item.checked = false
})
} else {
document.querySelector(`.message .${key}`).value = data[key]
}
})
})
const toastDom1 = document.querySelector('.message-toast1')
const toast1 = new bootstrap.Toast(toastDom1)
document.querySelector("#exampleFormControlInputAvatar").addEventListener("change", function (e) {
const fileObj = e.target.files[0]
const formData = new FormData()
formData.append("avatar", fileObj)
formData.append("creator", creator)
axios({
url: "http://hmajax.itheima.net/api/avatar",
method: "put",
data: formData
}).then(result => {
console.log(result)
if (result.status === 200) {
document.querySelector(".avatar").src = result.data.data.avatar
toast1.show()
}
})
})
const toastDom = document.querySelector('.message-toast')
const toast = new bootstrap.Toast(toastDom) // 2. 实例化提示框
document.querySelector(".save-btn").addEventListener("click", function () {
const form = document.querySelector(".message")
const formObj = serialize(form, {hash: true, empty: true})
formObj.creator = creator
formObj.gender = Number(formObj.gender)
console.log(formObj)
axios({
url: "http://hmajax.itheima.net/api/settings",
method: "put",
data: formObj
}).then(result => {
if (result.status === 200) {
const data = result.data.data
Object.keys(data).forEach(key => {
if (key === "avatar") {
document.querySelector(".avatar").src = data[key]
} else if (key === "gender") {
document.querySelectorAll(".gender").forEach(item => {
if (item.value === String(data[key])) {
item.checked = true
}
})
} else {
document.querySelector(`.${key}`).value = data[key]
}
})
toast.show() // 3. 显示提示框
}
})
})
</script>
</body>
</html>
5. Toast 提示框使用流程
1. HTML标签片段
<!-- data-bs-delay="1500" 表示 1.5s 后消失 -->
<div class="toast message-toast" data-bs-delay="1500">操作成功</div>
2. CSS 控制样式和显示位置
.message-toast{
background-color: #d1e7dd;
padding: 10px 10px;
position: absolute;
top: 10px
left:10px
z-index: 10;
}
3. 调用
const toastDom = document.querySelector(".message-toast")
const toast = new bootstrap.Toast(toastDom)
toast.show() // 显示
toast.hidde() // 隐藏
python防脱发技巧
浙公网安备 33010602011771号