Ajax_02
01_Bootstrap框架-控制弹框的使用
代码
<!-- 引入bootstrap.css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <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 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> <!-- 引入bootstrap.js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
- 通过自定义属性,控制弹框的显示和隐藏.自己能够控制属性,从而进行更改
02_通过js方式控制弹框
目标:使用JS控制弹框,显示和隐藏
-
创建弹框对象
-
调用弹框对象内置方法
.show() 显示
.hide() 隐藏
代码示例
<!-- 引入bootstrap.css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <button type="button" class="btn btn-primary edit-btn"> 编辑姓名 </button> <div class="modal name-box" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">请输入姓名</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form action=""> <span>姓名:</span> <input type="text" class="username"> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-primary save-btn">保存</button> </div> </div> </div> </div> <!-- 引入bootstrap.js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script> <script> // 1、创建弹框对象 const modalDom = document.querySelector('.name-box') const modal = new bootstrap.Modal(modalDom) // 编辑姓名 -> 点击 -> 赋予一个默认的姓名 -> 弹框显示 document.querySelector('.edit-btn').addEventListener('click', () => { document.querySelector('.username').value = '默认姓名' // 2、显示弹框 modal.show() }) // 保存 -> 点击 -> 获取姓名打印 -> 弹框隐藏 document.querySelector('.save-btn').addEventListener('click', () => { const username = document.querySelector('.username').value console.log('模拟把姓名保存到服务器上',username) // 3、隐藏弹框 modal.hide() }) </script>
- 关于这两种方式控制弹框的显示和隐藏,至于怎么选择,我们取决于业务逻辑,如果只是单纯的控制显示和隐藏,那么直接使用bootstrap属性控制即可,反正就得使用js控制
图书管理业务
需求: 对服务器的图书数据进行 增、删、改、查。功能的实现,同时实时动态的渲染刷新页面内容
根据功能模块分为四个业务模块,下面有各个业务的实现步骤
01_ 渲染图书列表业务
* 目标1:渲染图书列表
* 1.1 获取数据
* 1.2 渲染数据
业务1代码
// 固定的携带参数别名 const creator = '刘不住' // 封装 -获取并渲染图书列表函数 function getBooksList() { //1.1 获取数据 axios({ url: 'http://hmajax.itheima.net/api/books', params: { // 传递外号:获取对应数据 creator } }).then((result) => { console.log(result) const bookList = result.data.data console.log(bookList) // 1.2 渲染数据 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> <span class="del">删除</span> <span class="edit">编辑</span> </td> </tr>` }).join('') console.log(htmlStr) document.querySelector('.list').innerHTML = htmlStr }) } // 网页加载运行,获取并渲染列表一次 getBooksList()
02_新增图书业务
目标2:新增图书
* 2.1 新增弹框 -> 显示和隐藏
* 2.2 收集表单数据,并提交给服务器
* 2.3 刷新图书列表、同时重置表单
业务2代码
// 2.1 创建一个弹框对象 const addModalDom = document.querySelector('.add-modal') const addModal = new bootstrap.Modal(addModalDom) // 给保存按钮添加点击事件 document.querySelector('.add-btn').addEventListener('click', () => { // 2.2 收集表单数据,并提交给服务器 const form = document.querySelector('.add-form') // 使用serialize插件的函数获取拥有anme属性的表单值 const data = serialize(form, { hash: true, empty: true }) // 使用对象解构对获取的值进行处理,用于提交数据 const { bookname, author, publisher } = data console.log(data) // 2.2.1 向服务器发送提交请求(提交到服务器) axios({ url: 'http://hmajax.itheima.net/api/books', method: 'post', data: { ...data, creator } }).then(result => { console.log(result) // 2.3 服务器响应后我们需要重新渲染图书数据列表 getBooksList() // 重置表单 form.reset() // 隐藏弹框 addModal.hide() }) })
这里的显示,我们使用bootstrap属性控制就可以了,但是隐藏我们需要提交数据,所以我们使用js来控制。
03_删除图书业务
* 目标3: 删除图书
* 3.1 删除元素绑定点击事件 -> 获取图书id
* 3.2 调用删除接口
* 3.3 刷新图书列表
业务3代码
// 3.1 删除元素 -> 点击(事件委托) 动态创建,我们委托父级 document.querySelector('.list').addEventListener('click', e => { // console.log(e.target) // 判断用户点击的元素 if (e.target.classList.contains('del')) { // console.log('点击删除元素') // 获取图书id(我们动态创建的自定义属性id) const theId = e.target.parentNode.dataset.id console.log(theId) // 3.2 调用删除接口 axios({ // 使用模板字符串 路径传参 url: `http://hmajax.itheima.net/api/books/${theId}`, method: 'DELETE' }).then(result => { // 3.3 刷新图书列表 getBooksList() console.log(result) }).catch(error => { console.log(error) console.log(error.response.data.message) }) } })
04_编辑图书业务
* 目标4 :编辑图书
* 4.1 编辑弹框 -> 显示和隐藏
* 4.2 获取当前编辑图书数据 -> 回显到编辑表单中
* 4.3 提交保存修改 ,并刷新列表
业务4代码
// 4.1 编辑弹框 -> 显示和隐藏 (使用js方式控制) const editDom = document.querySelector('.edit-modal') // 通过bootstrap.Modal构造函数创建一个实例对象 const editModal = new bootstrap.Modal(editDom) // 给编辑元素 -> 绑定 ->委托事件 document.querySelector('.list').addEventListener('click', e => { // 判断点击的是否为 edit 这个类 的标签 if (e.target.classList.contains('edit')) { // console.log('编辑') // 4.2 获取当前编辑图书数据 -> 回显到编辑表单中 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 // 数据对象“属性”和标签“类名”一致 // 遍历数据对象,使用属性去获取对应标签,快速赋值 const keys = Object.keys(bookObj) //['id', 'bookname', 'author', 'publisher'] keys.forEach(key => { document.querySelector(`.edit-form .${key}`).value = bookObj[key] }) }) // 给弹框对象添加show方法,让编辑框显示出来 editModal.show() } }) // 修改按钮 -> 点击 -> 隐藏按钮 document.querySelector('.edit-btn').addEventListener('click', () => { // 4.3 提交保存修改 ,并刷新列表 const editForm = document.querySelector('.edit-form') const bookObj = serialize(editForm ,{ hash: true ,empty: true }) // 下面是保存正在编辑的图书id ,隐藏起来:无需让用户修改 // <input type="hidden" class="id" name="id" value="228500"> axios({ url: `http://hmajax.itheima.net/api/books/${bookObj.id}`, method: 'PUT', data: { ...bookObj, creator } }).then(() => { // 修改成功以后,重新获取并刷新列表 getBooksList() // 隐藏弹框 editModal.hide() }) })
业务总结
- 核心的步骤
* 业务1:渲染图书列表
* 1.1 获取数据
* 1.2 渲染数据
业务2:新增图书
* 2.1 新增弹框 -> 显示和隐藏
* 2.2 收集表单数据,并提交给服务器
* 2.3 刷新图书列表、同时重置表单
* 业务3: 删除图书
* 3.1 删除元素绑定点击事件 -> 获取图书id
* 3.2 调用删除接口
* 3.3 刷新图书列表
* 业务4 :编辑图书
- 显示和隐藏
* 4.2 获取当前编辑图书数据 -> 回显到编辑表单中
* 4.3 提交保存修改 ,并刷新列表
在所有的查询和请求中,只要服务器的数据发生变化,同时也需要渲染刷新页面的内容.
图片上传
上传-图片
注意1:上传的图片必须在2MB以内
注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问
请用img/背景图方式进行使用
* 目标:图片上传,显示到网页上
* 1. 获取图片文件
* 2. 使用 FormData 携带图片文件
* 3. 提交到服务器,获取图片url网址使用
代码示例
// 1.获取选择文件按钮,同时注册一个变化事件 document.querySelector('.upload').addEventListener('change', e => { console.log(e.target.files[0]) // 2. 使用 FormData 构造函数 携带图片文件夹 const imgs = new FormData() // 调用实例对象中 append 方法,传入图片 imgs.append('img',e.target.files[0]) // 3. 提交到服务器,获取图片url网址使用 axios({ url: 'http://hmajax.itheima.net/api/uploadimg', method: 'POST', data: imgs }).then(result => { console.log(result.data.data) const imgUrl = result.data.data.url document.querySelector('.my-img').src = imgUrl }) })
携带的参数具体需要参考接口文档。
网站背景更换
- 目标:网站-更换背景
- 选择图片上传,设置body背景
- 上传成功时,"保存"图片url网址
- 网页运行后,"获取"url网址使用
代码示例
//1、选择图片上传,给body设置背景图片 // 1.2 获取按钮进行上传 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 => { const res = result.data.data.url // 更换body的背景图 document.body.style.backgroundImage = `url(${res})` // 2、上传成功时,"保存"图片url网址 到本地,防止刷新丢失 localStorage.setItem('bgImg',res) }) }) // 3. 网页运行后,"获取"url网址使用 const bgUrl = localStorage.getItem('bgImg') console.log(bgUrl) // 逻辑与中断,本地有服务器提交后的url的话,那么就执行后面的,否则为空值不执行 bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)
- 在上传图片的基础上增加了存储到本地的功能需求,同时没有url返回,不执行更换背景。
个人信息业务
01_信息渲染
* 目标1:信息渲染
* 1.1 获取用户的数据
* 1.2 回显数据到标签上
模块一代码
// 业务1、信息渲染 // 1.1 获取用户的数据 const creator = 'cv爱好者' axios({ url: 'http://hmajax.itheima.net/api/settings', method: 'GET', params: { creator } }).then(result => { const userObj = result.data.data console.log(userObj) // 1.2 回显数据到标签上 const user = Object.keys(userObj) user.forEach(item => { if (item === 'avatar') { // 单独赋予默认头像 document.querySelector('.prew').src = userObj[item] } else if (item === 'gender') { // 单独赋予默认性别 [男radio元素 ,女radio元素] const getGender = document.querySelectorAll('.gender') //获取到伪数组,节点列表 // 获取到性别数字; 0 男 1 女 const gNum = userObj[item] // 通过性别数字,作为下标,找到对应性别单选框,设置选中状态 getGender[gNum].checked = true } else { // 赋予默认内容 document.querySelector(`.${item}`).value = userObj[item] } }) })
02_ 头像修改
* 目标2: 头像修改
* 2.1 选择头像文件
* 2.1 提交保存 + 回显
模块二代码
//点击事件 ,上传头像 document.querySelector('.upload').addEventListener('change' ,e => { console.log(e.target.files[0]) // 使用表单事件对象 FormData 构造函数 目的就是提交服务器得到url网址 const newImg = new FormData() newImg.append('avatar',e.target.files[0]) newImg.append('creator',creator) // 2.1 提交保存 + 回显 axios({ url: 'http://hmajax.itheima.net/api/avatar', method: 'PUT', data: newImg }).then(result => { // 得到图片url网址 const imgUrl = result.data.data.avatar // 把头像回显到页面上 document.querySelector('.prew').src = imgUrl }) })
03_信息修改_ + 弹框提示
* 目标3 ;信息修改
* 3.1: 收集表单信息
* 3.2: 提交到服务器保存
* 目标4: 提示框显示
* 4.1: 创建toast对象(弹框对象)
* 4.2: 调用show方法 -> 显示提示框文章来源:https://www.toymoban.com/news/detail-623657.html
模块三 + 模块四 代码示例
// 注册事件 document.querySelector('.submit').addEventListener('click', () => { const form = document.querySelector('.user-form') // 使用serialize插件获取表单元素 const formObj = serialize(form , { hash: true , empty: true}) // 添加一个别名属性到收集的表单中 formObj.creator = creator // 将性别数字转为 数字型 formObj.gender = + formObj.gender // 3.2: 提交到服务器保存 axios({ url: 'http://hmajax.itheima.net/api/settings', method: 'PUT', data: formObj }).then(result => { // 4.1: 创建toast对象(弹框对象) const toastDom = document.querySelector('.my-toast') const toast = new bootstrap.Toast(toastDom) // 4.2: 调用show方法 -> 显示提示框 toast.show() }) })
有几个经典的处理数据的方式,将会再改文章后进行单独补充。也希望自己能够坚持的重复的掌握好学习过的知识技术方式,不断地积累。文章来源地址https://www.toymoban.com/news/detail-623657.html
到了这里,关于Ajax_02学习笔记(源码 + 图书管理业务 + 以及 个人信息修改功能)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!