（附源码）PHP编译原理教学网站计算机毕设45010

骑猪看日落 2024-02-05 19:07 36阅读 0赞

摘 要

随着网络技术的迅速普及，整个社会的发展与信息技术的关系越来越密切，以往的授课方式对大学生而言已经落后，课后获取相关学科的信息往往需要联系老师或自己通过上网、去图书馆等途径获取，然而在网上查询、去图书馆查找等途径学习时，经常需要面对很多其他冗余信息和不能选择学习环境等因素的困扰，找到的资源可能容易出现差错或消耗额外的精力，造成时间、精力上的成本损失。编译原理教学网站能够快速查找编译原理这门学科相关的资料和学习内容，用户可以轻松地、快速地、准确地获取自己需要的信息。为查询或学习编译原理的资料提供了一条快速安全的通道。

本文以计算机技术为基础，设计实现了编译原理教学网站。本网站利用了MySQL和php进行开发，不过只初步达到了预期的功能。在ThinkPHP框架上开发了编译原理教学网站，包含书中大多数知识点。教师可以通过网页上传题目以丰富题库，也能浏览和修改所有已上传题目，学生自测功能将随机抽取来自库中的题目。

最终完成这个专题学习网站，给与了学生课后自助补充知识的一条路径，通过网络和各种智能终端实时自学、自测，方便教师减少安排给重复讲解和复习课程，能把更多的时间精力放到授课教学，减少教师和学生压力。

关键词：编译原理教学网站；辅助自学自测；php；ThinkPHP

**Abstract**

With the rapid popularization of network technology, the development of the whole society is more and more closely related to information technology, after-school access to relevant subject information often need to contact teachers or their own access to the Internet, to the library and other ways to obtain, but in the online search, to the library and other ways to find learning, often have to face a lot of other redundant information and can not choose the learning environment and other factors, found resources may be prone to errors or consume additional energy, resulting in time, energy cost. Compiler principles teaching website can quickly find compiler principles-related materials and learning content, users can easily, quickly and accurately get the information they need. Provides a fast and secure way to query or learn about compilation principles.

In this paper, based on computer technology, design and implementation of compiler principles teaching website. This site has been developed using MySQL and PHP, but only initially to the extent expected. A compilation principles teaching website has been developed on the Think PHP framework, which contains most of the knowledge points in the book. Teachers can upload questions through the web to enrich the question bank, but also can browse and modify all the uploaded questions, students self-test function will be randomly selected from the library of questions.

Finally completed the project learning website, giving students a way to supplement knowledge after class, through the network and various intelligent terminals real-time self-learning, self-testing, it is convenient for teachers to reduce the number of repeated lectures and review courses, and to devote more time and energy to teaching and teaching, thus reducing the pressure on teachers and students.

**Keywords****:** Compilation principle teaching website; Assisted self-study and self-test; php; ThinkPHP

目 录

引言

1 主要研究及相关技术

1.1 主要研究内容

1.2客户端技术

1.2.1HTML5技术

1.2.XAMPP

1.2.php

1.3服务器端技术

1.3.1php

1.3.2ThinkPHP  3

1.3.3MySQL 3

2 系统分析

2.1 需求概述

2.2 系统可行性分析 4

2.2.1操作的可行性分析 4

2.2.2管理的可行性分析 4

2.2.3技术的可行性分析

2.3 网站的功能需求分析

2.4 非功能需求分析 5

2.5用户用例 6

2.5.1 管理员用例 6

2.5.2 教师、学生用例 6

3 系统设计 7

3.1 系统设计原则 7

3.2 系统功能架构设计 7

3.3 系统功能设计 7

3.4 数据库设计 7

3.4.1student(学生信息) 8

3.4.2teacher（教师表） 8

3.4.3question（题目表） 9

3.5 功能详细设计 9

3.5.1用户登录模块 9

3.5.2题目传输模块

4 系统实现 11

4.1 系统流程 11

4.2 登录注册 11

4.3 添加题目 12

4.4 自我测试 12

5 系统测试 3

5.1 功能性测试 3

5.2 兼容性测试

5.3 系统测试总结

6 结论

谢辞 5

参考文献

## 引言 ##

