d

Design and Implementation of a Vue.js-Based College Teaching System
https://doi.org/10.3991/ijet.v14i13.10709

Junhui Song (*), Min Zhang
Xinyang Normal University, Xinyang, China
85141727@qq.com

Hua Xie
Xinyang Vocational and Technical College, Xinyang, China

Abstract—The proliferation of Internet information technology has funda- mentally changed the way of learning. It is now a research hotspot to improve teaching effect in colleges with Internet information technology. Starting from the actual needs of college teaching, this paper designs a college teaching sys- tem based on various Internet information technologies. Specifically, the front end was developed under the lightweight progressive Vue.js framework, which relies on the model–view–view model (MVVM); the overall structure of the system was set up based on the browser-server (B/S) architecture; the system functions were realized through HTML5, Node.js and database technology; the compatibility between mobile terminal and desktop was realized under Boot- strap. The system test shows that the Vue.js-based college teaching system op- erated stably, achieved the design goals and satisfied user demand. The research findings shed important new light on modernization and quality of college teaching.

Keywords—Vue.js framework, HTML5, teaching system, design and imple- mentation

1How to Work with This Template

1.1Applying the styles to an existing paper
At present, the Internet and information technology have become indispensable technical tools in people’s lives. Integrating the Internet and information technology into education has greatly promoted the teaching information reform in colleges and universities. In the face of the embarrassing situation that the traditional classroom teaching cannot meet the needs of college students under the information environ- ment, colleges and universities have established a college teaching system based on LAN or Internet to assist traditional classroom teaching, which could provide a plat- form for teacher-student learning exchange and thus improve teaching effect [1].

Foreign information technology and Internet technology have developed earlier than in China. Therefore, foreign research and development on teaching systems is relatively mature. The United States has the most extensive network education, e.g., in Massachusetts Institute of Technology (MIT), the number of shared on-line courses had reached 2000 by the end of 2006 [2]. Blackboard [3] is a teaching platform devel- oped by American companies; it is also the most widely used in the world, providing teachers with a strong curriculum development and teaching environment, and sudents with a good virtual learning environment. Sakai [4] is an open source plat- form of collaborative learning jointly developed by multiple universities in the United States, with the purpose of integrating the existing components and tool modules of colleges and universities to build an online teaching management. Moodle [5] is a teaching aid system developed by Australian teachers based on constructivist theory consisting of multiple modules such as resources, forums, curriculum management etc, and has been recognized by many institutions. Despite the later start of the do- mestic college teaching system, it has been developing rapidly. The 4A network teaching platform [6] was developed the earliest in China. This platform is composed of teaching resource management, curriculum coordination development tools, the teaching management system, and the teaching support system, which increases the teacher-students interaction and greatly mobilizes students’ interest in learning. Qing- hua Online established by Tsinghua University is the most mature one among the network platforms established by various universities [7]. The VClass [8] developed by Beijing Normal University has solved many prolmens in tradition teaching, and it can also provide services for distance learning, making it possible to achieve educa- tional resource balance. With the popularity of Internet information technology and smart phones, college students have become accustomed to acquiring knowledge and learning related skills through the Internet. The collge teaching system in China has developed rapidly, but there still exist the problems such as different development levels, untimely updates, incomplete curriculum structure, and single function etc. [9]. By analysing the development status and research situation of colleges teaching systems at home and abroad, this paper attempts to study the design and implementa- tion of college teaching system using the Vue.js framework. To this end, it expounds the Vue.js framework, HTML5, Node.js and other related technologies involved in the system development process. Then, starting from the actual teaching needs, it analyses the various requirements of the system, determines its overall architecture, discusses about the key modules in detail, and demonstrates the specific system im- plementation. Finally, the system test results show that the Vue.js-based college teaching system operated stably, achieved the design goals and satisfied user demand.

2System Related Technology

2.1Vue.js framework
Vue.js [10] is the best lightweight front-end framework based on MVVM mode in Web applications. Figure 1 shows the schematic diagram of MVVM mode architec-

ture, in which ViewModle, as a middleware, is responsible for communication be- tween functions and data [11].

DOM Observer JavaScript object

