JSP在线考试系统_数据模型视图考试系统-程序员宅基地

技术标签: JSP  mySQL  

JSP在线考试系统

第一章 绪论

1.1.课题的背景及研究意义
在我们教育快速发展的今天,比较传统的纸质考试已经过时了,因为这不仅需要大量的人力物力去打印试卷、还要去批改试卷,要花费大量的时间。更关键的是,在远程的教学模式中,不利于安排统一的考试,注定要被时代所淘汰。为了突破传统的考试模式,为了新形势的有效发展,为了缓解老师们的工作压力,实现基于网络的在线考试,使考试可以在任何时间、地点进行,不受地域的约束。
1.2.本文的研究内容
本文的研究内容有:管理考试题库、管理考生资料、随机抽题组卷、在线考试、查询成绩等。主要介绍了系统的分析,设计开发的全部过程,通过对系统功能的分析、程序操作控制图设计、对系统设计过程进行详细的介绍等等。本课题所研发的系统,采用软件工程的思想,基于多层次系统结构进行开发。数据层设计包括数据库onlineTest的创建等。
1.3.预期设计目标
网上考试系统提供的是一种面向较广区域的用户群系统。它需要自身能够提供给不同区域的用户进行方便的访问以及足够的安全性以及大量的考试信息。用户只需要拥有一台计算机,并能方便地接入网络,便可实现在线的、实时性的在线考试服务。用户登陆系统主页,就可以根据用户权限登录到不同的主页面,这样不同的用户就可以享受到不同的服务。
在线考试系统实现考试的无纸化管理,实现随机抽题组卷、在线考试、题库管理等功能。系统分前台和后台两个部分,前台部分主要提供考试功能,从题库中随机抽取题目并输出到窗口让考生答题;后台部分则用于考试管理员管理相关考试数据,包括对考题的管理和考生信息的管理等。

第二章 系统需求分析与设计

2.1.系统的作用与模块

2.1.1.系统的作用
传统纸质考试模式下,首先需要打印考试试卷,然后组织考试,最后还需要教师来阅卷。这一切工作都非常的浪费时间。但是在线考试系统能够使学生在计算机上面完成考生答题、自动交卷、电脑阅卷、能够自己查询成绩等功能,充分利用了网络的优势,彻底弥补了以往考试模式中的弊端,真正的可以无纸化考试了。
2.1.2.系统的模块
(1)考生:随机组卷、开始答题(记录时间)、查看错题、查看成绩、重新考试
(2)管理员:对考题的管理(增删改查)、对考生信息的管理(增删改查)、查看考生成绩。
(3)考生、管理员都可以注册、登陆、退出。

2.2.系统的分析

2.2.1.系统的要求及目的
(1)要求
功能:满足考生能在线进行考试、管理员能管理题库和管理学生信息等操作。
(2)目的
①物力、财力的减少;
②大大提升了阅卷效率;
③更好地管理考生信息;
2.2.2.系统的架构分析
该项目的总体的设计是MVC框架模式,由控制层、视图层、业务层构成。这种常用的开发模式,总体上来说,对于一个开发者是难度不大的。这样的设计对系统的总体层次也划分的非常清楚,设计是符合要求的。
2.2.3.系统的技术分析
因为在线考试系统的角色身份仅仅只有两个对象,具体说是学生、教师。所以这个在线考试系统可以采用比较小型的数据库onlineTest和比较简单的结构来设计。在科学技术快速发展的时代,当今技术发展的程度已经足够设计这样一个功能并不算复杂的在线考试系统了。
本系统属于小型系统,编译工具采用myEclipse2019、服务器采用Tomcat9.0、数据库onlineTest采用MySQL8.0,所用工具都是目前最新的,功能强大,结构较复杂,技术难度中等。

2.3.考试系统的功能

2.3.1.功能结构图
在这里插入图片描述
2.3.2.业务流程图
(1)考生考试
在这里插入图片描述
(2)管理员管理信息
在这里插入图片描述

2.4.数据库的设计

2.4.1.数据库
数据库名称:testOnline;

数据库字符集编码:gb2312;
2.4.2.数据表
(1)考生信息表tb_student
| | | | | |
|–|--| |–|--|
| | |

(2)管理员信息表tb_admin

