St. Regis takeaway items

1. Development environment construction

(1) Start Navicat

Start Navicat, create a mysql connection

(2) Database design

Database design: conceptual design (ER diagram), logical design, physical design

1. Concept design

Conceptual design is the core link of database design. Through the synthesis, induction and abstraction of user requirements, a conceptual model independent of the specific DBMS is formed.
(1) Clear modeling goals (model coverage)
(2) Define entity sets (identify and define entity sets from the bottom up)
(3) Define connections (relationships between entities)
(4) Establish information models (construct ER models)
(5) Determine entity set attributes (attributes describe the characteristics or properties of an entity set)
(6) Integrate and optimize information models (check and eliminate naming inconsistencies, structure inconsistencies, etc.)
● Conceptual design is currently the most widely used ER model model method. Abstract the real world into entities and connections with attributes. In 1976, Peter.Chen proposed the E-R model (Entity-Relationship Model), that is, the entity-relationship model, and used the E-R diagram to describe the conceptual model of the database.
● Perspective: The world is made up of a set of basic objects called entities and the connections between these objects.
● There are three types of connections between entities: one-to-one connection (1:1), one-to-many connection (1:n), and many-to-many connection (m:n). The

mind map is visually presented

(3) Create a database

Create the database required by the project - reggie, the character set uses utf8mb4

to open the Reggie database

(4) Import database script

(5) View the tables in the database

Two, Maven project construction

(1) Create a Maven project

Click the [Finish] button

(2) Check and check the project code, maven warehouse configuration and jdk configuration

Configure Maven environment variables

Check whether the maven environment variables are configured successfully
Add the Ali image source to the maven configuration file

Check the configuration of the maven warehouse in IntelliJ IDEA

Check the jdk configuration

(3) Add project-related dependencies and plug-ins

Add relevant dependencies and build plugins in the pom.xml file

(4) Create an application properties file

Create an application properties file in the resources directory - application.yml

(5) Install the lombok plugin

Find plugins in the settings dialog box, search for lombok, and click the green Install button

(6) Create the main class to start

Create the net.pyy package, and then create the ReggieTakeOutApplication class in the package

Run the program to see the effect

● Explanation: If the startup project fails and it is found that port 8080 is occupied, how to deal with it?
● Use the netstat command to check which process occupies port 8080, and it is found that PID = 4320

(7) Copy static resources and template pages

Find the backend and frontend directories in the front-end resources
and copy these two directories to the resources directory

Test whether you can access the template page - the home page of the backend - index.html

Start the application, and visit http://localhost:8080/backend/index.html in the browser

(8) Create an MVC configuration class for static resource mapping

Create a config subpackage and create WebMvcConfigclasses in the package

Inherit the WebMvcConfigurationSupport class

to add methods to do static resource mapping

In the method, add two resource mappings: static resources mapped to the front end and back end

Test whether you can access the home page of the back end - /backend/index.html

Test whether you can access the image resources of the front end - /frontend/images/demo1.png

2. Background login function development

(1) Page prototype display

Click on the login.html page

The Vue object binds the div element whose id attribute is login-app through the el attribute.

The Vue object binds the JSON data loginForm through the data() method, and binds the validation rules loginRules through computed.

The asynchronous method handleLogin that the Vue object processes the login form data through methods binding

(2) Login page display

Page location: project/resources/backend/page/login/login.html

(3) View login request information

Press F12 to enter the browser's debug mode

(4) Data model - employee table

2-1. Code development

Create entity subpackage

Create employee entity class in net.pyy.entity package - Employee

(2) Create an employee mapper interface

Create a mapper subpackage

Create employee mapper interface - EmployeeMapper in net.pyy.mapper package

(3) Create employee services

1. Create an employee service interface

Create a service subpackage

2. Create an employee service interface implementation class

Create the impl subpackage in the net.pyy.service package

(4) Create a return result class

● The return results of all processing methods on the server side are encapsulated in this general class
● Create a common subpackage

(5) Create an employee controller

Create a controller subpackage

Create an employee controller class in the net.pyy.controller package - EmployeeController

Encrypt the password password submitted on the page with MD5.