Fig. 1. MVVM mode architecture diagram

The Vue.js core library focuses only on the functional layer and is therefore not a versatile framework. Vue.js can implement responsive two-way data binding through a simple API and quickly build user interfaces [12-13]. In Vue.js, any type of applica- tion interface can be abstracted into a component tree. Figure 2 shows a schematic diagram of the component system. If the component is abstracted reasonably, several small components can be reused to build a large system, so that the repetitive devel- opment shall be reduced [14].

Fig. 2. Vue.js component system schematic

2.2HTML5
Hypertext markup language (HTML) consists of the “head” and “body”. It is the standard mark-up language to mark each part of a web page by the mark symbols [15]. HTML is widely used because it allows browsers to easily access new web pag- es by clicking on a URL pointer (hyperlink).
HTML5 [16] is the latest generation of HTML standards. Based on HTML, it has more new useful features such as performance and integration, web multimedia, local storage, semantic features and so on. It has been the biggest leap of web development standards in the recent ten years.

2.3Node.js
Node.js is a development platform that allows JavaScript to run on the server side based on the high-performance, open source runtime environment of JavaScript [17]. Its essence is an event-based framework that prevents the secondary triggering of the Web requests through event-driven mechanisms. This paper uses Node.js event- driven, asynchronous blocking I/O, single-threaded features for system back-end design [18].

3Design and Implementation of College Teaching System Based on Vue.js Framework

3.1System requirements analysis
The functional requirements analysis and non-functional requirements analysis of the system are important parts of software development. Functional requirements analysis is to determine the main functions and module division of the system. The non-functional requirements analysis is based on the users’ demand and experience to ensure the safety, stability, easy maintenance and scalability of the system. This paper focuses on the functional requirements analysis of the system.
The college teaching system is designed to make up for the limitations of tradition- al classroom teaching with time and space constraints and the lack of interactive communication between teachers and students so that the students can conduct pre- study and after-class review according to their own time schedule and practical abil- ity. It also builds an interactive platform for teachers and students communication. Students and teachers are the main service objects of the system. Besides, the admin- istrator is responsible for ensuring the normal operation of the system through com- prehensive management. Therefore, this paper analyses the functional requirements of the system from the three aspects of students’ learning needs, teachers’ teaching needs and administrator’s management needs.
Students: After logging in, students can modify their own information, browse the course list, select the course, watch the teaching resources provided by the teacher, courseware and other teaching resources, learn online or by downloading, view the teacher’s published course announcement, assignment announcement and related messages. They can also conduct online tests for selected courses, view grades and paper analysis, and communicate instantly with teachers and other students through the forum.
Teacher: After logging in, the teachers can modify his own user information, cre- ate classes and courses, manage class information, publish relevant teaching resources and announcements, arrange student assignments, maintain test questions, view stu- dents’ homework and online test analysis to understand the students’ learning situa- tion, communicate with students through the forum and answer their questions.

Administrator: After logging in, the administrator can assign the user role, modify the information of the students and teachers, and manage the information of each function module in the system.

3.2System function module division
According to the analysis of system requirements, the system is divided into four modules: login function, learning function, forum function and test function, as shown in Figure 3.
Login module: Students, teachers and system administrators can register and log in through the system login function. After logging in, they can modify the personal information, click the corresponding function button on the system homepage to enter each function module, and view the comment content and their own bookmarks.

Fig. 3. Functional structure diagram of college teaching system

Learning module: The learning function includes three sub-modules: resource management, resource learning and assignment management. Teachers can use the resource management sub-module to maintain course information, upload teaching courseware, video and other learning resources; students can use the resource learning sub-module to browse teaching resources, download them for learning; the assign- ment management sub-module provides three sub-functions of assignment publishing, assignment submission and assignment review.

