about the author

insert image description here
"Author's Homepage" : Sprite Youbai Bubbles
"Personal Website" : Sprite's personal website
"Recommendation Column" :

★ Java one-stop service ★
★ React from entry to proficiency ★
★ Cool front-end code sharing ★
★ From 0 to hero, the road to Vue becoming a god ★
★ uniapp-from construction to promotion ★
★ From 0 to hero, Vue becoming a god Road ★
★ One column is enough to solve the algorithm ★
★ Let’s talk about the architecture from 0 ★
★ The exquisite way of data circulation ★
★ The road to advanced backend ★

Please add a picture description

Article directory

about the author
introduction
Environment installation and front-end and back-end startup
- Boot process
database design
Summarize

introduction

When we get the project requirements, sometimes we may feel confused, not knowing the overall process and what to do next. In order to be able to continuously practice and improve ourselves quickly , we need to find a set of development processes that suits us . In this way, we can carry out project development in an orderly manner, and discover and correct our own deficiencies in time .

Taking the most commonly used Java full-stack development as an example, this series uses MySQL database , SpringBoot, MybatisPlus, Redis, Spring security as the backend , and vue and WeChat applet technology stack combination as the frontend , and the steps are refined.

Environment installation and front-end and back-end startup

To complete the target project, we must first determine the appropriate technology stack combination, and then check whether the environment is installed correctly and completely

The first is the installation and configuration of the database

The commonly used ones are mysql and mongodb as well as the visualization tool HeidiSQL
insert image description here

The next step is the back-end and front-end environment installation

jdk
insert image description here
idea

maven

redis

node

vscode

Of course there are WeChat development tools

These tools can be installed by yourself, and if you have any problems, you can leave a message in the comment area to discuss

Boot process

// 前端（VsCode）
// 1. 下载安装 Node.js（18 版本）
// 2. 安装 Vue 脚手架
npm i -g @vue/cli
// 3. 安装前端依赖
npm i
// 4. 启动前端项目
npm run dev

// 后端（Idea） 
// 2. 配置 Maven、开启redis（否则系统无法启动）
// 3. 导入数据库，建议 MySQL8，若 5.7 版本需设置编码为 UTF-8，否则会提示密码错误
// 4. 等待后端依赖下载，完成后启动项目，或编译后执行 mvn spring-boot:run

database design

1. First we need to determine the project requirements

Take the most commonly used login system as an example. The simplest one is naturally a user. We use a database to store his account and password.

We customize a topic and design three user logins: administrator , teacher , and student .

We customize a topic and design three user login rules: an administrator may manage multiple teachers/students , and a teacher may teach multiple students

The above is defined as project requirements

2. We need to clarify the data flow

According to the title of the self-designed login system, let's imagine the data flow

Use Case Name: Admin Login

参与者：管理员
前置条件：管理员已注册账号
后置条件：管理员成功登录系统
基本流程：
管理员打开管理员端应用。
系统显示登录界面。
管理员输入用户名和密码。
点击登录按钮。
系统验证用户名和密码是否匹配。
如果验证通过，系统跳转至管理员主页面。
如果验证失败，系统提示用户名或密码错误。

Use Case Name: Admin Logout

参与者：管理员
前置条件：管理员已登录系统
后置条件：管理员成功注销账号
基本流程：
在管理员主页面，点击注销按钮。
系统弹出确认注销提示框。
点击确认注销按钮。
系统退出管理员账号，并跳转至登录页面。

Use Case Name: Teacher Registration

参与者：教师
前置条件：教师未注册账号
后置条件：教师成功注册账号
基本流程：
教师打开用户端应用。
系统显示注册页面。
教师输入工号和密码。
点击注册按钮。
系统验证工号是否已被注册。
如果工号未被注册，系统将教师信息存储至数据库。
如果工号已被注册，系统提示工号已被注册，请重新输入。

Use Case Name: Student Registration

参与者：学生
前置条件：学生未注册账号
后置条件：学生成功注册账号
基本流程：
学生打开用户端应用。
系统显示注册页面。
学生输入学号和密码。
点击注册按钮。
系统验证学号是否已被注册。
如果学号未被注册，系统将学生信息存储至数据库。
如果学号已被注册，系统提示学号已被注册，请重新输入。

3. Then we need to determine the data types and relationships that need to be stored

The data types and possibilities that need to be stored are as follows:

Administrator information:

username

password

Role Permissions

Teacher Information:

username

password

Job number

Basic information (name, gender, contact information, etc.)

student information:

username

password

student ID

Basic information (name, gender, contact information, etc.)

Admin to Faculty/Student Relationship:

One administrator may manage multiple teachers/students

Teacher-student relationship:

A teacher may teach multiple students

4. Draw ER diagram

   +--------------+       +--------------+       +--------------+
   |  Administrator |       |    Teacher   |       |    Student   |
   +--------------+       +--------------+       +--------------+
   | -username    |       | -username    |       | -username    |
   | -password    |       | -password    |       | -password    |
   | -role        |       | -employee_id |       | -student_id  |
   +--------------+       +--------------+       +--------------+
           |                    |                     |
           |                  have                  |
           |                  many                  |
           |                    |                     |
           |                  +-----------+          |
           +------------------|  Manages  |----------+
                              +-----------+
                              | -manager_id |
                              | -teacher_id |
                              | -student_id |
                              +-----------+
                                     |
                                     |
                               +-----------+
                               |  Teaches  |
                               +-----------+
                               | -teacher_id |
                               | -student_id |
                               +-----------+

