(Online teaching platform based on Vue.js) Source code + database table Vue.js+Node.js+MySQL source code free sharing

1. Preface

It’s been almost a year since I graduated, and I’ve been working for about a year and a half. Now is the graduation season, so instead of sitting in ashes, I thought it would be better to share the graduation project I wrote last year with everyone so that everyone can use it as a reference. After all, the community upholds the principle of sharing happiness ~ Of course, this project is actually very simple (please don’t forget it, big guys) (Squirt), the technology is also simple, the most basic vue2, express in the most basic node, the most basic mysql addition, deletion, modification and query, because I thought about it at the time, so I don’t think it is necessary to write too complicated haha, I was also an intern at the time Do it occasionally after work. Although it is simple, luckily I passed the defense last year (of course the score will not be too high haha). .
Now share the source code with everyone, pick it up from the gitee warehouse~ https://gitee.com/aurora-in-winter/vuejiaoxueClick here to jump

2. Demand analysis

Based on the Vue.js online teaching platform, it consists of the following modules:
(1) Student module:
students register and log in to the platform, and display relevant information on the platform, including the homepage, all course pages, selected course pages, course ranking pages, and blog article pages , chat room page, personal center page and other homepages, as well as sub-pages such as course details page, blog post details page, query page, student exam page and so on.
(2) Teacher module:
Teachers register and log in to the platform, and display relevant information on the platform, including homepages such as course and video publishing pages, blog publishing pages, chat room pages, personal center pages, as well as class video upload pages, question bank management pages, Sub-pages such as course selection student page, courseware management page, blog details page, etc.
(3) Administrator module:
The administrator logs in to the platform and displays relevant information on the platform, including four homepage modules: user management page, course review page, class review page, and blog review page. User management includes student role page and teacher Character page.