随着网络和智能手机的高速发展，上网终端和各种浏览器已经迅速潜入到人们的生活里，目标对象是学生的各类教学网站和软件也如春笋般冒出，因为学生的自学条件普遍低下，如何设计实现一个自学型辅助网站显然是一个能突破课堂教学不够便捷、效率一般、教学成本高的突破点，也是很多自学型学者的期望。普通校园教学服务的载体是以校园网络为主，服务方式和网络质量受到所在校园的服务器设备和网络环境的限制。近年来，上网终端已经不再限于PC端，接近100%的大学生群体人数使用更便携的各类智能终端。学生对智能手机的依赖传以及统教学模式的缺陷弊端为各类学习网站的发展奠定了基础。

在智能手机接近100%普及率的联动影响下，移动网络技术和各类智能终端的发展为新的教育模式也提供了可行的技术支持。而传统的教育模式面临着越来越大的压力，在各类信息都能飞速传递的时代，课堂教学这种指定时间指定地点指定对象的黑板教学方式显然是落后的，也是很不自在的，就像笼中之鸟般被学校完全牵制会让学生感到在信息量爆炸的当下只有学习这件事自由度最低，反观学生迟到早退逃课偏科等现象，我们何不尝试被动教学，让年轻人在学习上也卷起来。

增加学生自主学习的机会可以提高学生学习的自由度，“解放”教师的重复低效工作。在传统的教学模式下，学生的时间分配自由度极低，以致于老师们都不敢布置过多作业，否则若两门课作业提交时间隔得近了会出现有学生无论如何都无法全部完成的现象，算上休息时间甚至中小学也会有熬夜肝作业的现象，休息时间又再影响第二天的课堂学习效率，形成死循环，大部分学生因为这种死循环现象本能地拒绝作业或产生对某些老师的偏见，学生上交的作业和试卷需要老师批改，增加了教师的负担。在此专题学习网站中有相应的自我测试等功能，发挥计算机高速以及精确的计算能力，既可以避免人为失误，又大大减轻了教师一人负责几十上百人份作答内容的精力成本负担，减轻了教师工作的繁重、重复，研发更有利于学生的教学内容，提高了学生对自己所掌握知识的把握程度有一定程度的了解，也提高了教师工作的效率和质量。

因此，将互联网技术与学习互相融合，更加充分调起学生在学习上的自由度以及课外的学习气氛，同时提升教与学的质量和效率，发挥互联网的优点、智能终端的便捷性和交流性，设计和开发一个能满足学生自主学习需求、能引导学生学习积极性、符合数据化时代需求的专题学习网站是一个具有非常可观的现实意义的课题。

1.   主要研究及相关技术
    
    1.   主要研究内容

本文的主要工作是研究通过互联网、计算机终端载体的自主学习与传统课堂学习之间的差异,设计一个专题自学网站。在确定需求的基础上,以浏览器为用户端载体,请求后端的服务器处理业务需求进行数据的交互以及校验,与技术相结合提高学生自学通过的可观性,通过压力转换使学生被动地提高课外的学习效率与学习积极性。在《编译原理教学网站》框架的设计以及功能实现上,本课题主要完成以下几个内容：

1.  专题学习网站的需求分析包括功能性和非功能性；
2.  专题学习网站的总体设计目标；
3.  专题学习网站各个功能模块和数据库的详细设计；
4.  专题学习网站功能模块的实现；
5.  专题学习网站的功能性测试和兼容性测试，保证稳定性；
    
    1.   客户端技术
        
        1.   HTML5技术

近几年来，HTML5是Web开发标准中环境适应性最好的。它是最新一代的HTML标准。它包括了HTML曾拥有那些实用特性，还在原有的基础上新增了许多新的特性，例如语义特性、Web页面的3D图形和特殊效果特性、本地存储特性、CSS3特性、多媒体特性、性能和集成特性等等。

1.  语义特性

通过使用HTML5新添加的元素，能够让开发人员更好地架构出文档结构，增加了文档的可读性。使用搜索引擎时就能更快地搜索到准确的信息，因为容易理解的页面中搜索引擎能更好地分辨内容。

1.  本地储存特性

HTML5提供了两种新的客户端存储网页数据方法，localStorage和sessionStorage。localStorage是持久化本地数据，除非清除浏览器缓存数据，否则数据将始终存在; sessionStorage是将网页数据存储在当前用户会话中，只能在当前会话的页面上访问数据。当会话关闭时，数据将丢失。

1.  性能与集成特性

在HTML5中，XMLHttpRequest2技术取得了巨大的进步，客户端和服务端的交互时间降低，使得Web页面应用程序能够快速高效地响应操作和运行，提高了性能效率。

