Springboot Diary--Delete form-delete

Additions and deletions, we have this article to explain how to delete the form, which is the function of the Delete button on our page.

The bottom may seem a bit messy, please carefully step by step to complete.

Delete function First step, button function realization1. Changes to HTML

Look, we initially, the Delete button is a button's label

<class= "btn btn-sm btn-danger"> Delete </button >

To let it implement the delete function, the first thing to be sure is that the deletion is a form record, that is, the user's form information. So, let's add a delete function for the form, and it's the delete request, referencing the previous put request:

<formth:action= "@{/emp/}+${emp.id}"Method= "POST"> 　　 <inputtype= "hidden"name= "_method"value= "Delete"/> 　　 <Buttontype="Submit" class= "btn btn-sm btn-danger">Delete</Button> 
</form>

As above, we will modify the deletion function on the HTML, and then a control method

2. The ability to remove users in Logincontroller add:

    // Delete Employee    @DeleteMapping ("/emp/{id}")    public String deleteemployee (@PathVariable ("id") of the Integer ID) {        employeedao.delete (ID);         return "Redirect:/emps";    }

3. The front and back of the code, we have written well, to see the effect: (Figure 1: Before the deletion. Figure 2: After deletion)

Do not feel a bit awkward, yes, the right button from the horizontal to vertical row, because we delete the form of the operation, is to add a form, so that it becomes too thick, each delete button is a form of the presentation, so we need to optimize it.

HTML optimization-add JS

Look directly at how we're going to optimize.

1. First, take the form form out of the button: (Figure 1, it's taken out.Figure 2, the original position)

Note that when we submit to delete the form, it is click the Delete button, you can take out the form will not take effect, how to do?

2. We use the JS notation here to implement this function:

　　2.1 Remember that the introduced styles are injected in the form of th:

　2.2 Let me show you the steps for code modification:

　　　　2.2.1 First, in order to delete this button in JS, we add a property value in class, I named: deletebtn

class= "btn btn-sm btn-dangerdeletebtn" > Delete </button>

Then write Js-jquery:

(Remember to elicit the webjars of jquery, ". xx" means to do the operation of this class, what operation? Click,click an event function that returns a Fasle to cancel the default behavior of this button. Now that the button's behavior is canceled, the type of the top button will be removed as well.

2.2.2 Second, JS does not know our th template of those path stitching, so we want to customize this: th:attr ("xxxx")

We'll do an operation on FOM here, plus an ID to identify the tag;

　　　　2.2.3 Finally, to see what this means: #引用id, and then invoke the custom action to implement an action, the value of the action is $ (this). attr ("Del_uri)". Submit (); "This button triggers this path splicing of the submission", is not such a Chinese-style English translation, see the code is relatively good understanding of it?

Then click Delete on the page and you're done.

Springboot Diary--Delete form-delete