Business development Day2-01 - Introduction to this chapter
catalogue
Maintain data for this table of employees
Click the page presented after adding employees
Enter the address in the browser address bar: http://localhost:8080/backend/index.html , you can also enter the management interface without logging in, but the final effect we want to see is that if you don't log in, you can jump to the login interface. After logging in successfully, you can enter the management interface
Business development Day2-02 - improve login function_ Analyze problems and create filters
problem analysis
- Previously, we have completed the development of the employee login function of the background system, but there is still a problem: if users do not log in, they can directly access the home page of the system, and they can still access it normally.
- This design is unreasonable. The effect we want to see should be that we can access the page in the system only after successful login. If there is no login, we will jump to the login page.
- So, how should it be realized? The answer is to use the filter or interceptor to judge whether the user has completed login in the filter or interceptor. If not, jump to the login page.
code implementation
- Create a custom filter LoginCheckFilter
package com.itzq.reggie.filter;
import lombok.extern.slf4j.Slf4j;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "loginCheckFilter",urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//Strong rotation
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
log.info("Request intercepted:{}",request.getRequestURI());
filterChain.doFilter(request,response);
}
}
- Add the annotation @ ServletComponentScan on the startup class
package com.itzq.reggie;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
@Slf4j
@SpringBootApplication
@ServletComponentScan
public class ReggieApplication {
public static void main(String[] args) {
SpringApplication.run(ReggieApplication.class,args);
log.info("Project started successfully...");
}
}
- Improve the processing logic of the filter
Improve the filter content in the next chapter
test
Access on the browser: http://localhost:8080/backend/index.html , presentation of console
Business development Day2-03 - improve login function_ Code development
processing logic
- Get the URI of this request
- . judge whether this request needs to be processed
- If there is no need to deal with it, it will be released directly
- Judge the login status. If it has been logged in, it will be released directly
- If you are not logged in, the result of not logging in will be returned
Improve LoginCheckFilter filter code
package com.itzq.reggie.filter;
import com.alibaba.fastjson.JSON;
import com.itzq.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.AntPathMatcher;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "loginCheckFilter",urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
//Path matching
public static final AntPathMatcher PATH_MATCHER = new AntPathMatcher();
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//Strong rotation
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
//1. Get the URI of this request
String requestURI = request.getRequestURI();
//Define requests that do not need to be processed
String[] urls = new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**"
};
//2. Judge whether this request needs to be processed
boolean check = check(urls, requestURI);
//3. direct release if no processing is required
if (check) {
filterChain.doFilter(request,response);
return;
}
//4. Judge the login status. If it has been logged in, it will be released directly
if (request.getSession().getAttribute("employee") != null) {
filterChain.doFilter(request,response);
return;
}
//5. If you are not logged in, you will return the result of not logging in and respond to the data to the client page through the output stream
response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
return;
}
public boolean check(String[] urls, String requestURI){
for (String url : urls) {
boolean match = PATH_MATCHER.match(url, requestURI);
if (match) {
//matching
return true;
}
}
//Mismatch
return false;
}
}
Can be found in index Find the information under the red box on the HTML page
Request found Response interceptor in JS code
- If the code passed by the server is 0, msg=NOTLOGIN
- Then return to the login page
Business development Day2-04 - improve login function_ functional testing
Add log in LoginCheckFilter class
Function: convenient for observation
package com.itzq.reggie.filter;
import com.alibaba.fastjson.JSON;
import com.itzq.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.AntPathMatcher;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "loginCheckFilter",urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
//Path matching
public static final AntPathMatcher PATH_MATCHER = new AntPathMatcher();
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//Strong rotation
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
//1. Get the URI of this request
String requestURI = request.getRequestURI();
log.info("Intercepted requests:{}",requestURI);
//Define requests that do not need to be processed
String[] urls = new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**"
};
//2. Judge whether this request needs to be processed
boolean check = check(urls, requestURI);
//3. If it does not need to be handled, it will be released directly
if (check) {
log.info("This request:{}，No processing required",requestURI);
filterChain.doFilter(request,response);
return;
}
//4. Judge the login status. If it has been logged in, it will be released directly
if (request.getSession().getAttribute("employee") != null) {
log.info("User logged in, user id Are:{}",request.getSession().getAttribute("employee"));
filterChain.doFilter(request,response);
return;
}
//5. If you are not logged in, you will return the result of not logging in and respond to the data to the client page through the output stream
log.info("User not logged in");
response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
return;
}
public boolean check(String[] urls, String requestURI){
for (String url : urls) {
boolean match = PATH_MATCHER.match(url, requestURI);
if (match) {
//matching
return true;
}
}
//Mismatch
return false;
}
}
test
-
Start project
-
Enter in the address bar of the browser: http://localhost:8080/backend/index.html , you will find that you have jumped to the login interface
-
Console print log
-
Enter in the address bar of the browser: http://localhost:8080/backend/page/login/login.html , click login
-
Console print log
Business development Day2-05 - new employees_ Requirements analysis and data model
requirement analysis
-
Adding an employee is actually inserting the employee data entered on our new page into the employee table.
-
It should be noted that a unique constraint is added to the username field in the employee table, because username is the login account of the employee and must be unique
-
The default value of 1 has been set for the status field in the employee table, indicating that the status is normal.
Business development Day2-06 - new employees_ Sort out the program execution process
Before developing code, you need to sort out the execution process of the whole program:
- Send the data of the new employee to the page submitted by the server in the form of json
- The server Controller receives the data submitted by the page and calls the Service to save the data
- Service calls Mapper to operate the database and save the data
The front-end js code validate s the page
Business development Day2-07 - new employees_ Code development and functional testing
Code development and functional testing
Add the save method in the EmployeeController class to save the json data from the front end to the database
@PostMapping
public R<String> save(@RequestBody Employee employee){
log.info("Information of new employees:{}",employee.toString());
return R.success("Employee added successfully");
}
After starting the project, enter the employee information and click save
After saving, you can see the data printed on the console, indicating that you can receive the data transmitted from the front end to the server
Add business logic code in the save method to realize the operation of saving data into the database
@PostMapping
public R<String> save(HttpServletRequest request, @RequestBody Employee employee){
log.info("Information of new employees:{}",employee.toString());
//Setting the initial password requires md5 encryption
employee.setPassword(DigestUtils.md5DigestAsHex("123456".getBytes()));
employee.setCreateTime(LocalDateTime.now());
employee.setUpdateTime(LocalDateTime.now());
//Strong to long type
Long empID = (Long)request.getSession().getAttribute("employee");
employee.setCreateUser(empID);
employee.setUpdateUser(empID);
employeeService.save(employee);
return R.success("Employee added successfully");
}
Restart the project and view the contents in the employee table
Enter the information and click save
Check the database content in the employee table again and find that the employee information we added has been added
Add the same username again
There is an exception. As mentioned above, the index type of username (employee account) is unique, so the existing username in the database cannot be added
Business development Day2-08 - new employees_ Write global exception handler
Global exception handler
There is also a problem in the previous program, that is, when the account number we entered when adding an employee already exists, because the unique constraint is added to this field in the employee table, the program will throw an exception:
java.sql. SQLIntegrityConstraintViolationException: Duplicate entry 'zhangsan'for key 'idx_username
At this time, we need our program to catch exceptions. There are usually two processing methods:
- Add try and catch to the Controller method to catch exceptions
- Use exception handler for global exception capture (the second method is recommended)
Under the common package, create a GlobalExceptionHandler class and add an exceptionHandler method to catch exceptions and return results
package com.itzq.reggie.common;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.sql.SQLIntegrityConstraintViolationException;
/**
* Global exception handler
*/
@ControllerAdvice(annotations = {RestController.class, Controller.class})
@ResponseBody //Convert java objects to json format data
@Slf4j
public class GlobalExceptionHandler {
@ExceptionHandler(SQLIntegrityConstraintViolationException.class)
public R<String> exceptionHandler (SQLIntegrityConstraintViolationException exception){
log.error(exception.getMessage());
return R.error("failed");
}
}
Start the project and enter the username employee information that already exists in the database
The text in the pop-up box on the page indicates that the method has been successfully executed
Business development Day2-09 - new employees_ Improve and test the global exception handler
Improve and test the global exception handler
Improve the exceptionHandler method in the GlobalExceptionHandler class
package com.itzq.reggie.common;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.sql.SQLIntegrityConstraintViolationException;
/**
* Global exception handler
*/
@ControllerAdvice(annotations = {RestController.class, Controller.class})
@ResponseBody //Convert java objects to json format data
@Slf4j
public class GlobalExceptionHandler {
@ExceptionHandler(SQLIntegrityConstraintViolationException.class)
public R<String> exceptionHandler (SQLIntegrityConstraintViolationException exception){
log.error(exception.getMessage());
if (exception.getMessage().contains("Duplicate entry")){
String[] split = exception.getMessage().split(" ");
String msg = split[2] + "Already exists";
return R.error(msg);
}
return R.error("unknown error");
}
}
Restart the project and enter the existing username employee information in the database
The text in the pop-up box on the page indicates that the method has been successfully executed
Business development Day2-10 - new employees_ Section
summary
- Define the business requirements according to the product prototype
- Focus on the analysis of data flow process and data format
- Debug the trace program execution process through the debug breakpoint
Business development Day2-11 - paging query of employee information_ requirement analysis
requirement analysis
When there are many employees in the system, if they are all displayed on one page, it will appear messy and inconvenient to view. Therefore, the list data will be displayed in pagination in the general system.
Business development Day2-12 - paging query of employee information_ Sort out the program execution process
Program execution process
Before developing code, you need to sort out the execution process of the whole program:
- The page sends an ajax request and submits the paging query parameters (page, pageSize, name) to the server
- The server Controller receives the data submitted by the page and calls the Service to query the data
- Service calls Mapper to operate the database and query paging data
- The Controller responds the queried paging data to the page
- The page receives paging data and displays it on the page through the Table component of ElementUI
Business development Day2-13 - paging query of employee information_ Code development 1
Configure MP paging plug-in
package com.itzq.reggie.config;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* Configuring the paging plug-in for MP
*/
@Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor(){
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return mybatisPlusInterceptor;
}
}
Analyze front-end code
The return value carries records and total
Click employee management and the request sent from the front page
Enter the employee's name in the search box to the request sent by the front page
Related code
In the EmployeeController class, write the page method
@GetMapping("/page")
public R<Page> page(int page,int pageSize,int name){
log.info("page = {}, pageSize = {}, name = {}",page,pageSize,name);
return null;
}
Click employee management to the data output from the console
Add data in the search box and click search to the data output from the console
Business development Day2-14 - paging query of employee information_ Code development 2
Add function to code
Add code to the page method to realize the paging query function
@GetMapping("/page")
public R<Page> page(int page,int pageSize,String name){
log.info("page = {}, pageSize = {}, name = {}",page,pageSize,name);
//Construct paging constructor
Page pageInfo = new Page(page, pageSize);
//Construct conditional constructor
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
//Add filter condition
queryWrapper.like(StringUtils.isNotEmpty(name),Employee::getName,name);
//Add sort add
queryWrapper.orderByDesc(Employee::getUpdateTime);
//Execute query
employeeService.page(pageInfo,queryWrapper);
return R.success(pageInfo);
}
Business development Day2-15 - paging query of employee information_ functional testing
test
- Start project
- Login management interface http://localhost:8080/backend/page/login/login.html
- The following interface will be presented
Enter: Zhang in the search box
Because the amount of data is limited, the front-end code is modified to two pieces of data per page, a total of two pages
On the list HTML modify front-end code
Refreshed page
Business development Day2-16 - paging query of employee information_ Supplementary notes
explain
Why is the status data sent to the page by the backend of Integer type? When the page displays the effect, it is disabled or normal?
View the front-end list Logical code in HTML page
From the logic represented by the above front-end code, when status is 1, it means normal, and when status is 0, it means disabled
Business development Day2-17 - enable and disable employee accounts_ requirement analysis
requirement analysis
- On the employee management list page, you can enable or disable an employee account. Employees with disabled accounts cannot log in to the system. Employees with enabled accounts can log in normally.
- It should be noted that only the administrator (admin user) can enable and disable other ordinary users, so the enable and disable buttons will not be displayed after ordinary users log in to the system.
- The administrator admin can log in to the system to enable and disable all employee accounts.
- If an employee's account status is normal, the button is displayed as "disabled". If the employee's account status is disabled, the button is displayed as "enabled"
Day18-2 - enable employee development account_ Analyze the dynamic display effect of page buttons
analysis
How do you do this on the page? Only the administrator (admin) can see the enable and disable buttons?
- This button is invisible to non administrators
Take username from userInfo and assign it to user model data
Judge whether the value of user in the model data is equal to admin. If so, the button will be displayed
Business development Day2-19 - enable and disable employee accounts_ Analyze the sending process of page ajax request
analysis
Before developing code, you need to sort out the execution process of the whole program:
- The page sends an ajax request and submits the parameters (id, status) to the server
- The server Controller receives the data submitted by the page and calls the Service to update the data
- Service calls Mapper to operate database
Clicking the disable or enable button will call the following method, which will call the enable0rDisableEmployee method, which is encapsulated in a js file to send ajax requests
enable0rDisableEmployee method
Business development Day2-20 - enable and disable employee accounts_ Code development and functional testing
Code development and functional testing
Enabling and disabling an employee account is essentially an update operation, that is, an operation on the status field. An update method is created in the Controller. This method is a general method for modifying employee information
Add the update method in the EmployeeController class
@PutMapping
public R<String> update(@RequestBody Employee employee){
log.info(employee.toString());
return null;
}
Start the project and output log information on the console
Test successful
Improve the code logic of update method
@PutMapping
public R<String> update(HttpServletRequest request, @RequestBody Employee employee){
log.info(employee.toString());
Long empID = (Long)request.getSession().getAttribute("employee");
employee.setUpdateTime(LocalDateTime.now());
employee.setUpdateUser(empID);
employeeService.updateById(employee);
return R.success("Employee information modified successfully");
}
Restart the project and click disable employee information with account number zhangsi
Page tips
Check the information in the data table and find that the value of the status field has not changed
No error was reported during the test, but the function was not realized, and the data in the database did not change. Observe the SQL output from the console
The result of SQL execution is that the number of updated data rows is 0. Carefully observe the id value, which is different from the id value of the corresponding record in the database
Cause of the problem:
- That is, js loses accuracy when processing long data, resulting in the inconsistency between the submitted id and the id in the database.
How to solve this problem? - We can process the json data when the server responds to the page, and convert the long data into a String
Business development Day2-21 - enable and disable employee accounts_ Code repair configuration state converter
Configure state converter
Specific implementation steps:
- Provide object converter Jackson0bjectMapper to convert Java objects to json data based on Jackson (already provided in the materials, which can be directly copied to the project for use)
- Extend the message converter of Spring mvc in the WebMcConfig configuration class. In this message converter, the provided object converter is used to convert Java objects to json data
Configure the object mapper JacksonObjectMapper and inherit the ObjectMapper
package com.itzq.reggie.common;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalTimeSerializer;
import java.math.BigInteger;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import static com.fasterxml.jackson.databind.DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES;
/**
* Object mapper: convert Java objects to json or json to Java objects based on jackson
* The process of parsing JSON into Java objects is called [deserializing Java objects from JSON]
* The process of generating JSON from Java objects is called [serializing Java objects to JSON]
*/
public class JacksonObjectMapper extends ObjectMapper {
public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";
public JacksonObjectMapper() {
super();
//No exception is reported when an unknown attribute is received
this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);
//When deserializing, the property does not have compatible processing
this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
SimpleModule simpleModule = new SimpleModule()
.addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
.addSerializer(BigInteger.class, ToStringSerializer.instance)
.addSerializer(Long.class, ToStringSerializer.instance)
.addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));
//Register function modules. For example, you can add custom serializers and deserializers
this.registerModule(simpleModule);
}
}
Message converter extending mvc framework
/**
* Message converter extending mvc framework
* @param converters
*/
@Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
//Create message converter object
MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
//Set up the object converter, and the bottom layer uses jackson to convert java objects into json
messageConverter.setObjectMapper(new JacksonObjectMapper());
//Add the above message converter object to the converter set of mvc framework (if the index is set to 0, it means it is set in the first position to avoid being received by other converters, so as to fail to achieve the desired function)
converters.add(0,messageConverter);
}
Business development Day2-22 - enable and disable employee accounts_ Retest
test
Start the project and click disable Zhang Si
If the data of the status field in the database changes, it is successful
Business development Day2-23 - edit employee information_ Demand analysis and sorting out procedure execution process
requirement analysis
Click the Edit button on the employee management list page to jump to the edit page, echo the employee information and modify it on the edit page, and finally click the Save button to complete the editing operation
technological process
Before developing the code, you need to sort out the operation process and the execution process of the corresponding program:
- When you click the Edit button, the page jumps to add HTML and carry the parameter [employee id] in the url
- In add HTML page to get the parameter [employee id] in the url
- Send an ajax request to the server and submit the employee id parameter at the same time
- The server receives the request, queries the employee information according to the employee id, and responds the employee information to the page in json form
- The page receives the json data responded by the server and displays the employee information through VUE data binding
- Click the Save button, send an ajax request, and submit the employee information in the page to the server in json
- The server receives the employee information, processes it, and responds to the page after completion
- After receiving the response information from the server, the page will process it accordingly
Business development Day2-24 - edit employee information_ Page effect analysis and code development
Page analysis
Call the requestUrlParam method to get the value of id
Concrete implementation of requestUrlParam method
Take out the id value in the browser, and the front end calls the queryEmployeeById method to send an ajax request to the server to query all the information containing the id. if the code is 1, it means that the employee information contained in the id is queried in the database, otherwise it is null
Code development
Add the method getById in the EmployeeController class
@GetMapping("/{id}")
public R<Employee> getById(@PathVariable Long id){
log.info("according to id Query employee information...");
Employee employee = employeeService.getById(id);
if (employee != null){
return R.success(employee);
}
return R.error("The employee information was not queried");
}
Business development Day2-25 - edit employee information_ functional testing
test
Start the project, click the Edit button of any employee, press and hold f12, and observe the request sent by the browser
Page data echo succeeded
Simple treatment of gender (radio)
Because the display effect on the page is male and female, and the data transmitted by the server is 1 and 0, we need to simply process the data