1.  
2.  1.  1.

1.  1.  1.   XAMPP

XAMPP(X-系统，A-Apache，M-Mysql，P-php，P-Phpmyadmin/Perl)这个缩写名称说明了XAMPP安装包所包含 的文件：Apache web 服务器, MySQL数据库, PHP, Perl, FTP 服务程序(FileZillaFTP)和phpMyAdmin。

简单的说，XAMPP是一款集成了Apache+MYSQL+PHP的服务器系统开发套件，同时还包含了管理MySQL的工具phpMyAdmin，即可对MySQL进行可视化操作。采用这种紧密的集成，XAMPP 可以运行任何程序：从个人主页到功能全面的产品站点（虽然这仅仅用于开发目的；出于安全考虑，XAMPP 还不适于用在产品服务器上）。

1.  1.   服务器端技术
        
        1.  php

PHP 是一种 HTML 内嵌式的语言，是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，被广泛地运用。PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。 PHP可以比CGI或者Perl更快速的执行动态网页——动态页面方面，与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成htmL标记的CGI要高许多；PHP具有非常强大的功能，所有的CGI的功能PHP都能实现。 PHP支持几乎所有流行的数据库以及操作系统，最重要的是PHP可以用C、C++进行程序的扩展。

1.  1.  1.   ThinkPHP框架

ThinkPHP(FCS)是一个轻量级的中型框架，是从Java的[Struts][]结构移植过来的中文PHP开发框架。它使用面向对象的开发结构和MVC模式（如图1-1），并且模拟实现了Struts的标签库，各方面都比较人性化，熟悉J2EE的开发人员相对比较容易上手，适合php框架初学者。

![95c0c61d7aff4d919c1dc52f9091a4bc.png][]

图 1-1 MVC模式图

ThinkPHP的宗旨是简化开发、提高效率、易于扩展，其在对数据库的支持方面已经包括MySQL、MSSQL、Sqlite、PgSQL、 Oracle，以及PDO的支持。ThinkPHP有着丰富的文档和示例，框架的兼容性较强，但是其功能有限，因此更适合用于中小项目的开发。

1.  1.  1.   MySQL

MySQL是最流行的数据库之一，它是一个免费且开源的关系型数据库管理系统，但也不意味着该数据库是完全免费的，它适用于中小型软件，是中小企业以及个人用户的首选。

1.  开放源码

MySQL是一个开源数据库，任何人都可以获得该数据库的源代码。这允许任何人修复MySQL错误，并且任何人要实现任何目的都可以通过使用该数据库来实现。MySQL 是一款完全免费的数据库。

1.  跨平台性

MySQL可运行的系统广泛，包括Windows、UNIX、Linux等，再加上MySQL的跨平台性，很多网站都会选择使用MySQL。

1.  功能强大

MySQL 是一个真正的多用户、 多线程 SQL数据库服务器。它可以快速、高效、安全地处理大量数据。与 Oracle 和其他数据库相比，MySQL非常易于使用。MySQL 主要目标是快速、健壮和易于使用。

1.   系统分析
    
    1.   需求概述

随着智能终端和网络的普及、迅速发展，专题学习网站的业务需求应被更多的学校所需要，更多的高校用来提高教与学的自由度，减轻教师负担，对学校来说此类网站越来越多的开发对他们将是未来的趋势。专题学习网站设计和实现之前，还将进行需求分析和可行性分析，还要对预测会造成的影响进行分析。功能设计是进行网页制作的重要环节，在功能性需求分析里需要确定系统的主要作用和功能，包含哪些功能模块，最后根据实际状况验证确认。通过对专题学习网站的功能分析，用户包括3部分：学生、教师和管理员。

1.  1.   系统可行性分析
        
        1.   操作的可行性分析

为了用户能简单明了的操作本软件以及能在短时间内学习，降低学习成本，本软件将使用ThinkPHP前端框架设计出简洁明了的操作界面。为了方便用户能像期望中的那样从该网站获取信息，尽可以将繁琐的功能抛弃，使网站更便于新用户使用和体验。

由于没有繁琐的功能参与，所以该编译原理教学网站的可操作性是极高的。

1.  1.  1.   管理的可行性分析