This ER diagram is relatively simple, mainly the relationship between administrators, teachers, and students, which can be seen at a glance according to the ER diagram , then we will build a table according to the ER diagram

5. Design the database table structure

According to the provided ER diagram, the table structure of the design database is as follows:

表名：Administrator
字段名称：username，password，role
字段类型：VARCHAR，VARCHAR，VARCHAR
约束：无

表名：Teacher
字段名称：username，password，employee_id
字段类型：VARCHAR，VARCHAR，INT
约束：无

表名：Student
字段名称：username，password，student_id
字段类型：VARCHAR，VARCHAR，INT
约束：无

表名：Manages
字段名称：manager_id，teacher_id，student_id
字段类型：INT，INT，INT
约束：外键约束，其中manager_id参考Administrator表的username字段，teacher_id参考Teacher表的employee_id字段，student_id参考Student表的student_id字段

表名：Teaches
字段名称：teacher_id，student_id
字段类型：INT，INT
约束：外键约束，其中teacher_id参考Teacher表的employee_id字段，student_id参考Student表的student_id字段

Now that the structure has been determined, start to build the database

6. Building a database

CREATE DATABASE SchoolDB;

According to the above table structure design, you can create a database named "SchoolDB", and create the following tables in the database:

Table name: Administrator

field name	type	constraint
username	VARCHAR
password	VARCHAR
role	VARCHAR

Table name: Teacher

field name	type	constraint
username	VARCHAR
password	VARCHAR
employee_id	INT

Table name: Student

field name	type	constraint
username	VARCHAR
password	VARCHAR
student_id	INT

Table name: Manages

field name	type	constraint
manager_id	INT	The foreign key refers to the username field of the Administrator table
teacher_id	INT	The foreign key refers to the employee_id field of the Teacher table
student_id	INT	The foreign key refers to the student_id field of the Student table

Table name: Teaches

field name	type	constraint
teacher_id	INT	The foreign key refers to the employee_id field of the Teacher table
student_id	INT	The foreign key refers to the student_id field of the Student table

The "INT" type in the above table structure represents an integer type, and the "VARCHAR" type represents a variable-length string type. In the constraint part of the table structure, the foreign key constraint specifies that the field must refer to a specific field of another table, and ensures that the referenced field value exists in the referenced table.

7. Run sql statement

Tables and constraints can be created using the following SQL statements:

Create the Administrator table:

CREATE TABLE Administrator (
    username VARCHAR,
    password VARCHAR,
    role VARCHAR
);

Create the Teacher table:

CREATE TABLE Teacher (
    username VARCHAR,
    password VARCHAR,
    employee_id INT
);

Create the Student table:

CREATE TABLE Student (
    username VARCHAR,
    password VARCHAR,
    student_id INT
);

Create the Manages table:

CREATE TABLE Manages (
    manager_id INT,
    teacher_id INT,
    student_id INT,
    FOREIGN KEY (manager_id) REFERENCES Administrator(username),
    FOREIGN KEY (teacher_id) REFERENCES Teacher(employee_id),
    FOREIGN KEY (student_id) REFERENCES Student(student_id)
);

Create the Teaches table:

CREATE TABLE Teaches (
    teacher_id INT,
    student_id INT,
    FOREIGN KEY (teacher_id) REFERENCES Teacher(employee_id),
    FOREIGN KEY (student_id) REFERENCES Student(student_id)
);

In this way, the above tables can be created in the database named "SchoolDB" according to the given table structure.

8. Run sql to see if there is an error and how to modify it

Encountered two code errors during running with the above code

unspecified field type and length

Foreign key constraints In the Manages table, the referencing column and the referenced column are of incompatible type. manager_id is of type INT and the username column in the Administrator table is of type VARCHAR(255).

Then the complete code is as follows and runs correctly

CREATE DATABASE SchoolDB;
USE SchoolDB;

CREATE TABLE Administrator (
    username VARCHAR(255),
    password VARCHAR(255),
    role VARCHAR(255),
    PRIMARY KEY (username)
);
CREATE TABLE Teacher (
    username VARCHAR(255),
    password VARCHAR(255),
    employee_id INT,
    PRIMARY KEY (employee_id)
);
CREATE TABLE Student (
    username VARCHAR(255),
    password VARCHAR(255),
    student_id INT,
    PRIMARY KEY (student_id)
);
CREATE TABLE Manages (
    manager_id VARCHAR(255),
    teacher_id INT,
    student_id INT,
    FOREIGN KEY (manager_id) REFERENCES Administrator(username),
    FOREIGN KEY (teacher_id) REFERENCES Teacher(employee_id),
    FOREIGN KEY (student_id) REFERENCES Student(student_id)
);
CREATE TABLE Teaches (
    teacher_id INT,
    student_id INT,
    FOREIGN KEY (teacher_id) REFERENCES Teacher(employee_id),
    FOREIGN KEY (student_id) REFERENCES Student(student_id)
);

Run as shown in the figure:

insert image description here
Administrator
Student

Teacher

9. Verify database and table creation

Validation library:

DESCRIBE SchoolDB;

Verification form:

DESCRIBE Administrator;
DESCRIBE Teacher;
DESCRIBE Student;

Summarize

When we first got the project, first of all, we need to understand the business requirements and data flow in detail, clarify the input and output of data, and determine the data types and relationships that need to be stored . Then design the database, in which ER diagrams can be drawn for assistance, then after the database is built, we have completed the first job - database design and creation

Then, the back-end development will officially start

Full-stack development process - detailed practical demonstration of analysis and creation of data tables (1)