Demand analysis:
The online teaching platform based on Vue.js is divided into student terminal, teacher terminal and administrator terminal, all of which will be displayed in the form of PC web pages. All three ends have login pages and registration pages. The student terminal is divided into seven homepage modules: homepage, all courses, selected courses, course rankings, blog posts, chat rooms, and personal center. It also includes several sub-pages, such as course details page, blog post details page, query page, Student exam page etc. The teacher's end is divided into four homepage modules: publishing courses and videos, publishing blogs, chat rooms, and personal centers. It also includes several sub-pages, such as class video upload page, question bank management page, course selection student page, courseware management page, and blog posts. Details page, etc. The administrator side includes four homepage modules: user management, course review, class review, and blog post review. User management includes student role page and teacher role page.
The login page will implement user login functions, including account and password input, role identity selection, and input graphic verification code verification operations. It should also include token authorization and reset input content buttons.
The registration page implements the user registration function, and only student and teacher users can be registered. At the same time, the user will upload an avatar and enter username, password, name, signature, role, gender and other information. At the same time, you must verify your email address when registering, and send a verification code to the email address filled in by the user. Only after the verification code passes can you register. Form verification is also required for the length of some fields. They must not be too long or too short, or illegal data must be entered. A reset input button should also be included.
The home page of the student terminal first contains a carousel image to display the course pictures. It also includes recommendations for new and good courses and must-learn courses. New and good courses are the latest courses released by a certain teacher among the 4 recommended courses. Must-learn when entering the station recommends 4 courses that are studied most frequently by students. At the same time, the course information includes course name, release time, course display picture information, and a hyperlink or jump button to jump to the course details page. An input box is set up on the header of the page, and users can query courses through fuzzy input.
All course pages on the student side include a course search function. Search with selection as search criteria. The conditions include course difficulty selection (all, easy, normal, difficult) and course category selection (all, front-end field, back-end field, big data field, other). At the same time, there is a paging switching query function when there is a lot of data.
The selected courses page on the student side includes the function of viewing the courses currently selected by students. The course list should display some basic information about the course. At the same time, there should be buttons to cancel the course and go to the course details page.
The student-side course ranking page mainly displays Echarts chart data, displaying the four courses with the highest student ratings and the four courses with the largest number of students in the form of a bar chart.
The student-side blog article page displays a list of blog articles, including fields such as blog title, introduction, and publishing teacher. It also includes a button to jump to the blog post details page. When there is a large amount of data, there is a paging switching query function.
The student-side chat room page and the teacher-side chat room page are shared to realize the instant chat function between all students and teachers. Specific functions include displaying chat room content and current online members. Users can enter content through the input text field and select emoticons to send. The sent chat content is displayed in the content area, including displaying all user avatars, user screen names, and input content. When a user leaves or enters the chat room, there will be an announcement text prompt function. Online members include the function of displaying the current number of people online and specific online user information.
The personal center page on the student side shares the same page with the personal center page on the teacher side, displaying the user's basic information fields and including the function of modifying personal information.
The course details page on the student side is a function to display course details. There are buttons to add course learning and going to exam functions and a voice broadcasting course information function. It displays the basic fields of the course and also contains four sub-modules. The first one is the course learning module, where students can play videos of different classes, have the function of switching class videos, and have the function of saving and watching class videos. The second module is the course review module, where students can review and rate the course. The third module is the courseware download module, students can choose to download course courseware. The fourth module is the brainstorming module, where students can choose to answer brainstorming questions.
The student-side blog post details page displays the detailed content of a certain blog post.
The query page on the student side displays the course results of fuzzy search after entering the content.
The student-side exam page implements exam functions, including answers to multiple-choice and true-false questions, a timing function, and a function to display immediate exam results after submitting the answer content.
The course and video publishing page on the teacher side includes the functions of displaying the list of added courses and adding new courses. At the same time, it includes function buttons such as viewing course selection students, question bank management, adding class hours, modifying information, deleting courses, etc. Adding a new course is the function of adding a new course and editing basic information such as course display pictures and titles. At the same time, added courses can be modified and deleted. Secondly, it contains the following functional sub-pages: View course selection students page displays a list of students who have selected the course, displays basic student information, test scores, experience values, etc., and can export Excel files. The question bank management page includes the functions of adding questions and deleting questions. There are two new question types: multiple-choice questions and true-false questions. The add class page has the functions of adding class video, modifying class video, and deleting class video. The class also has basic information such as title. Newly added courses can be released only after they are approved by the administrator.
The blog page for publishing blog posts on the teacher side includes the functions of adding, modifying, and deleting blog posts. Adding a new blog post includes editing information such as title, body content, etc. The body content is in Markdown format, and images, hyperlinks, titles, etc. can be edited. Newly added blogs must be approved by the administrator before they can be published.
The administrator user management page includes two modules, one of which is the student user management module and the other is the teacher user management module. They all include functional operations to modify student or teacher information and delete users. The course review page includes the function of displaying the list of courses submitted by teachers, and also has the filtering conditions of reviewed, pending review, and failed review. The course will be reviewed and reviewed to determine whether it has passed or failed. At the same time, there is a paging switching query function when there is a lot of data. The class review page is similar to the course review page, but instead has the function of viewing and reviewing class videos. The blog review page is similar to the course review page, but it is changed to the viewing and review function of blog posts.

3. Use case diagrams and sequence diagrams

Use Case Diagram:



Sequence Diagram

Database Table:

Summary of database tables
: This platform has designed fourteen tables according to the needs under the third paradigm, including the student table to record student information, the teacher table to record teacher information, the administrator table to record administrator information, and the courses published by teachers. Course schedule for information, blog table for recording blog posts posted by teachers, class video table for recording class videos posted by teachers, student class schedule for recording student course selection information, student class video table for recording class information watched by students, and pictures for recording global pictures table, a chat table that records chat room chat data, a question table that records course test questions released by teachers, a course file table that records course files released by teachers, a brainstorming table that records brainstorming questions released by teachers, and records students’ responses to brainstorming information Brainstorming sheet. The specific rules for table design are as follows.
Table 3-1 Database table
Serial number Table name description
1 article Save blog data
2 chat Save chat data
3 course Save course data
4 file Save file data
5 manage Save administrator data
6 mind Save brainstorming data
7 picture Save picture data
8 student Save Student data
9 student_course Save course selection data
10 student_mind Save storm comment data
11 student_video Save watch video data
12 subject Save test question data
13 teacher Save teacher data
14 video Save video data

(1) The student table is a student user table, as shown below:
Table 3-2 Student user table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 username varchar 50 No No
3 pass varchar 50 No No
4 create_time varchar 50 yes no
5 icon varchar 255 yes no
6 net_name varchar 50 yes no
7 sex varchar 10 yes no
8 des varchar 255 yes no
9 role varchar 10 no
no10 phone varchar 50 yes no
11 qq_email varchar 50 yes no