从网站的使用上来说，管理员负责学生和教师的账号管理，管理员间无管理关系，管理员账号只有在库中才能删除，管理方向唯一，也一定程度上保证了数据的安全。从网站的开发上来说，这个系统本身是作为于个人的作业完成，无论从技术还是数据上而言都只由本人参与，没有过多的人员参与开发，只需要将网站呈现的数据内容进行管理，显然在管理的可行性上也是基本可行的。

1.  1.  1.   技术的可行性分析

编译原理教学网站的研究与构建的过程都是在本人电脑上完成，有相关应用监测设备安全性和稳定性，采用了 MYSQL数据库存放数据，该数据库能够保证数据的安全和完整，能很好得与PHP搭配组成良好的开发环境，并且能够处理具有数千条记录的大数据流，为中小型的开发提供了完全能满足需求的功能，能够利用标准数据库语言进行操作，能够支持编译原理教学网站研究与构建的相关需求，并为系统的功能性存储提供特有的帮助，可以缩短研发周期，所以满足技术可行性。

1.  1.   网站的功能需求分析

编译原理教学网站设计初衷是辅助学习，提高考试通过率。用户分为三个角色：学生、教师和管理员。学生用户常用的功能模块：登录注册、个人信息、自我测试等，教师用户常用的功能模块：登录注册、个人信息、添加题目等。

1.  注册登录及找回密码

新用户注册需要输入相关信息，完成注册会在服务端获得有效的角色id，数据库存储用户注册的信息后方可进行登录操作。登录功能通过验证输入的账号信息，提交给后台查询用户数据进行匹配，未找到完全一直的账号将不能登录，找到完全一致的账号则提示用户登录成功。

找回密码功能通过信息验证提交到后台，查询是否有信息完全相同的账号，找不到则提示信息不符，找到完全一致信息的账号则提示验证成功并重置密码。

1.  个人信息

用户可以修改资料和修改密码和退出功能，后台通过输入的数据判断提示相应的信息。

1.  在线考试

教师可以输入题目和选项并上传题目，也能查看已发布的题目列表。

学生可以通过网页中的自我测试功能，系统会自动生成题目，完成后会提示所得成绩。

1.  管理账号

管理员可以查询和编辑学生和教师帐户以进行管理。

1.  1.   非功能需求分析

功能性需求对于系统的主要功能进行解析，除此之外，本小节还讲从非功能方便进行需求分析，主要就包括安全性、性能以及系统质量方便。

1.  安全需求

系统必须具有良好的安全性能，这是一项基本要求，应确保系统不会在恶意攻击中逃逸用户数据和失去系统权限，不会因网络等原因造成数据丢失。

1.  性能需求分析

良好的性能会给用户带来更好的体验，

（1）系统访问性能。在并发请求较多的情况下，需要保证请求的高连接速度。同时还应保证用户流量的连续性。

（2）延展性。当前的系统用户数量受到设备和适当资源的限制，但是，在设计中应保留一个接口，以便于将来扩展系统。

（3）操作流程。系统操作过程必须保持整个过程的流畅性，确保尽可能简化操作，并尽量避免用户在操作过程中发生困扰。系统设计是整个系统开发过程中非常考究合理性的一部分。

1.  1.  用户用例

编译原理教学网站的用户共有三类，包括管理员、学生和教师。以下大致给出抽象简洁的用户用例图。

1.  1.  1.  管理员用例

管理员是在数据库中直接添加的，不受页面数据影响，安全级别高，独立程度高。这是管理员的用户用例图，如图2-1。

![3acc875b4be24bbcaab5d50cebab4f17.png][]

图 2-1 管理员用例图

1.  1.  1.  教师、学生用例

教师和学生是在页面注册账号获得登陆方法的，他们的账号信息可以由本人以及管理员进行管理。以下是学生的用户用例图如图2-2所示，以及教师的用户用例图如图2-3所示。

![6e73e25213d2485988bebf10822dda81.png][]

图 2-2 学生用例图

![ef43cd4995f044f7b26044d40917221c.png][]

图 2-3 教师用例图

1.   系统设计
    
    1.   系统设计原则

新系统的研究和开发应以适当的原则为指导，该系统主要遵循的第一个原则是兼容性原则，专题学习网站应当兼容现有的网络环境，兼容现有的软硬件，节省开发和维护成本；第二个原则是实用原则，系统开发应符合实际情况，具有可行性分析和需求分析的良好结果；三是稳定原则，系统需要有一定的稳定性，逻辑错误和数据错误是在开发阶段就能够避免的；四是安全原则，尽量减少漏洞可以提高代码的安全系数，还应当保护用户的隐私，以防止由于系统原因导致用户丢失。