字段 类型与长度 约束 说明
name varchar(10) 允许空 姓名
account varchar(10) 主键 账号
password varchar(20) 不允许空 密码

(3)选择题表tb_choice
字段 类型与长度 约束 说明
titleId varchar(10) 主键 题目序号
titleStem varchar(50) 允许空 选择题题干
optionA varchar(50) 允许空 选项A
optionB varchar(50) 允许空 选项B
optionC varchar(50) 允许空 选项C
optionD varchar(50) 允许空 选项D
answerRight varchar(50) 允许空 正确答案
answerExplain varchar(100) 允许空 答案解释

(4)
填空题表tb_completion
字段 类型与长度 约束 说明
titleId varchar(10) 主键 题目序号
titleStem varchar(50) 允许空 填空题题题干
answerRight varchar(50) 允许空 正确答案
answerExplain varchar(100) 允许空 答案解释

(5)学生成绩表tb_score
字段 类型与长度 约束 说明
account varchar(10) 主键 账号
cho_score float(10) 允许空 选择题分数
com_score float(10) 允许空 填空题分数
tot_score float(20) 允许空 总分

2.5.本章小结
本章首先详细分析了系统的功能、目的以及各种角色的功能,然后又对数据库onlineTest进行了较为详细的介绍,使读者对整个考试系统的结构有了一个全面、详细、清楚的认识,为接下来各个模块代码的实现奠定了较为良好的基础。

第三章 系统详细设计与实现
3.1.视图的设计
3.1.1.注册页面
(1)考生注册页面(registerStu.jsp)

(2)管理员注册页面(registerAdm.jsp)

3.1.2.登录页面
(1)考生登陆(loginStu.jsp)、管理员登陆(loginAdm.jsp)

3.1.3.管理员页面
(1)题库管理 (manageQuestion.jsp)

(2)考生信息管理(manageStudent.jsp)

(3)退出登陆(admQuit.jsp)

3.1.4.学生页面
(1)参加考试(takeTest.jsp)

(2)查看错题(visitWrong.jsp)

(3)查询成绩(queryResult.jsp)

(4)退出登陆(stuQuit.jsp)

3.2.数据模型的设计
3.2.1.角色数据模型
(1)考生数据模型(StuModel.java)

String name;//姓名
String major;//专业
String grade;//班级
String account;//账号
String password;//密码
String backNews=“请输入信息”;//注册反馈
boolean success=false;//布尔值初始为false

(2)管理员数据模型(AdmModel.java)
String name;//姓名
String account;//账号
String password;//密码
String backNews="";//注册反馈
boolean success=false;//布尔值初始为false

(3)登陆数据模型(LoginModel.java)
String account;//账号
String password;//密码
String backNews="";//登陆反馈
boolean success=false;//布尔值初始为false
3.2.2.题型数据模型

(1)选择题数据模型(ChoiceModel.java)
String titleId;//题目序号
String titleStem;//选择题题干
String optionA;//选项A
String optionB;//选项B
String optionC;//选项Java程序设计
String optionD;//选项D
String answerRight;//正确答案
String answerExplain;//答案解释
String backNews="";//注册反馈
boolean success=false;//布尔值初始为false

(2)填空题数据模型(CompletionModel.java)
String titleId;//题目序号
String titleStem;//选择题题干
String answerRight;//正确答案
String answerExplain;//答案解释
String backNews="";//存放反馈信息
boolean success=false;//布尔值初始为false
3.2.3.考试数据模型
(1)成绩数据模型(ScoreModel.java)
Stirng account;//账号
String name;//姓名
String score;//成绩
String backNews="";//存放反馈信息
boolean success=false;//布尔值初始为false

(2)考试信息数据模型(TestBean.java)
String id; //存放考号
String titleId; //存放题号
float score;//存放分数
String questions;//存放题目
int textAmount; //题目数量
String choiceA,choiceB,choiceC,choiceD;//存放选择
String answer; //存放用户给出的答案
String correctAnswer; //存放正确答案
String explainAnswer;//存放答案解释
String mess; //存放提示信息
String backNews; //存放反馈
boolean success=false;//存放布尔值
String [] wrongIitleId=new String[15]; //存放错题题号的数组,长度为定义的考题数量
String [] wrongAnswer=new String[15];//存放考生错误答案的数组,长度为定义的考题数量
int wrongNumber;//存放错题数量
3.3.控制器的设计
3.3.1.实现登陆和退出
(1)实现考生、管理员的注册
(HandleStuRegister.java、HandleAdmRegister.java)

