1. User login interface
Implementation idea: The user enters the user name and password on the interface and passes in variables. Use the post method to transmit it to the backend, and the backend receives the entire entity object. Extract the username. Query through the select annotation in the dao layer method to return the data object corresponding to the database. Return false if it is empty. If it is not empty, compare the password returned by the database with the password entered by the user. If they match, return true, otherwise return false. In the front-end axios framework, judge through the if statement. If true is returned, the login success message will be prompted and jump to the home page. If return false, it will prompt that the login failed, please try again.
Effect:
Improvement ideas:
Already implemented:
Use cookies to remember the user’s login status. 1. Display the words “Welcome xxx to log in!!” at the top of the home page. xxx must change dynamically according to the user name. 2. Personal center status distinction, the logged-in status displays “Personal Center” in the upper right corner, and the personal center drop-down displays “Logout”;If not logged in, “Login” is displayed. No personal center. 3. Implement the function of logging out. 4. Set up a page (shopping cart) with permissions. If you are not logged in, the pop-up window above the page will display “Insufficient permissions, please log in”. If you are logged in, you can browse the page content normally. 5. Encrypt the logged-in username and password, and decrypt and match them on the receiving end.
1.1 initial version
Step 1: Write the following code for the dao layer:
@Select("select * from tb_user where username=#{username}" ) public User login(String username);
Step 2: Write the following code in the controller layer:
@RestController @RequestMapping("/api/") public class DataController { @PostMapping("login") public boolean loginmodule(@RequestBody User user){ System.out.println(user.getUsername()); System.out.println(user.getPassword()); User u = bookDao.login(user.getUsername()); if(u==null) return false; System.out.println(u.getPassword()); if(user.getPassword().equals(u.getPassword())) return true; else return false; } }
Step 3: Write the request code:
methods: { login() { axios.post("/api/login",this.form).then((response)=>{ if(response.data==true) { confirm('Login successful!'); window.location.href="home.html"; } else alert('Username or password is incorrect, please try again!'); }) }, }
Step 4: Write the login interface and define variables:
login interface:
<!--Login interface--> <h1 style="margin-left:125px;color: #333333">Login</h1> <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px"> <el-form-item label="username"> <el-input v-model="form.username" style="width: 200px;"></el-input> </el-form-item> <el-form-item label="password"> <el-input v-model="form.password" style="width: 200px;"></el-input> </el-form-item> <div style="margin-left: 200px;margin-bottom: 15px"><el-link type="primary" @click="register" >Click to register</el-link></ div> <el-form-item> <el-button type="primary" @click="login">Login</el-button> <el-button>Cancel</el-button> </el-form-item> </el-form>
Define variables:
data() { return { form: { username: '', password: '' } } }
1.2 improved version
Technical difficulty 1: How to define cookies
document.cookie = `loginStatus=true,username=${this.form.username}`; This sentence defines 2 cookies. Note that it is best to separate different cookies with commas. The two sides to the left of the equal sign are keys and values respectively. The purpose of key-value pairs is to facilitate cutting.
methods: { login() { axios.post("/api/login",this.form).then((response)=>{ if(response.data==true) { confirm('Login successful!'); document.cookie = `loginStatus=true,username=${this.form.username}`; window.location.href="home.html"; } else alert('Username or password is incorrect, please try again!'); }) },
– – – – – – Knowledge Gas Station – – – – – –
1. ${} is the template string syntax in JavaScript. It allows inserting dynamic expressions or variables into strings. It will eventually be parsed into a specific value.
2. In JavaScript, the document object provides a cookie attribute for accessing and manipulating cookies in the browser.
3. Cookies are small text files that are stored on the user’s computer and are used to store and transfer data between the browser and the server. It can be used to store session information, user preferences, shopping cart data, etc. between different requests from the user.
– – – – – – – – – – – – – – – – –
Technical difficulty 2: How to extract the target data in the cookie and display it in real time
After defining the cookie above, you can directly obtain the cookie through document.cookie. However, the cookie at this time still exists in the form of a string, so appropriate segmentation is required:
function getCookie(username){ const cookies = document.cookie.split(",") for(let i=0;i<cookies.length;i + + ){ const cookie = cookies[i].split('='); if(cookie[0]==username) return cookie[1]; } return ""; }
Cookies are loginStatus=true and username=${this.form.username}. The cookie is loginStatus, true, username, ${this.form.username}.
By matching whether cookie[0] is the username key, the value of username can be returned for the front end to display the welcome xxx in real time.
Technical difficulty 3: How to display different page styles depending on whether you are logged in or not
document.addEventListener("DOMContentLoaded", function() { // Display the welcome message and login status at the top of the homepage const loginStatus = getCookie("loginStatus"); //Get the value of loginStatus and assign it to loginStatus, which is true or false const welcomeMessage = document.getElementById("welcome-message"); const loginStatusText = document.getElementById("login-status"); if (loginStatus === "true") {// Login status const username = getCookie("username"); // Assume the username is stored in a cookie named "username" console.info(username); welcomeMessage.textContent = "Welcome " + username + "Log in!!"; } else {//Not logged in status welcomeMessage.textContent = ""; loginStatusText.textContent = "Login"; } });
The codes for technical difficulties 2 and 3 need to be used in conjunction with the navigation bar code to ensure the consistency of each page. Therefore, the above two pieces of code can be encapsulated into a cookie.js, and then added to the front end when needed. The following code is enough:
<script src="cookie.js"></script>
– – – – – – Knowledge Gas Station – – – – – –
1. This code is used to introduce the navigation.js file into the page, which contains the code for the navigation bar and login interface.
2.
This code creates an empty
3. This code uses JavaScript to obtain the div element with the id of navigation, and inserts the navigation code of the navigation bar into this div element. middle. This will dynamically display the navigation bar code on the page.
4. The
– – – – – – – – – – – – – – – – –
Technical difficulty 4: How to encapsulate front-end repetitive code
Each page on the front end has a navigation bar. The code for each navigation bar is as long as the following. If it is filled in for every page, it will look extremely bloated.
So we chose to encapsulate the code into a navigation.js file,
const navigationCode = ` <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item><a href="ADSS.html" style="font-size: large;text-decoration: none;">Data query</a></el-menu-item > <el-menu-item><a href="home.html" style="font-size: large;text-decoration: none;">Home</a></el-menu-item> <el-menu-item><a href="login.html" style="font-size: large;text-decoration: none;"><h id="login-status">< /h></a></el-menu-item> <el-submenu index="2" style=" position: absolute;right: 135px;" > <template slot="title">Personal Center</template> <el-menu-item @click="clear" >Log out</el-menu-item> </el-submenu> <h5 id="welcome-message" style="color: #edf2fc;display: flex;justify-content: flex-end;"></h5> </el-menu>`
See Knowledge Station above:
<!--Navigation bar--> <script src="navigation.js"></script> <div id="navigation"></div> <script>document.getElementById("navigation").innerHTML = navigationCode;</script>
2. User registration interface
Implementation idea: The user enters the username and password, and uses the post method to send it back to the backend. The backend compares the data according to the username to see whether it is already in the database (select). If it is already there, it will directly prompt to log in and jump to the login interface. If not, it will The data is inserted into the database, and then it prompts that the registration is successful and jumps to the login interface.
Realization effect:
Improvement ideas: 1. Add verification code mechanism. 2. Whether you have registered or not can be displayed in real time next to it.
Step 1: Write the following code for the dao layer:
@Insert("Insert into tb_user(username,password) " + "values(#{username},#{password})") public void register(User user);
@Select("select * from tb_user where username=#{username}" ) public User login(String username);
Step 2: Write the following code in the controller layer to determine the logic: check whether there is a corresponding entity object in the database through the username entered by the user. If there is a description, it has been registered. If not, insert the data into the database.
@RestController @RequestMapping("/api/") public class DataController { @PostMapping("register") public boolean registermodule(@RequestBody User user) { User compare = bookDao.login(user.getUsername()); //Return the corresponding entity object in the database according to the user name entered by the user if(compare!=null) return false; bookDao.register(user); return true; } }
Step 3: Write the registration interface and define variables:
The registration interface is as follows:
<!--Registration interface--> <h1 style="margin-left:100px;color: #333333">Register an account</h1> <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px"> <el-form-item label="username"> <el-input v-model="form.username" style="width: 200px;"></el-input> </el-form-item> <el-form-item label="password"> <el-input v-model="form.password" style="width: 200px;"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">Register</el-button> <el-button href="register.html">Cancel</el-button> </el-form-item> </el-form>
The variables that receive data are as follows:
data() { return { form: { username: '', password: '' },
Step 4: Write the request code:
onSubmit() { axios.post("/api/register",this.form).then((response)=>{ if(response.data==false) alert("Registration failed, username already exists!"); else { confirm("Registration successful, you will be redirected to the login interface") window.location.href="login.html"; } }) }
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Cloud native entry-level skills treeHomepageOverview 15903 people are learning the system