(2) The teacher table is a teacher user table, as shown below:
Table 3-3 Student teacher user table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 username varchar 50 No No
3 pass varchar 50 No no
4 create_time varchar 50 yes no
5 icon varchar 255 yes no
6 net_name varchar 50 yes no
7 sex varchar 10 yes no
8 des varchar 255 yes no
9 role varchar 10 no
no10 phone varchar 50 yes no
11 qq_email varchar 50 yes no

(3) The manage table is the administrator table, as shown below:

Table 3-4 Administrator table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 username varchar 50 No No
3 pass varchar 50 No No
4 create_time varchar 50 Yes No
5 icon varchar 255 Yes No
6 net_name varchar 50 Yes No
7 sex varchar 10 yes no
8 des varchar 255 yes no
9 role varchar 10 no
no10 phone varchar 50 yes no
11 qq_email varchar 50 yes no

(4) The course table is the course schedule, as shown below:
Table 3-5 Course schedule
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 teacher_id int 10 No No
3 name varchar 50 Yes No
4 des varchar 255 yes no
5 icon varchar 255 yes no
6 create_time varchar 50 yes no
7 category varchar 50 yes no
8 difficulty varchar 50 yes no
9 role varchar 10 no
no10 status int 10 yes no

(5) The article table is a blog table, as shown below:

Table 3-6 Blog table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 teacher_id int 10 No No
3 title varchar 50 Yes No
4 des varchar 255 Yes No
5 content varchar 255 Yes No
6 create_time varchar 50 Yes No
7 teacher_name varchar 50 Yes
8 status Int 10 Yes No

(6) The video table is a class video table, as shown below:
Table 3-7 Class video table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 teacher_id int 10 No No
3 course_id int 10 No No
4 name varchar 255 Yes No
5 url varchar 255 Yes No
6 status Int 10 Yes No

(7) The student_course table is the student course schedule, as shown below:
Table 3-8 Student course schedule
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 Teacher_id int 10 No No
3 course_id int 10 No No
4 progress varchar 255 yes no
5 score varchar 255 yes no
6 achievement varchar 255 yes no
7 experience int 50 yes no

(8) The student_video table is the student class video table, as shown below:

Table 3-9 Student class video table
Serial number column name field type length is allowed to be null Primary key
1 id int 10 No Yes
2 teacher_id int 10 No No
3 video_id int 10 No No
4 progress varchar 255 Yes No
5 course_id int 10 No No
6 name varchar 50 yes
7 last_time varchar 50 yes no

(9) Picture table is a picture table, as shown below:
Table 3-10 Picture table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 url varchar 255 Yes No

(10) The chat table is a chat table, as shown below:
Table 3-11 Chat table
Serial number column name field type length is allowed to be null Primary key
1 id int 10 No Yes
2 progress varchar 255 Yes No
3 icon varchar 255 Yes No
4 role varchar 50 yes
5 create_time varchar 50 yes no
6 uid varchar 15 yes no

(11) The file table is a course file table, as shown below:
Table 3-12 Course file table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 teacher_id int 10 No No
3 course_id int 10 No No
4 name varchar 255 whether

(12) The subject table is a course title table, as shown below:
Table 3-13 Course title table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 course_id int 10 No No
3 type varchar 50 Yes No
4 a varchar 255 yes no
5 b varchar 255 yes no
6 c varchar 255 yes no
7 d varchar 255 yes no
8 subject varchar 255 yes no
9 result varchar 255 yes no

(13) The mind table is a brainstorming table, as shown below:
Table 3-14 Brainstorming table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 course_id int 10 No No
3 problem varchar 255 Yes No

(14) The student_mind table is a student brainstorming table, as shown below:
Table 3-15 Student brainstorming table
Serial number column name field type length allowed to be null Primary key
1 id int 10 No Yes
2 student_id int 10 No No
3 mind_id int 10 No No
4 student_name varchar 255 Yes No
5 answer varchar 255 Yes No

4. System interface

4. Detailed design
   4.1 Platform interface design
   4.1.1 Login registration interface
5. Login page design, the front end adopts a simple card style design, and the interface for platform users to enter username and password and graphic verification code to log in. As shown in the picture:
   

