c2c网站的建设网站建设全部教程

* BootStrap弹框

功能：不离开当前页面，显示单独内容，供用户操作

步骤：

1、引入bootstrap.css和bootstrap.js

2、准备弹框标签，确认结构

3、通过自定义属性，控制弹框的显示和隐藏

其中的bootstrap.css链接为：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

bootstrap链接为：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

以下是模板代码：

      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">...</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>

利用自定义属性控制弹框的显示和隐藏

data-bs-toggle="modal"

data-bs-target="#exampleModal"

示例的按钮：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal
</button>

如果使用js进行控制：

        //创建弹框对象const modal=new bootstrap.Modal('css选择器')//显示弹框modal.show()//隐藏弹框modal.hide()

1、渲染列表

自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查

其中的图书列表接口为：

http://ajax-api.itheima.net/api/books

首先基本的html与css代码为以下：

    <!-- 操作列 --><div class="head"><h1 class="title">图书管理</h1><button class="add_btn">添加</button></div>

    <!-- 图书管理列表 --><table><thead><tr><th>序号</th><th>书名</th><th>作者</th><th>出版社</th><th>操作</th></th></thead><tbody><!-- <tr><th>1</th><th>《java程序设计》</th><th>xxx</th><th>高等教育出版社</th><th><span class="del">删除</span><span class="edi">编辑</span></th></tr> --></tbody></table>

以下代码为使用BooyStrap的添加图书弹窗

    <!-- 添加图书弹窗 --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1 class="modal-title fs-5" id="exampleModalLabel">图书管理</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div>书名</div><input class="bookname" type="text" placeholder="请输入书籍名称"><div>作者</div><input class="author" type="text" placeholder="请输入作者名称"><div>出版社</div><input class="publisher" type="text" placeholder="请输入出版社名称"></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary">确定</button></div></div></div></div>

下面为添加图书的js部分：

        const tbody=document.querySelector('tbody')function getBook() {axios({url:'http://ajax-api.itheima.net/api/books'}).then(res => {console.log(res)tbody.innerHTML=res.data.data.map((item,index) =>`<tr><th>${index+1}</th><th>${item.bookname}</th><th>${item.author}</th><th>${item.publisher}</th><th class='${item.id}'><span class="del">删除</span><span class="edi">编辑</span></th></tr>`)})}getBook()// 添加图书操作//创建弹框对象const modal=new bootstrap.Modal('.modal')const add_btn=document.querySelector('.add_btn')        const bookDec=document.querySelectorAll('.modal-body input')//显示弹框        add_btn.addEventListener('click',() => {for(let i=0;i<bookDec.length;i++){bookDec[i].value=null}modal.show() })// 添加图书操作document.querySelector('.btn-primary').addEventListener('click',() =>{axios({url:'http://ajax-api.itheima.net/api/books',method:'post',data:{bookname: bookDec[0].value,author:bookDec[1].value,publisher:bookDec[2].value}}).then(res => {getBook()modal.hide()})})

2、删除数据

当点击删除按钮时，该行的数据将会被删除，并在页面中重新渲染

        // 删除操作document.querySelector('tbody').addEventListener('click',e => {if(e.target.className==='del'){console.log(e.target.parentNode.className);const id=e.target.parentNode.classNameaxios({url:`http://ajax-api.itheima.net/api/books/${id}`,method:'delete'}).then(res => {getBook()})}})

3、修改数据

修改数据部分包括了数据回显以及修改数据

当点击编辑按钮时，会弹出编辑图书弹框

      <!-- 编辑图书弹窗 --><div class="modal fade modal_edi" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1 class="modal-title fs-5" id="exampleModalLabel">图书管理</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body modal_body_edi"><div>书名</div><input class="bookname" type="text" placeholder="请输入书籍名称"><div>作者</div><input class="author" type="text" placeholder="请输入作者名称"><div>出版社</div><input class="publisher" type="text" placeholder="请输入出版社名称"></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary edi_btn">修改</button></div></div></div></div>

再修改数据后，点击修改按钮，将进行修改

       // 点击编辑，获取图书信息const modal_edi=new bootstrap.Modal('.modal_edi')const modal_body_edi=document.querySelectorAll('.modal_body_edi input')document.querySelector('tbody').addEventListener('click',e => {if(e.target.className==='edi'){modal_edi.show()console.log(e.target.parentNode.parentNode.children[0]);const id=e.target.parentNode.classNameaxios({url:`http://ajax-api.itheima.net/api/books/${id}`}).then(res => {console.log(res.data.data)modal_body_edi[0].value=res.data.data.booknamemodal_body_edi[1].value=res.data.data.authormodal_body_edi[2].value=res.data.data.publisher//点击修改按钮，对图书信息进行修改document.querySelector('.edi_btn').addEventListener('click',() => {axios({url:`http://ajax-api.itheima.net/api/books/${id}`,method:'put',data:{bookname:modal_body_edi[0].value,author:modal_body_edi[1].value,publisher:modal_body_edi[2].value}}).then(edi_res =>{getBook()})modal_edi.hide()})}).catch(err => console.log(err))}})

* 图片上传

1、获取图片文件对象

2、使用FormData携带图片文件

const fd=new FormData()
fd.append(参数名,值)

3、提交表单数据到服务器，使用图片url网址