Front-end framework pre-learning (2) ajax book management events

1.1 Bootstrap pop-up box

Content introduction:Bootstrap pop-up window

Function: Without leaving the current page, display separate content for user operation

step:

1.Introduce bootstrap.css and bootstrap.js

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>  

2. Preparepop-up label, confirm the structure

Set the model attribute in the data-bs-toggle of the button button to bind the pop-up window, and bind the class selector in data-bs0target.

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

  Click to display dynamic pop-up window

</button>

<!-- Modal -->

<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">Pop-up title</h1>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        Pop-up window content

      </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>

3.1 CommunicationSelf-determined attribute, restraint frameshowing和隐藏

Binding the data-bs-dismiss="modal" attribute to the pop-up window button can control the closing and display of the pop-up window.

3.2 Control the display and hiding of pop-up windows throughjs methods

Create popup object

const modelDom = document.querySelector(css selector)

const model = new bootstrap.Model(modelDom)

Show popup

model.show()

Hide pop-up window

model.hide()

Case: library management

step:

1. Rendering list (check)

2. Add new books (added)

3. Delete books (delete)

4. Edit books (modification)

Rendering Data: Core Steps

Get data---> Render data

Add new data (core steps)

Add book-form---->Collect data&Submit and save----->Refresh-book list

Delete data (core steps)

Bind the click event (get the book id)---->Call the delete interface------->Refresh the book list

Edit data (core steps)

Edit Book-Form------>Form (Data Echo)