Figure 4-1 Login interface
2. The registration page is designed in a simple style. The user uploads an avatar, fills in personal information such as account number, password, gender, name, etc., and finally registers through the email verification code sent by the verification platform, as shown in the figure:

Figure 4-2 Registration interface
4.1.2 Course upload interface design

1. The design of the course page published on the teacher side intuitively displays course data in the form of a list, and courses can be added, modified, and deleted, as shown in the figure:
   

Figure 4-3 Course upload interface
4.1.3 Blog interface design

1. The design of the student-side blog article list page also adopts a simple style and displays the blog article list in paging conditions. As shown in the picture:
   

Figure 4-4 Blog article list interface
2. Student-side blog post details page design, displaying blog posts of various data types in Markdown format, as shown in the figure:

Figure 4-5 Blog details interface
3. The design of the blog page published by the teacher, which visually displays blog posts in the form of a list. Blog posts can be added, modified, and deleted, as shown in the figure:

Figure 4-6 Blog publishing interface
4.1.4 Course display interface design

1. The student-side homepage design still maintains a simple and beautiful overall style, including a head navigation bar and a main area that displays some new courses and recommended courses on the platform, as shown in the figure:
   

Figure 4-7 Course homepage interface
2. All course pages on the student side are designed to display corresponding courses in a card layout style using course field selection, course difficulty selection, paging selection and other conditions, as shown in the figure:

Figure 4-8 All course page interface
3. Student-side query page design, which also displays the courses after fuzzy search at the top in a card style, as shown in the figure:

Figure 4-9 Course search interface
4.1.5 Course details interface design

1. The student-side course details page is designed to include sub-menu nesting, multi-level and multi-dimensional display of platform functions, and also includes multiple functions such as voice broadcast of course information, course viewing, courseware download, brainstorming, comments and ratings, etc., as shown in the figure:
   

Figure 4-10 Course details interface
4.1.6 Instant chat interface design

1. The student-side and teacher-side chat room pages are designed with blue as the keynote and simulate the QQ group chat communication style. It includes functions such as querying history records, displaying online users, instant messaging, user entry and exit announcement reminders, etc., as shown in the figure:
   

Figure 4-11 Instant chat interface
4.1.7 Exam interface design

1. The student-side exam page is designed to display the questions in a list, as shown in the figure:
   

Figure 4-11 Student exam interface
2. Design of teacher-side question bank management page, where questions can be added and deleted, as shown in the figure:

Figure 4-12 Question bank management interface
4.1.8 Personal center interface design

1. The student-end and teacher-end personal center pages are designed in a pseudo-transparent card style, with personal information and modification functions displayed in a form, as shown in the figure:

Figure 4-13 Personal Center Interface
4.1.9 Course Ranking Interface Design

1. The student-side course ranking page design displays the ranking information of the courses with the highest scores and the most students in the form of charts and visualizations, as shown in the figure:

Figure 4-14 Course ranking interface
4.1.10 Video upload interface design

1. The teacher's side publishes the class video page, which also visually displays the data in the form of a list. Videos can be added, modified, and deleted, as shown in the figure:
   

Figure 4-15 Video upload interface
4.1.11 Role management interface design

1. Administrator user management page design, including student page and teacher page, intuitively displays student and teacher information in a list display, and can be modified, deleted, etc., as shown in the figure:
   

Figure 4-16 Role management interface
4.1.12 Audit interface design

1. The administrator review page is designed to quickly display courses in each status by selecting review conditions, as shown in the figure:
   

Figure 4-17 Audit interface
...
There are too many, so I will omit them below...

5. Summary

Please give it a thumbs up if it is useful, see you next time~

My Bilibili Space
Gitee warehouse address: All special effects source code
Other articles:
~Follow me to see more simple creative special effects:
text smoke effect html+css+js
surround reflection loading special effect html+css
bubble floating background special effect html+css
simple Clock special effect html+css+js
cyberpunk style button html+css
imitation NetEase Cloud official website carousel image html+css+js
water wave loading animation html+css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D Three-dimensional photo album html+css
neon drawing board effect html+css+js
note some css attribute summary (1)
Sass summary note
... Wait and
go to my homepage to see more~

Sharing of travel experience: I traveled to Kuala Lumpur alone in February. My biggest feeling was that there are really many races among them, including yellow, white, black, and brown (the most). 70% of the women wore black headscarves and black masks. (Probably for religious reasons):