Forum module: The forum module is mainly to provide an interactive platform for teachers and students. Teachers and students can post messages through the forum module, comment and reply to posts, and add the interesting or useful posts into the bookmarks for future viewing.
Test module: The Test module consists of four submodules: test maintenance and management, automatic test paper generation, online test, and test feedback. In this module, the teacher can add and modify the test database; the students can select the test range according to the learning progress or their own situation. The system per- forms the automatic test paper generation according to the student’s requirements. Then, the student completes the self-test, and checks the test score and test paper analysis.
3.3Detailed design and implementation of main system function module Design and implementation of system login module: The college teaching sys-
tem consists of three types of users: students, teachers and administrators. The admin- istrators have all the functions of the system. They can set the roles and permissions of students and teachers, as well as the user rights and initial passwords according to the teacher number and student number. When the users of student and the teacher use the system for the first time, they log in according to the given username and pass- word, and view the different interface after the successful logging in. But they can change their personal information, including password modification, profile photo upload etc. according to their own situation. Others cannot enter the system, unless the registration information is submitted and then approved. Figure 4 shows the sys- tem login process. Figure 5 shows the login interface.

Fig. 4. System login process

Fig. 5. System login interface

Design and implementation of test module: After entering the correct username and password, the students get access to the student’s main page. From this page, they can view the notice announcement and assignment status of the course, and use the navigation bar to access the corresponding module link.
Clicking the online test button, the students enter the online test function module, and choose the type of test questions and the scope of test questions according to their own learning conditions.
Then, the system will automatically organize the test paper according to the re- quirements of the students, and present the test questions to them, while the students will complete and submit the test within the specified time. The test paper is automat- ically scored by the system, and the related test results and test paper information are also fed back to the students for self-study. Figure 6 shows the online test flow chart, and Figure 7 shows the online test interface.
Design and implementation of teaching resource management sub-module: Teaching resource management is a sub-module of the learning module. After suc- cessful logging in, the teachers can add, modify or delete the course information and related resources through this module. When clicking for uploading interface of the teaching resource (Figure 8), the teacher can add the edited text or video to the up- loading interface by drag-and-drop. Based on the subject and specific type of the teaching resource, the related resource can be selected and uploaded for the students’ learning. For the test question bank, the teacher can make uploading in batches, or add them one by one according to actual needs. Figure 9 shows the interface for the teach- er to add test questions.

N

Fig. 6. Online exam flow chart

Fig. 7. Online test interface

Fig. 8. Upload teaching resource interface

Fig. 9. Test question add interface

3.4System test
In order to ensure the system operation quality and find the system deficiency in a timely manner, the black-box testing method was used to test the system stability and the function scalability. The test results show that the system login interface, course interface, video play interface, question bank interface, online test interface, and test feedback interface etc. can run normally and meet user demands.

4Conclusion

Based on the teaching system researches at home and abroad, this paper studies the design and implementation of college teaching system based on Vue.js framework. The specific conclusions are as follows:
Starting from the actual needs of college teaching, the functional requirements of the system from the three aspects of students, teachers and administrators were analysed. Based on this, the system is divided into four modules: login function, learning function, forum function and test function.

Taking the system login module, online test module and teaching resource man- agement sub-module as examples, the design and implementation of the main sys- tem functional modules were elaborated.
The black-box testing method was used to test the system stability and the function scalability. The test results show that the system can run normally and meet the needs of users.

5Acknowledgement

Henan Province Teacher Education Curriculum Reform Project: Network Training Model for Primary and Secondary School Teachers under the Background of Large Data (NO. 2018-JSJYYB-029)
Henan Province Teacher Education Curriculum Reform Project: Research on the curriculum reform of teachers’ Informatization in primary and secondary schools under the mode of “Internet + education” (NO.2019-JSJYYB-118).

6References

