AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

在线答卷系统的前端设计与数据库系统的设计与实现

2022-05-18 679
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如果要你实现一个在线的答题系统，你能想到它该具有哪些功能？当我接到这样一个需求的时候，脑海中立马能想到的就是它有录入题库的功能，创建试卷后可以从题库选择试题，并且可以针对试题进行分数的设置和排序。试卷发布后，用户通过指定的链接进入到试卷页面进行答题，答题完提交后，试卷由指定人进行评分。另外可能需要一个页面记录自己的答卷记录。

如果要你实现一个在线的答题系统，你能想到它该具有哪些功能？当我接到这样一个需求的时候，脑海中立马能想到的就是它有录入题库的功能，创建试卷后可以从题库选择试题，并且可以针对试题进行分数的设置和排序。试卷发布后，用户通过指定的链接进入到试卷页面进行答题，答题完提交后，试卷由指定人进行评分。另外可能需要一个页面记录自己的答卷记录。初步设想罗列基本功能后，然后我们针对每个功能进行细化：


1） 题库管理

试题列表，可以根据试题类型或者问题描述进行筛选，列表中展示了试题的信息，包括试题类型、题目描述、答案、选择题的话选项列表、答案解析、额外的附件等。


2）试卷管理

试卷列表，展示试卷的相关信息：试卷名称、总分、及格分、考试最大时长、阅卷人、试题数量和发布状态切换按钮等，操作列提供编辑、编辑试题、考试统计按钮。


3）试卷试题编辑

进入到试卷的信息界面，侧边栏除了展示试卷的基本信息，根据题型显示题号的信息，点击题号可快速定位到改试题，试题列表区域根据题型显示所有的试题，在题型栏有添加试题和从题库选择的按钮，在试题信息栏有给题目排序和设置分数按钮。


4）在线答题

答题人通过特定携带有试卷信息的链接，进入到试卷的答题界面，左侧为题号的按钮进行切换试题，右侧为题目的信息和答案提交区域，和题目上下切换按钮，在左侧的上方有试题答题时间的倒计时框，时间倒数完成会有强制提交的信息弹出。


5）评分功能

由试卷的指定人可看到提交的答卷信息，客观题可直接通过答案对比给出得分，主观题需要由阅卷人评定分数，最后计算出总得分。


6）考试记录

显示答卷人所有的答卷记录，如果该人也是阅卷人可以查看自己相关的阅卷记录。

为什么要进行这样的功能细化？细化后我们可以根据罗列的详细功能进行数据库和表的字段设计。为了能较准确地设计出每个表的字段，一定要把功能清单列的尽可能地详细。


数据表设计图

通过一点一滴的查漏补缺，最终我们设计出与答卷系统相关的六张表，分别为试卷表、试题表、试卷和试题关联组成表、选择题选项表、试卷答题记录表、考试记录表