1.  1.   系统架构设计

根据对用户的需求分析，系统的总体功能模块设计分别包括用户注册登录、个人信息等模块，前后接口使用HTTP进行数据传输。当用户通过浏览器端发送请求，web服务器接收到指令后会对相对应的数据执行操作，数据库又会把结果返给服务器的流程。

![b96bc0e545c642dfb42c2c2f053ceb00.png][]

图 3-1 系统架构图

1.  1.  系统功能设计

系统功能的设计应当按照整个系统设计的总体思路来设计。即基于B/S模型在编译原理教学网站上进行研究与构建。

1.  1.   数据库设计

![0279b733cace41d78cee452eacd0e94e.png][]

图 3-2系统E-R图

根据需求分析以及各模块功能对数据库进行详细设计，可知本系统需要的表并不多，但关系略繁杂。下文中仅挑选几个为例，简单展示数据库表的设计。

1.  1.  1.   student(学生信息)

学生信息表表名为‘student’，记录的是学生用户的信息，一共有8个字段。每个字段详细设计如表3-1所示：

表3-1学生表student

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#999999;width:74.35pt;"> 字段名 </td> 
 <td style="background-color:#999999;width:49.6pt;"> 类型 </td> 
 <td style="background-color:#999999;width:42.55pt;"> 长度 </td> 
 <td style="background-color:#999999;width:77.95pt;"> 是否允许空值 </td> 
 <td style="background-color:#999999;width:63.8pt;"> 是否主键 </td> 
 <td style="background-color:#999999;width:95.55pt;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> id </td> 
 <td style="width:49.6pt;"> int </td> 
 <td style="width:42.55pt;"> 10 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 是 </td> 
 <td style="width:95.55pt;"> 自动递增 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> phone </td> 
 <td style="width:49.6pt;"> bigint </td> 
 <td style="width:42.55pt;"> 11 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 手机号 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> password </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 15 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 密码 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> name </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 20 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 名字 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> student_number </td> 
 <td style="width:49.6pt;"> bigint </td> 
 <td style="width:42.55pt;"> 10 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 学号 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> college </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 20 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 学校 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> role </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 20 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 角色 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  1.   teacher（教师表）

teacher表是教师信息表，记录的是教师的详细信息，一共有8个字段。每个字段详细设计如表3-2所示：

表3-2教师表teacher

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#999999;width:74.35pt;"> 字段名 </td> 
 <td style="background-color:#999999;width:49.6pt;"> 类型 </td> 
 <td style="background-color:#999999;width:42.55pt;"> 长度 </td> 
 <td style="background-color:#999999;width:77.95pt;"> 是否允许空值 </td> 
 <td style="background-color:#999999;width:63.8pt;"> 是否主键 </td> 
 <td style="background-color:#999999;width:95.55pt;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> id </td> 
 <td style="width:49.6pt;"> int </td> 
 <td style="width:42.55pt;"> 10 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 是 </td> 
 <td style="width:95.55pt;"> 自动递增 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> phone </td> 
 <td style="width:49.6pt;"> bigint </td> 
 <td style="width:42.55pt;"> 11 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 手机号 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> password </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 15 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 密码 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> name </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 20 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 名字 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> <a rel="nofollow">department</a> </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 255 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 系部 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> college </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 20 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 学校 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> role </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 20 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 角色 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.  1.   question（题目表）

question是题目表，记录的是题目的内容，一共有8个字段。每个字段详细设计如表3-3所示：

