• ajax图书管理项目

    bootstrap弹框

    不离开当前页面，显示单独内容，让用户操作

     功能：不离开当前页面，显示单独内容，供用户操作步骤：
    1.引入bootstrap.css和bootstrap.js                                                                                                    2.准备弹框标签，确认结构
    3.通过自定义属性，控制弹框的显示和隐藏

    1. <body> 
    2. <button type="button" class ="btn btn-primary"
    3. data-bs-toggle="model" data-bs-target=".my-box">
    4.  显示弹框
    5. button>
    6. <div class="modal my-box" tabindex="-1">
    7.     <div class="modal-dialog">
    8.         
    9.         <div class="modal-content">
    10.             
    11.             <div class="modal-header">
    12.                 <h5 class="modal-title">Modal titleh5>
    13.                 <button type="button" class="btn-close"
    14.                 data-bs-dismiss="modal" aria-label="Close">button>
    15.             div>
    16.             
    17.             <div class="modal-body">.
    18.             div>
    19.             
    20.             <div class="modal-footer">
    21.                 <button type="button" class="btn btn-secondary"
    22.                 data-bs-dismiss="modal">Closebutton>
    23.                 <button type="button" class="btn btn-primary">Save
    24.                 changesbutton>
    25.             div>
    26.         div>
    27.     div>
    28. div>

    可能会出现一些问题，可能因为你用的版本4的，里面没用bs-，把属性data-dismiss改为data-bs-dismiss就行了

    和JS的适配

    • 通过属性控制，弹框显示或隐藏
    • 通过JS控制，弹框显示或隐藏

    有这样一串代码

    1. //创建弹框对象
    2. const modalDom = document.queryselector('css选择器')
    3. const modal = new bootstrap.Modal(modelDom)
    4. //显示弹框
    5. modal.show()
    6. //雌就弹框
    7. modal.hide()
    1. <div class="modal name-box" tabindex="-1">
    2.     <div class="modal-dialog">
    3.         <div class="modal-content">
    4.             <div class="modal-header">
    5.                 <h5 class="modal-title">请输入姓名h5>
    6.                 <button type="button" class="btn-close" 
    7.                 data-bs-dismiss="modal" aria-label="Close">button>
    8.             div>
    9.             <div class="modal-body">
    10.                 <form action="">
    11.                     <span>姓名：span>
    12.                     <input type="text" class="username">
    13.                 form>
    14.             div>
    15.             <div class="modal-footer">
    16.                 <button type="button" class="btn btn-secondary" 
    17.                 data-bs-dismiss="modal">取消button>
    18.                 <button type="button" class="btn btn-primary
    19.                 save-btn">保存button>
    20.             div>
    21.         div>
    22.     div>
    23. div>
    24.  
    26. <script>
    27. //1.创建弹框对象
    28. const modalDom = document.querySelector('.name-box')
    29. const modal = new bootstrap.Modal(modalDom)
    30. //编辑姓名->点击->赋予默认姓名->弹框显示
    31. document.querySelector('.edit-btn').addEventListener
    32.     ('click', () => {
    33.         document.querySelector('.username').value = '默认姓名'
    34.         //2.显示弹框
    35.         modal.show()
    36.     })
    37. //保存->点击->->获取姓名打印->弹框隐藏
    38. document.querySelector('. save-btn').addEventlistener
    39.     ('click', () => {
    40.         const username = document.querySelector('.username').value
    41.         console.log('模拟把姓名保存到服务器上'，username)
    42.         //2.隐藏弹框
    43.         modal.hide()
    44.     })
    45. script>

    图书管理渲染列表

    1. /**
    2.  目标1：渲染图书列表
    3.     * 1.1获取数据
    4.         *
    5.         1.2渲染数据
    6. **/
    7. const creator = '老张'
    8. // 封装 - 获取并渲染图书列表函数
    9. function getBooksList() {
    10.     //1.1获取数据
    11.     axios({
    12.         url: 'http: //hmajax.itheima.net/api/books',
    13.         params: {
    14.             // 外号：获取对应数据
    15.             creator
    16.         }
    17.     }).then(result => {
    18.         console.log(result)
    19.         const bookList = result.data.data
    20.         console.log(bookList)
    21.         //1.2渲染数据
    22.         const htmlStr = bookList.map((item, index) => {
    23.     return `
    24. ${index + 1}
    25. ${item.bookname}
    26. ${item.author}
    27. ${item.publisher}
    29. 删除
    30. 编辑
    32. `
    33. }).join('')
    34.  
    35. console.log(htmlStr)
    36. document. querySelector('.list'). innerHTML = htmlStr
    37.     })
    38.     // 网页加载运行，获取并渲染列表一次
    39.     getBooksList()

    CUDA常见的 

    添加数据
    1. const addModalDom = document.querySelector('.add-modal')
    2. const addModal = new bootstrap.Modal(addModalDom)
    3. // 保存按钮 -> 点击 -> 隐藏弹框
    4. document.querySelector('.add-btn').addEventListener('click', () => {
    5.     //2.2收集表单数据，并提交到服务器保存
    6.     const addForm = document.querySelector('.add-form')
    7.     const bookObj = serialize(addForm, { hash: true, empty: true })
    8.     console.log(bookObj)
    9.     //提交到服务器
    10.     axios({
    11.         url: 'http: //hmajax.itheima.net/api/books',
    12.         method: 'POST',
    13.         data: {
    14.             ...book0bj,
    15.             creator
    16.         }
    17.     }).then(result => {
    18.         console.log(result)
    19.         //2.3添加成功后，重新请求并渲染图书列表
    20.         getBooksList()
    21.         //重置表单
    22.         addForm.reset()
    23.         //隐藏弹框
    24.         addModal.hide()
    25.     })
    删除数据
    1. /* 目标3：删除图书
    2.     * 3.1删除元素绑定点击事件 -> 获取图书id
    3.         *
    4.         3.2调用删除接口
    5.             * 3.3刷新图书列表
    6.                 */
    7. //3.1删除元素->点击（事件委托）
    8. document.querySelector('.list').addEventListener('click', e => {
    9.     //获取触发事件目标元素
    10.     // console.log(e.target)
    11.     //判断点击的是删除元素
    12.     if (e.target.classList.contains('del')) {
    13.         //console.log('点击删除元素')
    14.         // 获取图书id(自定义属性id)
    15.         const theId = e.target.parentNode.dataset.id
    16.         console.log(theId)
    17.         //3.2调用删除接口
    18.         axios({
    19.             url: `http://hmajax.itheima.net/api/books/${theId}`,
    20.             method: 'DELETE'
    21.         }).then()=> {
    22.             //3.3刷新图书列表
    23.             getBooksList()
    24.         })
    25.     }
    26. })
    编辑图书
    1. /**
    2. * 目标4：编辑图书
    3.     * 4.1编辑弹框 -> 显示和隐藏
    4.         * 4.2获取当前编辑图书数据 -> 回显到编辑表单中
    5.             * 4.3提交保存修改，并刷新列表
    6.                 */
    7. //4.1编辑弹框->显示和隐藏
    8. const editDom = document.querySelector('.edit-modal')
    9. const editModal = new bootstrap.Modal(editDom)
    10. //编辑元素->点击->弹框显示
    11. document.querySelector('.list').addEventListener('click', e => {
    12.     //判断点击的是否为编辑元素
    13.     if (e.target.classlist.contains('edit')) {
    14.         const theId=e.target.parentNode.dataset.id
    15.         axios({
    16.             url:`http://hmajax.itheima.net/api/books/${theId}`
    17.             }).then(result=>{
    18.             const bookObj=result.data.data
    19.             document.querySelector('.edit-form.bookname').value=
    20.             bookObj.bookname
    21.             document.querySelector('.edit-form.author').value=
    22.             author
    23.         //因为默认的是GET方式，所以现在这个可以不写method
    24.         //遍历数据对象，使用属性获取对应的标签，快速赋值
    25.             const keys =Object.keys(bookObj)//['id','bookname','author','publisher']
    26.             keys.foreach(key=>{
    27.                 document.querySelector(`.edit-form.${key}`.value=
    28.                 bookObj[key]
    29.          // 为什么不能点key因为获取过来的是字符串
    30.             })
    31.         })
    32.         editModal.show()
    33.     }
    34. })
    35. //修改按钮->点击->隐藏弹框
    36. document.querySelector('.edit-btn').addEventListener('click', ()
    37. => {
    38.     //4.3提交保存修改，并刷新列表
    39.     const editForm = document.querySelector('.edit-form')
    40.     const bookObj = serialize(editForm, { hash: true, empty: true}) 
    41.     console.log(bookobj)
    42.     // 保存正在编辑的图书id，隐藏起来：无需让用户修改
    43.     // 
    44.     url: `http://hmajax.itheima.net/api/books/{id}`,
    45.     method:'PUT',
    46.     data:{
    47.     bookname,
    48.     author,
    49.     publisher,
    50.     creator
    51.     }
    52. }).then(()=>{
    53.     getBooksList()   
    54.  
    55.     
    56.     editModal.hide()
    57. })

    happycat 

  • 相关阅读:
    C/C++内存管理
    2022/8/11
    微信小程序：洗衣店v2.5.0微信小程序源码下载，支持直播，商城、会员、跑腿、订单推送等等功能
    Flink通过Native Kubernetes(k8s)方式Session模式和Application模式进行部署
    【nginx】缓存配置文件
    SLAM用到的矩阵论知识
    SpringMVC (3)—拦截器
    【springcloud系列】nacos服务注册实现
    安卓手持机 条码扫描终端 物流仓储盘点机
    v-on的修饰符
  • 原文地址：https://blog.csdn.net/E___V___E/article/details/140725150