基于bootStrap、axios、form-serialize的图书管理系统

最新推荐文章于 2024-06-10 11:40:45 发布

^涵梦

最新推荐文章于 2024-06-10 11:40:45 发布

阅读量191

点赞数

文章标签：前端 javascript html5 bootstrap css3 ajax

本文链接：https://blog.csdn.net/qq_54800157/article/details/132224595

版权

效果图如下：

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <!--引入Bootstrap.css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--引入核心样式-->
    <link href="./css/index.css" rel="stylesheet">
</head>
<body>
    <!--主体区域-->
    <div class="container">
         <div class="top">
           <div class="top-left">
            <h3>图书管理</h3>
           </div>
           <div class="top-right">
            <!--通过属性控制弹框的显示或隐藏-->
            <button type="button" data-bs-toggle="modal" data-bs-target=".add-modal" style="background-color:#539ACB"> + 添加</button>
           </div>
         </div>
         <!--数据列表-->
         <table class="table">
          <thead class="table-light">
               <tr>
                <th style="width:150px;">序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th style="width:180px;">操作</th>
               </tr>
          </thead>
          <tbody class="list">
            <tr>
              <td>1</td>
              <td>JavaScript程序设计</td>
              <td>马特.费里斯比</td>
              <td>人民邮电出版社</td>
              <td>
                <span class="del">删除</span>
                
                <span class="edit">编辑</span>
              </td>
            </tr>
          </tbody>
         </table>

    </div>
   <!--新增弹出框-->
    <div class="modal fade add-modal" tabindex="-1">
      <div class="modal-dialog">
          <!--弹框内容-->
      <div class="modal-content">
          <!--弹框头部-->
      <div class="modal-header top">
        <span>添加图书</span>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!--弹框身体-->
      <div class="modal-body form-wrap">
        <!--新增表单-->
        <form class="add-form">
          <div class="mb-3">
            <label class="form-label">书名</label>
            <input type="text"  class="form-control bookname" name="bookname" placeholder="请输入书籍名称">
          </div>
          <div class="mb-3">
            <label class="form-label">作者</label>
            <input type="text" class="form-control author" name="author" placeholder="请输入作者名称">
          </div>
          <div class="mb-3">
            <label class="form-label">出版社</label>
            <input type="text" class="form-control publisher" name="publisher" placeholder="请输入出版社名称">
          </div>
        </form>
      </div>
      <!--弹框底部-->
      <div class="modal-footer bth-group">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary add-bth">保存</button>
      </div>
      </div>
      </div>
      </div>        
    <!--编辑弹出框-->
    <div class="modal fade edit-modal" tabindex="-1">
      <div class="modal-dialog">
          <!--弹框内容-->
      <div class="modal-content">
          <!--弹框头部-->
      <div class="modal-header">
        <span>编辑图书</span>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!--弹框身体-->
      <div class="modal-body form-wrap">
        <!--编辑表单-->
       <form class="edit-form">
        <input type="hidden" class="id" name="id">
        <div class="mb-3">
          <label class="form-label">书名</label>
          <input type="text" class="form-control bookname" name="bookname" placeholder="请输入书籍名称">
        </div>
        <div class="mb-3">
          <label class="form-label">作者</label>
          <input type="text" class="form-control author" name="author" placeholder="请输入作者名称">
        </div>
        <div class="mb-3">
          <label class="form-label">出版社</label>
          <input type="text" class="form-control publisher" name="publisher" placeholder="请输入出版社的名称">
        </div>
       </form>
      </div>
      <!--弹框底部-->
      <div class="modal-footer bth-group">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary edit-bth">修改</button>
      </div>
      </div>
      </div>
      </div>
    <!--引入bootStrap.js-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <!--引入axios.js-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!--引入form-serialize-->
    <script src="../lib/form-serialize.js"></script>
    <!--引入核心逻辑-->
    <script src="./js/index.js"></script>
</body>
</html>

css文件

*{
    padding:0;
    margin:0;
}
.container{
    height:1000px;
    width:1400px;
    border:2px solid black;
    margin:10px auto;
}
.top{
    height:50px;
    margin-top:10px; 
}
.top-left{
   margin-left:50px;
    margin-top:10px;
    
    float:left;
}
.top-right{
    margin-right:50px;
    margin-top:10px;
    float:right;

}