表3-3题目表question

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#999999;width:74.35pt;"> 字段名 </td> 
 <td style="background-color:#999999;width:49.6pt;"> 类型 </td> 
 <td style="background-color:#999999;width:42.55pt;"> 长度 </td> 
 <td style="background-color:#999999;width:77.95pt;"> 是否允许空值 </td> 
 <td style="background-color:#999999;width:63.8pt;"> 是否主键 </td> 
 <td style="background-color:#999999;width:95.55pt;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> id </td> 
 <td style="width:49.6pt;"> int </td> 
 <td style="width:42.55pt;"> 10 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 是 </td> 
 <td style="width:95.55pt;"> 自动递增 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> paperId </td> 
 <td style="width:49.6pt;"> int </td> 
 <td style="width:42.55pt;"> 11 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 试卷id（外键） </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> content </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 255 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 题目内容 </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> choiceA </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 255 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 选项A </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> choiceB </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 255 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 选项B </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> choiceC </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 255 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 选项C </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> choiceD </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 255 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 选项D </td> 
 </tr> 
 <tr> 
 <td style="width:74.35pt;"> answer </td> 
 <td style="width:49.6pt;"> varchar </td> 
 <td style="width:42.55pt;"> 1 </td> 
 <td style="width:77.95pt;"> 否 </td> 
 <td style="width:63.8pt;"> 否 </td> 
 <td style="width:95.55pt;"> 参考答案 </td> 
 </tr> 
 </tbody> 
</table>

数据库中还有其他的表，就不在此一一列举了。

1.  1.   功能详细设计
        
        1.   用户登录模块

学生和教师用户可以进行登录账号和注册账号以及找回密码，管理员账号仅用于登录时有效，该模块用例图如下图3-2所示。

![3255b50b1faa4a968c8e2f3bba0cc33a.png][]

图3-2 登录注册用例图

1.  1.  1.  题目传输模块

通过添加题目功能，教师可以添加题目、管理员和教师都能够查看或删除已上传的所有题目。学生使用的自我测试功能中的题目由教师提供，测试结束会提示所得成绩。该模块用例图如下图3-3所示。

![c0462c4c29144c8b8f6edd98ada8ccde.png][]

图 3-3 题目传输模块

1.   系统实现
    
    1.  系统流程

编译原理教学网站，从用户登录开始到用户退出系统或离开网页，整体的工作是属于重复性的，整个每个功能块必须在既定的范围内工作。系统流程图如图 4-1 所示。

![c5ef5b7be8a64004b1ca1e2021e20382.png][]

图 4-1 系统流程图

1.  1.   登录注册

登录功能是用户联系用于验证用户凭据的系统的第一个功能，用于验证用户的登录信息。对于正确的操作将跳转至成功页面，对于错误的输入则回到登录页面并进行相应的错误提示，登录流程如下图4-2所示。

![2834ddd4f1d74b2ab39ee72a7b24760f.png][]

图 4-2 登录流程图

1.  1.   添加题目

添加题目只对教师用户开放，教师可以通过输入题目和答案并上传数据进行添加题目，还可以下载全部试题。

1.  1.   自我测试

自我测试只对学生用户开放，学生可以通过网页中的自我测试功能，系统会自动生成题目，完成后会提示所得成绩。

1.   系统测试
    
    1.   功能性测试

功能性测试又可以称为黑盒测试，通过边界值分析、错误推测等用例设计方法进行软件功能的测试。由于网站功能测试点较多，本文中仅列举以下几个不同功能点进行测试说明。具体的测试用例情况如表5-1至表5-4所示。

表5-1 登录注册的登录测试用例

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 功能模块 </td> 
 <td colspan="2" style="width:148.55pt;"> 登录注册 </td> 
 <td style="background-color:#d9d9d9;width:67.6pt;"> 功能点 </td> 
 <td style="width:153.75pt;"> 登录 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 用例编号 </td> 
 <td style="width:71.75pt;"> 1.1 </td> 
 <td style="background-color:#d9d9d9;width:76.8pt;"> 用例说明 </td> 
 <td colspan="2" style="width:221.35pt;"> 全部置空 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 前置条件 </td> 
 <td colspan="4" style="width:369.9pt;"> 用户进入到“登录”页面 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 输入 </td> 
 <td colspan="4" style="width:369.9pt;"> 令所有输入框为空，点击“登录”提交 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 预期结果 </td> 
 <td colspan="4" style="width:369.9pt;"> 提示“请正确输入” </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 测试结果 </td> 
 <td colspan="4" style="width:369.9pt;"> 与预期结果相同，测试通过 </td> 
 </tr> 
 </tbody> 
</table>