算法设计:
将registerStu.jsp、registerAdm.jsp的表单数据提交给HandleStuRegister.java、HandleAdmRegister.java,连接数据库onlineTestonlineTest,进行处理,把数据存储到数据表tb_student、tb_admin,然后把注册结果反馈到registerStu.jsp、registerAdm.jsp。
核心代码:

(2)实现考生、管理员的登陆
(HandleStuLogin.java、HandleAdmLogin.java)

算法设计:
考生的登陆:将loginStu.jsp的表单数据提交给HandleStuLogin.java,获取表单数据参数,连接数据库onlineTest,判断登陆信息是否填写完整,不完整则通过数据模型LoginModel.java存储反馈信息“请先填写完整登陆信息”,完整则查询数据表tb_student,查询结果放到结果集对象rs里面,利用rs.next()方法判断rs是否为空,不为空则将“登陆成功”、登陆状态布尔值、账号信息存储到数据模型LoginModel.java里面,转发给/stu/indexStu.jsp,为空则将“登陆失败”的原因、登陆状态布尔值、账号信息存储到数据模型LoginModel.java里面,转发给loginStu.jsp。
管理员的登陆:设计思路参考考生的登陆。
核心代码:

(3)实现考生、管理员的退出登陆
(HandleStuExit.java、HandleStuExit.java)
算法设计:
将登陆信息LoginModel.java的javaBean对象存储在Session 对象中,Session 对象存储特定用户会话所需的属性及配置信息,利用session.invalidate()销毁用户的session对象,然后返回主页。
核心代码:

3.3.2.实现信息的管理
(1)题库、考生信息的添加
(AddQuestion.java、AddCompletion.java、AddStuMsg.java)
算法设计:
将从jsp视图页面中用户数据的表单数据,如题干、选项等信息通过post/get的方式提交给java控制器进行处理,在doPost()或者doGet方法中获取参数的数据,从而连接数据库onlineTest,将数据添加到对应的数据表中。
核心代码:

(2)题库、考生信息的删除
(DropQuestion.java、DropCompletion.java、DropStuMsg.java)

算法设计:
用户在jsp视图的表单页面输入“题目序号、考生账号”等信息,以post的方式发送,在java控制器的doPost方法里接收参数,连接数据库onlineTest,根据参数进行查询,将查询结果存储在相应的数据模型javaBean对象中,转发回原来的jsp视图显示出来,在视图页面下方有提示用户是否删除该查询到的数据,点击“确认”即可将删除信息以get的方式发送到相应的控制器,在控制器的doGet()方法中接收参数,连接数据库onlineTest,根据参数的信息进行删除操作。
核心代码:

(3)题库、考生信息的修改
(AlterQuestion.java、AlterCompletion.java、AlterStuMsg.java)
 算法设计:
用户在jsp视图的表单页面输入“题目序号、考生账号”等信息,以post的方式发送,在java控制器的doPost方法里接收参数,连接数据库onlineTest,根据参数进行查询,将查询结果存储在相应的数据模型javaBean对象中,转发回原来的jsp视图显示出来,在视图页面下方有重新修改对应信息的各个选项,点击“确认”即可将修改信息以get的方式发送到相应的控制器,在控制器的doGet()方法中接收参数,连接数据库onlineTest,根据参数的信息进行修改操作。
核心代码:

(4)题库、考生信息的查看
(ShowQuestion.java、ShowCompletion.java、ShowStuMsg.java)
 算法设计:
在相应的jsp视图以程序片的方式嵌入java代码,连接到数据库onlineTest,利用查询语句查询相应的数据表的所有信息,使用out.print()方法在视图显示出来。
核心代码:

(5)考生成绩的查看(showStuSore.jsp)
算法设计:
在相应的jsp视图以程序片的方式嵌入java代码,连接到数据库onlineTest,利用查询语句查询相应的数据表的所有信息,使用out.print()方法在视图显示出来。
核心代码:

3.3.3.实现考生的考试
(1)参加考试(takeTest.jsp)