[1]Wang, H. C., Hsu, C. W. (2006). Teaching-material design center: an ontology-based sys- tem for customizing reusable e-materials. Computers and Education, 46(4), 458-470. https://doi.org/10.1016/j.compedu.2005.09.005
[2]Chen, H. Y., Liu, K. Y. (2008). Web-based synchronized multimedia lecture system design for teaching/learning chinese as second language. Computers and Education, 50(3), 693- 702. https://doi.org/10.1016/j.compedu.2006.07.010
[3]Craig, K., Stolfi, F. (2002). Teaching control system design through mechatronics: aca- demic and industrial perspectives. Mechatronics, 12(2), 371-381. https://doi.org/10.10 16/s0957-4158(01)00076-9
[4]Ye, Z., Hua, C. (2012). An innovative method of teaching electronic system design with psoc. IEEE Transactions on Education, 55(3), 418-424. https://doi.org/10.1 109/te.2011.2181994
[5]Wang, Y. H., Lo, H. C. (2013). Teaching quality enhancement using value-chain instruc- tion system design. Quality and Quantity, 47(6), 3303-3318. https://doi.org/10.10 07/s11135-012-9720-5
[6]Pu, Y. H., Chiu, P. S., Chen, T. S., Huang, Y. M. (2015). The design and implementation of a mobile library app system. Library Hi Tech, 33(1), 15-31. https://doi.org/10.1108/lht- 10-2014-0100
[7]Glover, R. H., Krotseng, M. V. (1992). Design and implementation of a decision support system for institutional advancement. Journal of Computing in Higher Education, 3(2), 99- 120. https://doi.org/10.1007/bf02942358
[8]Hora, M. T., Holden, J. (2013). Exploring the role of instructional technology in course planning and classroom teaching: implications for pedagogical reform. Journal of Compu- ting in Higher Education, 25(2), 68-92. https://doi.org/10.1007/s12528-013-9068-4
[9]Chang, B., Cheng, N. H., Deng, Y. C., Chan, T. W. (2007). Environmental design for a structured network learning society. Computers and Education, 48(2), 234-249. https://doi.org/10.1016/j.compedu.2004.11.008

[10]Wei, Q. L., Chang, T. S. (2011). Optimal system design series-network dfa models. Jour- nal of the Operational Research Society, 62(6), 1109-1119. https://doi.org/10. 1057/jors.2010.45
[11]Zhang, H., Xu, J. L., Cheng, X. (2016). Interactive educational software for teaching water distribution networks design. Computer Applications in Engineering Education, 24(4), 615-628. https://doi.org/10.1002/cae.21736
[12]Weber, Erwin, W. (1969). Modification and use of nasap to aid in teaching network de- sign. IEEE Transactions on Education, 12(4), 232-234. https://doi.org/10.1 109/te.1969.4320511
[13]Baylari, A., Montazer, G. A. (2009). Design a personalized e-learning system based on item response theory and artificial neural network approach. Expert Systems with Applica- tions, 36(4), 8013-8021. https://doi.org/10.1016/j.eswa.2008.10.080
[14]Linge, N., Parsons, D. (2006). Problem-based learning as an effective tool for teaching computer network design. IEEE Transactions on Education, 49(1), 5-10. https://doi.org/10.1109/te.2005.852600
[15]Li, Y. X., Lin, L., Qiang, W. (2013). Research and development of the integrated man- agement system of the college sports based on the network. IEEE, 440-443. http:// doi.org/10.1109/isdea.2013.505
[16]Tripathy, S. C., Durgaprasad, G. S. S. S. K. (1980). The micro-machine as a teaching aid to power system simulation study. International Journal of Electrical Engineering Educa- tion, 17(1), 39-50. https://doi.org/10.1177/002072098001700110
[17]Mcwilliams, A. T. (2010). Introducing expert systems to medical students using esta, ex- pert system teaching aid. Medical Education, 22(2), 99-103. https://doi.org/10.11 11/j.1365-2923.1988.tb00418.x
[18]Hsu, Y. Y., Yang, C. C., Su, C. C. (2002). A personal computer based interactive software for power system operation education. IEEE Transactions on Power Systems, 7(4), 1591- 1597. https://doi.org/10.1109/59.207385

7Authors

Junhui Song graduated from China University of Geosciences (Wuhan) with a master’s degree, is currently a teacher of Xinyang Normal University. Her main re- search direction is information management and network modeling optimization.
Hua Xie graduated from Tongji University with a master’s degree, is currently a teacher of Xinyang Vocational and Technical College. His main research direction is network security, network modeling and optimization.
Min Zhang is a college student in the School of Computer and Information Tech- nology of Xinyang Normal University

Article submitted 2019-03-19. Resubmitted 2019-04-24. Final acceptance 2019-04-27. Final version published as submitted by the authors.