【020】Student performance and educational administration management system based on Springboot+Vue (including teachers, students, and administrator identities) including source code, database, and running tutorials

Article Directory

1. Screenshot of running results

(See the end of the article for the detailed operation process, nanny level)

My operating environment: Jdk1.8 +VSCODE+Mysql+IntelliJ IDEA
Foreword:
This is a student performance management system with front-end and back-end separation. The front-end is developed with Vue, and the back-end is developed with SpringBoot + Mybatis. Compared with the two student management systems [006] and [010], this [020] project has student management, teacher management, course selection management, and performance management, etc., but the function of [020] is more concise and not too complicated. Suitable for general class setting.

Technology stack:
Vuex
Router
Axios
Element ui
sessionStorage
project introduction
Developed with vue 2.0, dynamic rendering of data is realized by calling the data interface provided by the backend. The default port number of the project is 8080
, which uses the monitor, thanks to the powerful dynamic SQL function of Mybatis, to achieve high-performance dynamic search function.
Use router to configure routing to achieve dynamic rendering of the navigation bar for different user types.
Use axios to load back-end data asynchronously.
Use element ui to implement The front-end verification function of the form
uses sessionStorage to realize login interception and realizes the
data paging function based on the front-end and back-
end respectively . Realize the query of the courses I opened and the information of the students who choose my courses. Log in to the student's grades. 3. The student realizes the function of selecting and withdrawing courses. Realize the function of grade query. Project introduction Using Restful style development, using CrossOrigin to solve cross-domain problems. Use annotations and xml files to configure SQL statements to realize the function of dynamic SQL and provide a complete data interface for the front end.

Since the vue project occupies the default Tomcat port of 8080, the specified project starts at port 10086, which can be configured with a YAML file and packaged with a Maven project.
System functions
Realize all data interfaces requested by front-end Ajex, and Get requests are developed in RESTful style.
insert image description here

The effect display of the operation interface of the student management system:

(1) Login interface (teachers, students, administrators)
insert image description here
(2) Teacher login interface

(3) Teachers create courses and offer information (including fuzzy search, precise search, setting course credits, etc.)

(4) Teacher performance management (according to credits , student name, course name, grade upper limit, lower limit, semester time and other information fuzzy search, precise search, etc.), edit information (5)
insert image description here

students perform fuzzy search for teachers or courses based on job number, teacher name, course name, and course number , Accurate search, and course selection

(6) My course selection, withdrawal (7) Students query their own results, student list, query students, edit students
insert image description here

(8) Administrator login interface
insert image description here
(9) Teacher addition, deletion, modification and query

insert image description here

(10) Addition, deletion, modification and query of grade management performance management
(11) Class schedule management

(11) Administrator adds, deletes, modifies and checks class schedule management and student grades

insert image description here

2. Source code acquisition method:

Source code, database, and experimental report acquisition:
Link: https://pan.baidu.com/s/1rzoNYhM5z2vPXv2JgjKneg
Extraction code: rl76
link failure can be added cynm-2233to obtain, the code word is not easy, please like it for support

3. Nanny level operation tutorial:

1. Vscode front-end running process:
1. Open VSCODE, file-open folder
insert image description here
2. Select open file to open the current directory

3. Create a new terminal:

4. npm i installation depends on

6. npm run serve starts the project

MYSQL database operation process (nanny level )
Log in to the database, open sqlyog, and after the connection is established, create the database. Database insert image description here
name: studentms, select utf8 for the base character set (if not, select utf8_bin for the database collation).

After creating the database, click Database – Import – Execute the SQL script,

insert image description here
Import successfully

IDEA back-end database connection tutorial (nanny level):
(Note: jdk1.8 is recommended)

Select the corresponding directory

Select import maven project from external model

The project is loaded and maven and databse appear on the right,
insert image description here
connect to the database on the right

and fill in the user Name, database password, database name

Display the database connection is successful

Remember to change the password of the application.yml configuration file to the password of your own database.
insert image description here
run successfully

After the above operations are configured, you can open

http://localhost:8080/#/login

run it