算法设计:
有两个控制器ReadTestServlet.java和EndTestServlet.java,ReadTestServlet.java负责创建名字是readTestServlet的servlet。 readTestservlet负责从数据库的tb_choice表中读入试题存放到id是 testbean的Javabean数据模型中,然后请求 takeTest.jsp显示 test Bean中的数据。另外, readTestServlet还接收用户提交的答案,并与tb_choice表中的答案进行比较,给出用户的得分。
EndTestServlet.java负责创建名字是endTestServlet的 servlet,用户单击“交卷”按钮,该 servlet负责将用户的名和分数添加到数据库。
核心代码:

(2)查看错题(visitWrong.jsp)
算法设计
考试信息数据模型(TestBean.java)中设置存放错题题号的数组、存放考生错误答案的数组、存放错题数量,在控制器判断ReadTestServlet.java中判断用户输入的答案与标准答案是否一致,不一致则将错题的信息,如题号,答案,数量存放到数据模型TestBean的对象testBean中。在视图visitWrong.jsp中取出testBean的错题信息,展示在页面上。
核心代码:

(3)查询成绩(queryResult.jsp)
算法设计
有两个控制器ReadTestServlet.java和EndTestServlet.java,在查询成绩模块中,控制器ReadTestServlet.java负责使用equals()方法匹配用户输入的答案与标准答案的出入,进行分数的累计,将有关考试信息的数据存入testbean中,控制器EndTestServlet.java负责将用户提交考卷后的考试账号,在连接数据库online的基础上,将testbean有关考试信息的数据取出,存放到数据表tb_score中。
核心代码:

3.4.本章小结
本章主要对在线考试系统的数据模型、视图和控制器进行了详细的介绍。使读者对在线考试系统有了更加深刻的理解。

第四章 系统测试
4.1.测试目的
系统测试的目的是为了发现基于JSP的在线考试系统中存在的毛病,再试图查找原因来解决这些毛病。目的是为了在线考试系统能正常运行的必备手段,系统测试中需要解决的首要问题是为了证明软件能正常使用、考试系统的需求分析是否完整以及考试系统中己经存在的毛病,测试环节能大幅度改善考试系统的品质。然后系统测试需要调试。调试的功能是要确认所编的程序是否有问题,并找出原因,对症下药。最后系统测试需要对考试系统进行可靠性的测试。可靠性是考试系统能正常使用的基础。
4.2.测试的两种方法
4.2.1.黑盒测试法
把基于JSP的在线考试系统视为一个黑匣子,忽略系统的内部一切构造,对其进行功能测验,这种方法只测试考试系统的功能是否满足需求分析和功能模块分析所描述的要求。
4.2.2.白盒测试法
又称结构测试法,是把基于JSP的在线考试系统视为一个白盒子里面的系统换句话说:就是能够知道其中内部的一切结构,白盒测试法依照系统逻辑进行测验,检查系统是否能够按照先前的准则进行正常工作。
4.3.测试实例
4.3.1.系统登录测试
(1)登陆成功

分析:当输入的登陆信息没有错误,即可登陆成功。
(2)登陆失败

分析:当输入的登陆信息有错误,有错误信息提示。
4.3.2.学生模块测试
学生模块测试的步骤:进入系统后,学生模块JSP页面能正常工作,点击链接能正常跳转到对应的JSP页面,然后可以进行在线考试。
表4.2学生模块测试
测试内容 操作步骤
期望结果 测试结果

考试功能测试
点击考试 跳转至试题页面,能进行测试。 跳转至试题页面,能进行测试。
答题完毕,点击
提提交考卷。 反馈信息出现“提交成功” 反馈信息出现“提交成功”
点击“查看错题” 显示出所有的错题信息 显示出所有的错题信息
点击“查看成绩” 显示出本次考试的账号和信息 显示出本次考试的账号和信息
点击“重新考试”
返回“点击考试”页面 返回“点击考试”页面

4.3.3.管理员模块测试
教师模块测试的步骤:进入系统后,管理员模块JSP页面能正常工作,点击链接能正常跳转到对应的JSP页面,试题管理、考生信息管理等功能能正常运行。

(1)试题管理测试
测试内容 操作步骤
期望结果 测试结果

试题管理
功能测试
新增考题 数据表显示新增的考题 数据表显示新增的考题
查找、修改考题 数据表对应的考题修改成功 数据表对应的考题修改成功
查找、删除考题 数据表对应的考题删除成功 数据表对应的考题删除成功
显示所有考题 显示数据表的所有考题 显示数据表的所有考题