表5-2 自我测试的创建考试测试用例

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 功能模块 </td> 
 <td colspan="2" style="width:148.55pt;"> 自我测试 </td> 
 <td style="background-color:#d9d9d9;width:67.6pt;"> 功能点 </td> 
 <td style="width:153.75pt;"> 题目列表创建 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 用例编号 </td> 
 <td style="width:71.75pt;"> 1.2 </td> 
 <td style="background-color:#d9d9d9;width:76.8pt;"> 用例说明 </td> 
 <td colspan="2" style="width:221.35pt;"> 选择题目类型并选择开始测试 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 前置条件 </td> 
 <td colspan="4" style="width:369.9pt;"> 用户已经登录系统，并进入到“自我测试”页面 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 输入 </td> 
 <td colspan="4" style="width:369.9pt;"> 选择题目类型，点击“开始测试”。 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 预期结果 </td> 
 <td colspan="4" style="width:369.9pt;"> 提示创建成功并跳转考试列表 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 测试结果 </td> 
 <td colspan="4" style="width:369.9pt;"> 与预期结果相同，测试通过 </td> 
 </tr> 
 </tbody> 
</table>

表5-3 添加题目的签到测试用例

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 功能模块 </td> 
 <td colspan="2" style="width:148.55pt;"> 添加题目 </td> 
 <td style="background-color:#d9d9d9;width:67.6pt;"> 功能点 </td> 
 <td style="width:153.75pt;"> 题目上传 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 用例编号 </td> 
 <td style="width:71.75pt;"> 1.3 </td> 
 <td style="background-color:#d9d9d9;width:76.8pt;"> 用例说明 </td> 
 <td colspan="2" style="width:221.35pt;"> 写入题目和选项 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 前置条件 </td> 
 <td colspan="4" style="width:369.9pt;"> 教师已经登录系统，并进入到“签到”页面 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 输入 </td> 
 <td colspan="4" style="width:369.9pt;"> 在题目框输入“已知文法G[]：S→eT|RT &nbsp;T→DR|ɛ &nbsp;RdR|ɛ &nbsp;D→a|bd 求FIRST(S)=( )。” 在选项ABCD中分别写入“{e}”、“{e,d,a,b}”、“{e,d}”、“{e,d,a,b,ɛ}”, 点击“上传”。 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 预期结果 </td> 
 <td colspan="4" style="width:369.9pt;"> 提示上传完成 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d9d9d9;width:70.85pt;"> 测试结果 </td> 
 <td colspan="4" style="width:369.9pt;"> 与预期结果相同，测试通过 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.   兼容性测试

课堂教学辅助软件在不同的手机下，可能会有些兼容性问题，可能某些手机正常，某些手机不正常，我们应该当用一些不同版本的手机进行兼容性测试。具体测试过程及结果如表5-5所示。

表5-5 手机兼容性测试

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#d9d9d9;width:141.75pt;"> 浏览器 </td> 
 <td style="background-color:#d9d9d9;width:170.05pt;"> 测试过程描述 </td> 
 <td style="background-color:#d9d9d9;width:127.55pt;"> 测试结果 </td> 
 </tr> 
 <tr> 
 <td style="width:141.75pt;"> 360极速浏览器 （Windows 10） </td> 
 <td style="width:170.05pt;"> 打开网站，使用自我测试功能 </td> 
 <td style="width:127.55pt;"> 页面样式显示正常，有卡顿 </td> 
 </tr> 
 <tr> 
 <td style="width:141.75pt;"> edge（Windows 10） </td> 
 <td style="width:170.05pt;"> 打开网站，使用添加题目功能 </td> 
 <td style="width:127.55pt;"> 页面样式显示正常 </td> 
 </tr> 
 <tr> 
 <td style="width:141.75pt;"> chrome（Windows 10） </td> 
 <td style="width:170.05pt;"> 打开网站，浏览网站内容 </td> 
 <td style="width:127.55pt;"> 页面样式显示正常 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.   系统测试总结

通过对该系统网站整体功能性、兼容性等方面的测试，确定已经满足现阶段使用的基本要求，可以投入使用。但后期还需要优化代码。使用该系统时，推荐用户使用主流系统版本访问本系统，性能太差的手机使用的时候会有些卡顿。

1.   结论

本文介绍了单一科目学习网站的设计与实现过程，通过分析传统课堂教学的现状得出所在的问题，考虑解决这些问题的办法，以网站的形式呈现，利用Java、Spring Boot、Vue.js、MySQL数据库等技术实现网页设计和开发。

开发过程中首先对用户群体的需求进行调研，初步构建系统大致布局，然后向老师咨询了解并进一步确定编译原理学习需求，明晰系统的功能点，画出系统用例图，然后根据系统用例图进行了总体设计，梳理实体之间的关系，设计并创建基本数据库表，画出功能模块的用户用例图，并对系统功能进行详细设计。本系统已经完成了基本的登录注册页面、我的信息页面和自测页面。