If no query is found, the login failure result will be returned.

Password comparison, if inconsistent, the login failure result will be returned

Check the status of the employee, if it is disabled, return the result that the employee is disabled

If the login is successful, store the employee id in the Session and return the successful login result

Three-1, functional test

Set the timeout to 1000000 milliseconds in the resources/backend/js/request.js file, which is convenient for later breakpoint debugging

(2) Set breakpoints

Set a breakpoint in EmployeeController

(3) Start the application in debug mode

(4) Test Login - [Successful]

Browser access http://localhost:8080/backend/page/login/login.html

Press F12 key to open the developer tools

Use the current correct user login information (admin: 123456) to log in, click the [Login] button

just now The timeout is set to 1000000 milliseconds, but the error message of system interface request timeout still appears. This is caused by the browser cache not being cleared. We have to clear the browser cache data first.

Four-1, hash encryption

(1) Basics of encryption and decryption

(2) Implement MD5, SHA256, SHA512, SHA1 and SHA224 encryption in Java

(1) Page prototype display

1. Using md5 encryption algorithm

(1) Using the DigestUtils class

Create the Encrypt class in the net.pyy.common package

Run the program to view the results

(2) Using the MessageDigest class

Create the EncryptMD5 class in the net.pyy.common package

and run the program to view the results

2. Using sha256 encryption algorithm

Create the EncryptSHA256 class in the net.pyy.common package

Run the program to see the result

3. Using sha512 encryption algorithm

Create the EncryptSHA512 class in the net.pyy.common package

and run the program to view the results

4. Use sha1 encryption algorithm

Create the EncryptSHA1 class in the net.pyy.common package

Run the program to see the result

5. Using sha224 encryption algorithm

Create the EncryptSHA224 class in the net.pyy.common package

and run the program to view the results

5. Background exit function development

1. Demand Analysis

After the employee logs in successfully, the page jumps to the home page of the background system, and the name of the currently logged-in user will be displayed at this time:

If the employee needs to log out of the system, he can directly click the button on the right side of the login user name to log out of the system. After logging out of the system, the page will jump back to the login page

2. Code development

(1) Code Analysis

The click event processing function logout() bound to the exit button

is viewed in the script file /backend/api/login.js for the logoutApi() function

(2) Write code

Open the employee controller EmployeeController

and create a logout() method to clear the employee information in the session and return a successful result

package net.py.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import lombok.extern.slf4j.Slf4j;
import net.py.common.R;
import net.py.entity.Employee;
import net.py.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

/**
 * 功能：雇员控制器类
 * 作者：py
 * 日期：2022年11月03日
 */
@Slf4j // 日志注解
@RestController // 交给Spring容器管理
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @PostMapping("/login")
    public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee) {
        // 1. 将页面提交的密码password进行md5加密处理
        String password = employee.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());

        // 2. 根据页面提交的用户名username查询数据库
        LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>(); // 查询包装器
        queryWrapper.eq(Employee::getUsername, employee.getUsername()); // 等值查询
        Employee emp = employeeService.getOne(queryWrapper); // 按查询包装器进行查询

        // 3. 如果没有查询到则返回登录失败结果
        if (emp == null) {
            return R.error("登录失败[用户名错误]");
        }

        // 4. 密码比对，如果不一致则返回登录失败结果
        if (! emp.getPassword().equals(password)) {
            return R.error("登录失败[密码错误]");
        }

        // 5. 查看员工状态，如果为已禁用状态，则返回员工已禁用结果
        if (emp.getStatus() == 0) {
            return R.error("登录失败[账号已禁用]");
        }

        // 6. 登录成功，将员工id存入Session并返回登录成功结果
        HttpSession session = request.getSession(); // 通过请求对象获取会话
        session.setAttribute("employee", emp.getId()); // 将雇员id保存到会话里
        return R.success(emp); // 返回登录成功结果
    }

    @PostMapping("/logout")
    public R<String> logout(HttpServletRequest request) {
        // 清除雇员信息
        request.getSession().removeAttribute("employee");
        // 返回成功结果
        return R.success("退出成功");
    }
}