(2)考生信息管理
测试内容 操作步骤
期望结果 测试结果

考生信息管理
功能测试
新增考生信息 数据表显示新增的考生信息 数据表显示新增的考生信息
查找、修改考生信息 数据表对应的考生信息修改成功 数据表对应的考生信息修改成功
查找、删除考生信息 数据表对应的考生信息删除成功 数据表对应的考生信息删除成功
显示所有考生信息 显示数据表的所有考生信息 显示数据表的所有考生信息
查看考生考生成绩 显示数据表的已参加考试的考生的成绩信息 显示数据表的已参加考试的考生的成绩信息

4.4.本章小结
本章节讲了系统测验的目标和测试方法及本系统的主要模块测试实例,从系统测验后的报告能分析出来在线考试系统可以正常使用,但是这也并不能说明考试系统是完美而没有毛病的。对考试系统进行测试,让我有了更多的软件调试经验,对在线考试系统有了更加清楚的认识,编程能力也有了很大的提高。

第五章 总结与展望
5.1.总结
通过本次课程设计,我掌握了很多专业知识和编程知识,包括Java编程语言,JSP编程语言,JavaBean,Servlet,Tomcat服务器,myeclipse开发环境,MySQL数据库等,同时也积累了我许许多多的软件设计经验,对我的研究方向有了很深刻的理解,并在实际的操作过程中懂得怎样将它们发挥在实例之中,开发功能非常完善的在线考试系统。
在实践中,我学习到了基于JSP在线考试系统的核心思想及研发的完整流程。设计之前对系统需要实现哪些功能必须进行详细的需求分析以及系统有哪几个角色进行划分,考试系统有几个模块,考试系统的每个功能怎样去设计才能更好;需求分析之后,需要用到计算机的编程知识,从上到下,把问题逐渐细化,为实现每个模块奠定了良好的基础。

5.2.展望
在线考试系统未来的研究方向必然具有智能化特点。主要有以下四点特点:
1)智能化考试系统根据算法,结合试卷难度以及区分度,实现抽题组卷。
2)由专家统对学生试卷进行自动评判,实现智能化评卷。
3)智能化考试系统从考试结果中挖掘出信息并进行智能化分析,为教师提供有用信息。
4)考试系统中实现模拟真实的考试环境以及操作过程。

参考文献
[1]耿祥义,张跃平.JSP使用教程(第三版)[M].北京:清华大学出版社,2015.01.
[2]何元清,魏哲. MySQL 数据库程序设计[M].北京:中国铁道出版社, 2018.01.
[3]耿祥义. Java大学实用教程(第4版)[M]. 北京:电子工业出版社, 2017.03.
[4]天津滨海迅腾科技集团有限公司. 基于MVC的Java Web项目实战[M].天津:南开大学出版社, 2017.01.

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sc_942344134/article/details/103291023

智能推荐

EBS R12基本概念与应用基础-程序员宅基地

文章浏览阅读1.8k次。摘自: [ORACLE EBS 入门及供应链核心系统详解教程] (书籍)EBS基础功能架构(13个核心模块,业财一体化)业务运营管理,价值增值财务会计管理,价值实现应用架构Finance财务,资金流Accounting财务管理Bisuness业务,实物流核心业务,与财务高度集成;PUR、INV、制造、订单履行等间接业务,or专业业务,为核心业务提供支持;HR..._ebs r12

Java中Date和Timestamp的区别_java date timestamp区别-程序员宅基地

文章浏览阅读838次。转载:https://blog.csdn.net/ccecwg/article/details/39546307_java date timestamp区别

如何用原生js封装一个类似jq的选择器_原声js实现jq元素选择器-程序员宅基地

文章浏览阅读1.4k次。1、我们先了解一下原生js中的选择器ID选择器(在整个文档中获取id为xxx的元素)document.getElementId([ID]);类名选择器(在整个文档中或者在指定上下文中获取类名为xxx的元素)document.getElementsByClassName(' ');[context].getElementsByClassName(' ');标签名选择器(在整个文档中或者..._原声js实现jq元素选择器

Hive中partition by和distribute by区别_partition by distribute by-程序员宅基地

文章浏览阅读1.2k次,点赞3次,收藏4次。通常查询时会对整个数据库查询,而这带来了大量的开销,因此引入了partition的概念,在建表的时候通过设置partition的字段, 会根据该字段对数据分区存放,更具体的说是存放在不同的文件夹,这样通过指定设置Partition的字段条件查询时可以减少大量的开销。1)partition by [key..] order by [key..]只能在窗口函数中使用,而distribute by [key...] sort by [key...]在窗口函数和select中都可以使用。_partition by distribute by

