1.ElementUI
1.1 introduction to elementui
Link: ElementUI official website
1.2 ElementUI introduction case
1. Edit components
You can directly click ctrl+c/v in the component module
In elementui Paste ctrl+v directly in Vue component file
2. js file import
//1. Import components from JS file
import {
Container
} from 'element-ui'
//2. Realize the parameter transfer of parent and child components
Vue.use(Container)
3. In index Add routing mechanism to JS file
4. Start Vue and start app test
2. User login module
2.1 database user table design
2.2 user class correspondence of back-end pojo layer
2.3 user login business implementation process
Step 1: after entering the user name and password, click the login button
Step 2: prepare username/password data and send a request to the background server. Request type: post type
Step 3: the background server receives the user's request parameter username/password
Step 4: query the database according to the user name and password. The results show that the user name and password are correct
|No results, user name and password error
Step 5: the back-end server should return a business receipt to identify whether the business logic is executed correctly
Suppose: status 200 is correct and 201 indicates failure
Step 6: the front-end server prompts the user that the operation is successful / failed according to the user's 200 / 201
2.4 business interface documents
2.5 system return value SysResult object
Description of SysResult object: this object is used to realize the interaction between back-end and front-end business
Business execution error status=201
Concept: the level of front and rear end interaction is defined as VO layer
2.6 editing SysResult object
package com.jt.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.io.Serializable;
@AllArgsConstructor
@Data
@NoArgsConstructor
@Accessors(chain = true)
public class SysResult implements Serializable {
private Integer status;
private String msg;
private Object data;
//1. In case of failure, there are three types of parameter transmission!
public static SysResult fail(){
return new SysResult(201,"Failed to access service!",null);
}
public static SysResult fail(Object data){
return new SysResult(201,"Failed to access service!",data);
}
public static SysResult fail(String msg,Object data){
return new SysResult(201,msg,data);
}
//2. When successful, there are three types of parameter transmission!
public static SysResult success(){
return new SysResult(200,"Background server access succeeded!",null);
}
public static SysResult success(Object data){
return new SysResult(200,"Background server access succeeded!",data);
}
public static SysResult success(Object data,String msg){
return new SysResult(200,msg,data);
}
}
2.7 front end page analysis
2.7.1 url address analysis
2.7. 2 front end js analysis
2.7.3 token analysis
Note: front end server: when the user logs in, enter the user name and password for verification!!!
Send the data information to the back-end server for verification and query the database
Assumption: user name and password are correct!!! The page should jump to the home page of the system "/ home"
Question: can I directly enter "/ home" in the browser? Theoretically, it is not allowed to access this page!
Solution:
The back-end server returns a unique token data. As long as the front-end carries the token, it is considered that the user has logged in You can jump to the page
Permission Operation prototype!!!
Summary: token is used to identify that the user has logged in!!!
2.7.4 MD5 introduction
MD5 message digest algorithm (English: MD5 message digest algorithm), a widely used cryptographic hash function, can generate a 128 bit (16 byte) hash value to ensure the integrity and consistency of information transmission. MD5 was developed by American Cryptologist Ronald levist (Ronald Linn Rivest) was designed and published in 1992 to replace MD4 algorithm. The program of this algorithm was standardized in RFC 1321 standard. After 1996, the algorithm was proved to have weaknesses and can be cracked. For data requiring high security, experts generally recommend to use other algorithms, such as SHA-2. In 2004, it was proved that MD5 algorithm can not prevent collision Therefore, it is not suitable for security authentication, such as SSL public key authentication or digital signature.
Summary:
1.MD5 information summary algorithm
2. Generally, the data can be MD5 encrypted to generate "digital fingerprint"
3. At this stage, md5 encryption algorithm is applied to major websites
4. After MD5 encryption, in theory, it cannot be transformed from ciphertext to plaintext and cannot be decompiled
5. Limit the number of password entries!!! Lock the account 3-5 times!!!
2.7.5 UserController edit
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@CrossOrigin
@RequestMapping("/user/")
public class UserController {
@Autowired
private UserService userService;
// @GetMapping("/hello")
// public List<User> hello(){
//
// return userService.findAll();
// }
/**
* Business requirement: user login verification URL: /user/login
* Parameter: username / password JSON string
* Return value: String type information token of SysResult object data
*/
@PostMapping("login")
public SysResult login(@RequestBody User user)
{
String token=userService.login(user);
if(token==null)
return SysResult.fail();
//Returns the unique identifier of the front end for verification
return SysResult.success(token);
}
}
2.7.6 UserServiceImpl edit
package com.jt.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.RequestBody;
import java.util.List;
import java.util.UUID;
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAll() {
return userMapper.selectList(null);
}
/**
* Requirements:
* 1.Query database according to user name and password
* 2.Encrypt the password md5 encryption method
* 3.If the user name and password are correct, a token is returned
* 4.Unique string UUID
* @param user
* @return
*/
@Override
public String login(@RequestBody User user) {
//1. md5 encrypt the plaintext password (because the password stored in the database is an encrypted password, you need to query with an encrypted password)
String password=user.getPassword();
byte [] bytes=password.getBytes();
String md5pass=DigestUtils.md5DigestAsHex(bytes);
//2. Query the user object according to the password and name
user.setPassword(md5pass);
QueryWrapper<User> queryWrapper=new QueryWrapper<>(user);
User selectOne = userMapper.selectOne(queryWrapper);
//3. Judge the return value according to the existence of the queried user object
if(selectOne==null) return null;
//4. If the query is successful, you need to return a unique token identifier to the front end for verification
String token=UUID.randomUUID().toString().replace("-", "");
return token;
}
}