经过一系列的测试，结果表明此类教学网站有着较好的操作性、拓展性，具有很好的实用价值和推广价值，能够满足自学需求。但是系统还存在着在线用户较多时，系统响应速度减慢；考试只能上传选择题，这些缺陷将会在今后的学习和工作中进行研究和改进。

## 谢 辞 ##

经过这一阶段的学习和努力，我的毕业论文《编译原理教学网站的设计与实现》终于完成了，这意味着我的大学生活很快就要结束了。

衷心感谢我的导师郝扬老师，她给予了很多的帮助和建议，导师的项目经验和知识面非常的广泛，对我的作品的需求分析、技术选型和技术设计等多方面都给出了指导，使得本系统能够成功实现和论文的顺利完成，

我的学习和思想上都比刚来学校的时候有了很大的变化。而这些变化除了自己的成长，这跟老师们和同学们的关怀和帮助是少不了的。借这里，我向所有给与我帮助和教诲的老师们和同学们表示感谢，感谢老师们和同学们的关心关怀和帮助。

仓促的时间和自己本身专业知识水平的不够，整个毕业设计肯定存在尚未发现和已发现的一些缺点和错误。恳请阅读此篇论文的老师、同学，请多指教，不胜感激！

## 参考文献 ##

\[1\] 梁燕来,程裕强. Java面向对象程序设计\[M\].人民邮电出版社:, 201304.320.

\[2\] 邱威. 基于Java Web的学生考勤系统设计与实现\[D\].湖南大学,2018.

\[3\] 蒋凌志.Java程序设计在线考试系统的开发\[J\].电脑知识与技术，2019,15（07）:142-144.

\[4\] 吴荣珍.基于JAVA的高职院校人事管理系统设计与实现\[J\].软件导刊，2019,18（01）:116-118+123.

\[5\] 张树栋. 基于HTML5和Node.js的高校教学辅助系统研究与实现\[D\].山东师范大学,2018.

\[6\] 曹莲. 基于微信的课堂教学辅助系统的设计与实现\[D\].华中科技大学,2016.

\[7\] 纪彦旭. 基于微信平台的教学系统的设计与实现\[D\].湖北工业大学,2018.

\[8\] 王超. 基于移动终端的课堂辅助教学系统的设计与实现\[D\].湖南科技大学,2017.

\[9\] 陈陆扬. Vue.js前端开发快速入门与专业应用\[M\].人民邮电出版社:, 201702.207.

\[10\] 杨婷. 基于模块化的前端开发框架的研究与实现\[D\].北京邮电大学,2017.

\[11\] 肖睿,程宁,田崇峰,金志雄,杜毅. MySQL数据库应用技术及实战\[M\].人民邮电出版社:, 201801.177.

\[12\] Felipe Gutierrez. Pro Spring Boot 2\[M\].Apress, Berkeley, CA:2019-01-01.

**请关注点赞+私信博主，免费领取项目源码**

[Struts]: https://so.csdn.net/so/search?q=Struts&spm=1001.2101.3001.7020
[95c0c61d7aff4d919c1dc52f9091a4bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/96c19aef14a245c585f40aa6f5373d65.png
[3acc875b4be24bbcaab5d50cebab4f17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f0395153e32042bb9aabf8da48f05360.png
[6e73e25213d2485988bebf10822dda81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/82676aa70ff341ec838a9f5120a894e6.png
[ef43cd4995f044f7b26044d40917221c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/65c8aa13ff614dc3a10ae6f02261e1b2.png
[b96bc0e545c642dfb42c2c2f053ceb00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/70ac9e2cc6cf4a20afe7cf9c258cddf1.png
[0279b733cace41d78cee452eacd0e94e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b7ccf223be384d32aa993e9a1f4b8885.png
[3255b50b1faa4a968c8e2f3bba0cc33a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e9b53c40a2944287994599152b73f442.png
[c0462c4c29144c8b8f6edd98ada8ccde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/61bdde8684f6457ea63b7bf7b2842e13.png
[c5ef5b7be8a64004b1ca1e2021e20382.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1ca1f20faed94c3187cfe26f9ba42ba2.png
[2834ddd4f1d74b2ab39ee72a7b24760f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/bea0f20cb2934f9d97e73b619470a5da.png