游标(cursor )是什么?_c# cursor-程序员宅基地

文章浏览阅读7.3k次。Private SQL Area A private SQL area holds information about a parsed SQLstatement and other session-specific information for processing. When a serverprocess executes SQL or PL/SQL code, the process_c# cursor

listview使用的一些心得_listview的使用——购物商城实验心得-程序员宅基地

文章浏览阅读616次。近日在用ListView中的一些注意点,和公用代码,整理如下1.ListView.Items.Clear而不是ListView.Clear一般如果ListView是动态填充的,我们在填充之前都会先进行清理。但需要注意一下,我们是清理Items,如果去直接Clear整个ListView,就连原先定义好的列都没有了2.给ListView绑定数据ListView并不能直接_listview的使用——购物商城实验心得

随便推点

java 注解处理器的作用_深入理解Java:注解(Annotation)--注解处理器-程序员宅基地

文章浏览阅读110次。如果没有用来读取注解的方法和工作,那么注解也就不会比注释更有用处了。使用注解的过程中,很重要的一部分就是创建于使用注解处理器。Java SE5扩展了反射机制的API,以帮助程序员快速的构造自定义注解处理器。注解处理器类库(java.lang.reflect.AnnotatedElement):Java使用Annotation接口来代表程序元素前面的注解,该接口是所有Annotation类型的父接口..._java注解处理器作用

全国职业技能大赛高职组(最新职业院校技能大赛_大数据应用开发2023国赛样题解析-模块C:实时数据处理-任务二:实时指标计算)_大数据 国赛 样题-程序员宅基地

文章浏览阅读1.8k次,点赞27次,收藏28次。全国职业技能大赛高职组(最新职业院校技能大赛_大数据应用开发样题解析-模块B:数据采集-任务一:离线数据采集-程序员宅基地。_大数据 国赛 样题

ssm+mysql+微信小程序疫情防控小程序-计算机毕业设计源码73691_ssm+微信小程序-程序员宅基地

文章浏览阅读926次。本系统分为管理员和注册用户两个角色,主要有疫情新闻、疫情案例介绍、健康信息申报、行程信息申报、就医流程介绍、举报、在线留言、用户管理、信息统计等模块。用户需要先注册成为会员,成功登录后,可以查看网站发布的疫情新闻,可以查看疫情相关病例介绍,有助于疫情防范,还可以查看网站发布的重大疫情案例,了解疫情的发展状况,出行时候好做好防护,同时通过网站可以上报健康信息,以及上报行程信息,方便社区了解自己的出行情况;网站还发布了疫情状态下的就医流程,方便大家就医时候做好准备;同时网站还提供了举报功能,如果发现外来人员或_ssm+微信小程序

Linux 操作系统 022-串口/U盘/共享文件夹-程序员宅基地

文章浏览阅读296次,点赞3次,收藏9次。本节关键字:Linux、centos、串口、U盘、共享文件夹本节相关指令:echo、cat、mkdir、mount

解密C++新特性:内联函数、auto和基于范围的for循环-程序员宅基地

文章浏览阅读1.3k次,点赞45次,收藏29次。本篇主题为: 解密C++新特性:内联函数、auto关键字和基于范围的for循环。

上岸整理:2023前端面试题-vue,小程序,js,css_今年的前端面试难不难-程序员宅基地

文章浏览阅读774次,点赞4次,收藏11次。1、浏览器常见的报错信息与含义2、304与204的区别,http缓存,强缓存,协商缓存3、浏览器从输入地址到渲染,经历了什么状态?4、vue的界面渲染,经过哪些过程(生命周期)5、三次握手,四次挥手6、重排与重绘7、用css实现一个三角形8、常见的flex布局,有哪些功能9、用css实现一个水平垂直居中10、null与undefined的区别11、虚拟dom12、深拷贝与浅拷贝13、es6新增的功能15、async await 与promise。_今年的前端面试难不难