.table{
   width:1200px;
   margin:10px auto;
   border:2px solid black;
}
.table-light th{
    background-color:#939ca7;
    color:#ffffff;
    font-size:16px;
    text-align: center;
    font-weight: 500;
    border-right: 1px solid lightgray;
}
.table tbody td {
    color: #696F77;
   text-align:center;
  }
.del{
    color: #E5964C;
    cursor: pointer;
}
.edit{
    color: #539ACB;
    cursor: pointer;
}

js文件

/**
 * 目标1：渲染图书列表
 * 1.1获取数据
 * 1.2渲染数据
 * 
 */
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渲染数据
        //开始一个映射操作，将列表中的每个元素转化为HTML的tr
        const htmlStr=bookList.map((item,index)=>{//index为下标的索引,其中${index+1}表示要替换的变量
            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)
            //获取tbody
            const tbody=document.querySelector('.list');
            tbody.innerHTML=htmlStr;
    
})


}
//网页加载运行，获取并渲染列表一次
getBooksList()
/**
 * 目标2：新增图书
 * 2.1 新增弹框-显示和隐藏
 * 2.2 收集表单数据，并提交到服务器保存
 * 2.3 刷新图书列表
 */
//2.1 新增弹框-显示和隐藏
//创建弹框对象
const addModalDom=document.querySelector('.add-modal');
const modal=new bootstrap.Modal(addModalDom);
//保存按钮-点击-隐藏弹框
const bth=document.querySelector('.add-bth');
bth.addEventListener('click',()=>{
   
//2.2 收集表单数据，并提交到服务器保存
//获取表单
const addForm=document.querySelector('.add-form');
//使用serialize函数，收集表单元素
const data=serialize(addForm,{hash:true,empty:true});
console.log(data)
//把数据提交到服务器
axios({
    url:'http://hmajax.itheima.net/api/books',
    method:'post',
    data:{
       ...data, //...为展开语法
       creator
    }
}).then(result=>{
    console.log(result)
    //添加成功后，重新请求并渲染图书列表
    getBooksList()
    //重置表单
    addForm.reset();
    //隐藏弹框
    modal.hide();
})

})
/**
 * 目标3：删除图书
 * 3.1 删除元素绑定点击事件-获取图书id
 * 3.2 调用删除接口
 * 3.3 刷新图书列表
 */
//删除元素-点击
document.querySelector('.list').addEventListener('click',e=>{
    //获取触发事件目标元素,判断点击的是删除元素
    if(e.target.classList.contains('del')){
        //获取图书id(自定义属性id)
     const theId=e.target.parentNode.dataset.id
     console.log(theId) 
    //调用删除接口
    axios({
        url:`http://hmajax.itheima.net/api/books/${theId}`,//路径传参（模版字符串）
        method:'delete'

    }).then(()=>{
        //刷新图书列表
        getBooksList()
    })
}
    
})
/**
 * 目标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')){
       //获取当前编辑图书数据-回显到编辑表单中
       //取出图书id
       const theId=e.target.parentNode.dataset.id
       //获取图书的详情数据
       axios({
        url:`http://hmajax.itheima.net/api/books/${theId}`
       }).then(result=>{
        const bookObj=result.data.data
        document.querySelector('.edit-form .id').value=bookObj.id;
        document.querySelector('.edit-form .bookname').value=bookObj.bookname;
        document.querySelector('.edit-form .author').value=bookObj.author;
        document.querySelector('.edit-form .publisher').value=bookObj.publisher;
        
       })
          editModal.show(); 
    }
})
//修改按钮-点击-弹框隐藏
document.querySelector('.edit-bth').addEventListener('click',()=>{
    //提交保存修改，并刷新列表
    //第一种方法
    const editForm=document.querySelector('.edit-form');
    const bookObj=serialize(editForm,{hash:true,empty:true})
    
    axios({
        url:`http://hmajax.itheima.net/api/books/${bookObj.id}`,
        method:'PUT',
        data:{
            bookname:bookObj.bookname,
            author:bookObj.author,
            publisher:bookObj.publisher,
            creator

        }
    //第二种方法
    // const editForm=document.querySelector('.edit-form');
    // const {id,bookname,author,publisher}=serialize(editForm,{hash:true,empty:true})
    // axios({
    //     url:`http://hmajax.itheima.net/api/books/${id}`,
    //     method:'PUT',
    //     data:{
    //     bookname,
    //     author,
    //      publisher,
    //       creator
        
    //             }

    }).then(result=>{
        console.log(result)
        getBooksList()
        //隐藏弹框
        editModal.hide()
    })
    
    
})