Graduation project SSM+Bootstrap4

Clear one of the session values or clear the entire session

1.session. removeAttribute("user");

This removes the name-value pair named username from the session.

Although the session object will disappear automatically after the client does not send a request to the server for a long time, but for repeated logins or real-time statistics of online users, the invalidate() method must be used to manually destroy the session.

2.session.invalidate();

session.invalidate() is to set the session to be invalid. It is generally used when logging out, but it should be noted that: when the session is invalid, the browser will immediately create a new session. Your first session has expired, so call The getAttribute method of a session will definitely throw NullPointerException

3.Use removeAttribute to traverse and delete the value of session

Hide the element, the difference between display:none and visibility: hidden

Both can hide an element on a web page.

1. visibility: hidden

The element is hidden, but the position it should occupy in the web page is still occupied.

2. display: none

Set the display of the element to None, that is, it does not occupy any position in the web page.

How to use:
<div style="display: none"></div>

Note:

In bootstrap, visibility: hidden can’t be used, you need to add invisible to the class, the shape is as follows:

<div class="invisible" >...</div>
<div class="visible" >...</div>

Elements with disabled attributes cannot be submitted (form)

What do data-toggle, data-target, etc. mean

data-toggle refers to what event is triggered, commonly used such as collapse, modal, popover, tooltips, etc.;
data-target refers to the target of the event, used together means that the element pointed to by data-target is displayed in the form specified by data-toggle.
data-dismiss is a custom attribute in bootstrap. If you give an element data-dimiss attribute, you can click on the element to make the target disappear
data-*: The parameter name of the data to be passed, * can be written casually, such as data-id, data-name, data-whatever
Bootstrap: pass parameters to Modal

Related methods of class in element

1. Determine whether an element contains a specific class

//div is an element
div.classList.contains('class name'); //return true or false

Other methods: (using jquery)

//Use the method of is('.classname')
$('div').is('.redColor')

//Use hasClass('classname') method (note that the lower version of jquery may be hasClass('.classname'))
$('div').hasClass('redColor')

Explanation:

2. The method of adding a class and the method of removing a class

Native js methods

//The element id is div
1. Add a class to the element:
document.getElementById("div").classList.add("class name");
2. Add multiple classes to the element:
document.getElementById("div").classList.add("Class Name 1", "Class Name 2", "Class Name 3",...);
3. Remove a class for the element:
document.getElementById("div").classList.remove("class name");
4. Remove multiple classes for the element:
document.getElementById("div").classList.remove("Class Name 1", "Class Name 2", "Class Name 3",...);

jquery method

//The element id is div
1. Add a class to the element:
$("#div").addClass("Class name");
2. Add multiple classes to the element:
//Only need to separate the class value with a space to add multiple classes at once
$("#div").addClass("Class name 1 Class name 2 Class name 3");
3. Remove a class for the element:
$("#div").removeClass("Class name");
4. Remove multiple classes for the element:
//Only need to separate class values with spaces to clear multiple classes at once;
// Note: If no parameters are specified, this method will remove all classes from the selected elements.
$("#div").removeClass("Class name 1 Class name 2 Class name 3");

3. Switching classes: special methods for adding and deleting classes

Native js method:

//The element id is div
If the specified class exists, it will be deleted (return false), if the class does not exist, it will be added (return true).
document.getElementById("div").classList.toggle("class name");

jquery method

$(selector).toggleClass(class,switch)
class Required Specifies adding or removing specified elements of class.
switch Optional Boolean value. Specifies whether to add or remove classes forcibly.

1. Switch a category
$("#div").toggleClass("Class name 1");
2. Switch multiple types
$("#div").toggleClass("Class name 1 Class name 2 Class name 3");
3.
$("#div").toggleClass("Class name 1","true");//Add class name 1
$("#div").toggleClass("Class name 1","false");//Delete class name 1

4. Get the class name of the specified class

Native js method:

//The element id is div
The parameter is the index value, and returns the class name corresponding to the index value in the element. Index values start at 0.
Returns null if the index value is outside the range
document.getElementById("div").classList.item(index);

5. Replacement class

Native js method:

//The element id is div
The new class newClass replaces the old class class
document.getElementById("div").classList.replace("class","newClass");

Listen to form submission events

1. Add the onsubmit method to the form

Note: The code is onsubmit="return method name ()", not onsubmit="method name", and return must be added before the method name, otherwise the submission cannot be prevented.

2. Use the addListener method, as shown in the figure below

How to center the button

1. Use the

<center>
<button type="submit" >Login</button>
</center>

<div align="center">
<button type="submit" >Login</button>
</div>

 <div style="text-align:center">
 <button>button</button>
 </div>

<div>
<button style="display:block;margin:0 auto">button</button>
</div>