CREATE TABLE `sys_exam_paper` (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`training_id` INT DEFAULT NULL COMMENT '所属课程id',
`paper_name` varchar(8) DEFAULT NULL COMMENT '试卷类型（A,B,C）',
`marking_account` varchar(11) DEFAULT NULL COMMENT '阅卷人账户',
`total_score` DOUBLE DEFAULT NULL COMMENT '试卷分数',
`passing_score` DOUBLE DEFAULT NULL COMMENT '及格分数',
`exam_duration` DOUBLE DEFAULT NULL COMMENT '考试时间',
`state` TINYINT DEFAULT NULL COMMENT '试卷状态',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试卷表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_paper_question` (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`question_type` TINYINT DEFAULT NULL COMMENT '题目类型',
`question_title` TEXT DEFAULT NULL COMMENT '题干',
`document_location` VARCHAR(256) DEFAULT NULL COMMENT '题目附件',
`answer` TEXT DEFAULT NULL COMMENT '题目答案',
`analysis` TEXT DEFAULT NULL COMMENT '题目解析',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试题表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_composition` (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`paper_id` INT DEFAULT NULL COMMENT '试卷编号',
`question_id` INT DEFAULT NULL COMMENT '题目编号',
`question_order` INT DEFAULT NULL COMMENT '题目编号',
`score` DOUBLE DEFAULT NULL COMMENT '题目分值',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试卷和试题关联组成表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_question_choice`  (
`id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
`question_id` INT DEFAULT NULL COMMENT '所属题目id',
`choice_name` VARCHAR(8) DEFAULT NULL COMMENT '选项（A,B,C...）',
`choice_title` TEXT DEFAULT NULL COMMENT '选项描述',
`created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
`modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '选择题选项表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_answer_sheet`  (
 `id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
 `record_id` INT DEFAULT NULL COMMENT '考试记录编号',
 `question_id` INT DEFAULT NULL COMMENT '题目编号',
 `appendix_location` VARCHAR(256) DEFAULT NULL COMMENT '答题附件',
 `answer` TEXT DEFAULT NULL COMMENT '用户答案',
 `score` DOUBLE DEFAULT NULL COMMENT '用户得分',
 `created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
 `modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
 PRIMARY KEY (`id`) USING BTREE
) COMMENT = '试卷答题记录表' ROW_FORMAT = COMPACT;
CREATE TABLE `sys_exam_record`  (
 `id` INT NOT NULL AUTO_INCREMENT COMMENT '自动编号',
 `employee_account` VARCHAR(11) DEFAULT NULL COMMENT '考试用户账户',
 `duration` DOUBLE DEFAULT NULL COMMENT '考试时长',
 `paper_id` INT DEFAULT NULL COMMENT '考试试卷id',
 `score` DOUBLE DEFAULT NULL COMMENT '该试卷得分',
 `created_time` DATETIME DEFAULT NULL COMMENT '创建时间',
 `modified_time` DATETIME DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`id`) USING BTREE
) COMMENT = '考试记录表' ROW_FORMAT = COMPACT;

ET@~HX48PHE4))`10`O7[OP.png

完成了数据表的设计和功能清单之后，我们可以开始构思系统的界面了。作为前端程序员，我们直接选择一款成熟的UI框架，免去了原型的设计稿，就可以直接选用合适的组件进行页面的实现，这个过程就跟画师差不多，是一个根据自己的想象，用画笔（而程序员用的是代码）勾勒出实物的原型的过程。

下面是选用 Element UI 进行搭建的系统前端页面

题库管理界面

R8FD4)]JUH%NO9YD)B]N97C.png

试题创建和编辑界面

M4P]S6NNY7ZSO}~V)_B6O0S.png

试卷管理界面



网络异常，图片无法展示
|

AEV7~H)2%UVT0{[M(RTB%1U.png

试卷试题编辑界面

A[[)FNBTZPI5IE}DXVL$F82.png

考试统计界面

{Y(UX5(VKZUJ8CA4V7OLBSB.png

在线考试界面

BT5[_XBN[6$L69NMST9VTEO.png

答卷详情页面

$(%%D0CNCLT{4M{SUT8S$1X.png

接下来有了前端页面和设计好的数据库表，就可以进行后端接口的定义和实现了，这里省去后端接口的具体实现 ......


总结 ：软件的设计是一项复杂的工程，牵涉到方方面面，作为程序员如何从零到一实现一个系统的设计到落地。技术作为自己的看家本领，可能是最次要到，前期的产品逻辑和功能点是最考验我们的，这是考验一个程序员功力的时候。一个好的程序员往产品方面转的时候，需要刻意地去锻炼这方面的能力。


文章标签：
前端开发
程序员
数据库
关键词：
系统前端
前端数据库
系统前端数据库
timfan
目录
相关文章
优雅草央千澈
|
5天前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
优雅草央千澈
51 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
多客潇潇
|
18天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
56 3
DK方方
|
16天前
|
前端开发 搜索推荐 安全
陪玩系统架构设计陪玩系统前后端开发，陪玩前端设计是如何让人眼前一亮的?
陪玩系统的架构设计、前后端开发及前端设计是构建吸引用户、功能完善的平台关键。架构需考虑用户需求、技术选型、安全性等，确保稳定性和扩展性。前端可选用React、Vue或Uniapp，后端用Spring Boot或Django，数据库结合MySQL和MongoDB。功能涵盖用户管理、陪玩者管理、订单处理、智能匹配与通讯。安全性方面采用SSL加密和定期漏洞扫描。前端设计注重美观、易用及个性化推荐，提升用户体验和平台粘性。
DK方方
48 0
ZOMI酱
|
1月前
|
人工智能 自然语言处理 前端开发
【AI系统】LLVM 前端和优化层
本文介绍了 LLVM 编译器的核心概念——LLVM IR，并详细讲解了 LLVM 的前端 Clang 如何将 C、C++ 等高级语言代码转换为 LLVM IR。文章还探讨了编译过程中的词法分析、语法分析和语义分析三个关键步骤，以及 LLVM 优化层的 Pass 机制，包括分析 Pass 和转换 Pass 的作用及依赖关系。
ZOMI酱
34 3
众所周知
|
2月前
|
数据库连接 Go 数据库
Go语言中的错误注入与防御编程。错误注入通过模拟网络故障、数据库错误等，测试系统稳定性
本文探讨了Go语言中的错误注入与防御编程。错误注入通过模拟网络故障、数据库错误等，测试系统稳定性；防御编程则强调在编码时考虑各种错误情况，确保程序健壮性。文章详细介绍了这两种技术在Go语言中的实现方法及其重要性，旨在提升软件质量和可靠性。
众所周知
41 1
yuanzhengme
|
2月前
|
关系型数据库 MySQL Linux
Linux系统如何设置自启动服务在MySQL数据库启动后执行？
【10月更文挑战第25天】Linux系统如何设置自启动服务在MySQL数据库启动后执行？
yuanzhengme
139 3
东方睿赢
|
2月前
|
Java 数据库连接 数据库
深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销，从而显著提升系统性能
在Java应用开发中，数据库操作常成为性能瓶颈。本文通过问题解答形式，深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销，从而显著提升系统性能。文章介绍了连接池的优势、选择和使用方法，以及优化配置的技巧。
东方睿赢
50 1
想飞的雪糕
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇（六）：发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型，详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据，包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据，并使用 MiniMongo 实现实时数据同步。此外，还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组，实现数据的自动更新。
想飞的雪糕
53 2
小Lee
|
3月前
|
SQL 存储 关系型数据库
数据储存数据库管理系统（DBMS）
【10月更文挑战第11天】
小Lee
191 3
小Tomkk
|
3月前
|
存储 关系型数据库 MySQL
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取（pydicom 库使用）
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取（pydicom 库使用）
小Tomkk
48 2

热门文章

最新文章

  • 1
    MySQL数据库下载安装教程（Windows&Linux）
  • 2
    达梦数据库字段类型 varchar 转 text
  • 3
    Python处理数据库：MySQL与SQLite详解 | python小知识
  • 4
    使用 Spring Boot 执行数据库操作：全面指南
  • 5
    PolarDB 分布式版 V2.0，安全可靠的集中分布式一体化数据库管理软件
  • 6
    在云上轻松部署达梦数据库
  • 7
    活动实践 | 自建数据库迁移到云数据库
  • 8
    MySQL导入.sql文件后数据库乱码问题
  • 9
    数据库数据恢复—MYSQL数据库文件损坏的数据恢复案例
  • 10
    数据库数据恢复—ORACLE常见故障的数据恢复方案
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    90
  • 3
    使用Vue.js构建交互式前端的技术探索
    96
  • 4
    如何优化前端性能：关键步骤和技巧
    91
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    105
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    132
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    291
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    78
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    102
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    158

    • 相关课程

    更多
  • 淘系技术A类顶会论文-数据库领域-VLDB 2020
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 使用DAS实现数据库SQL优化
  • 自建数据库迁移到云数据库
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • 快速体验PolarDB开源数据库
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月