在线答题考试小程序源码系统(源码+数据库+文档) Uniapp

答题考试题库系统是一款开源的在线题库管理系统，旨在为编程爱好者、教育工作者及开发者提供便捷的题库管理与调用方案。系统支持通过后台界面向数据库添加题目，构建自定义题库，并通过 API 接口实现数据的外部调用。核心功能：题库管理：通过后台界面添加、编辑、删除题目，支持多题型管理。API 调用：通过/api.php接口以 GET/POST 方式获取题库数据，/tiku/index.php提供现成的 GE

linlinlove2

1255人浏览 · 2025-04-25 00:25:48

linlinlove2 · 2025-04-25 00:25:48 发布

一、系统概述

答题考试题库系统是一款开源的在线题库管理系统，旨在为编程爱好者、教育工作者及开发者提供便捷的题库管理与调用方案。系统支持通过后台界面向数据库添加题目，构建自定义题库，并通过 API 接口实现数据的外部调用。

核心功能：
题库管理：通过后台界面添加、编辑、删除题目，支持多题型管理。
API 调用：通过/api.php接口以 GET/POST 方式获取题库数据，/tiku/index.php提供现成的 GET 请求示例。
用户管理：后台管理端支持管理员账号创建与权限管理。

二、uniapp前端技术

系统安装文件

文件名	功能描述
`UniApp`	作为主要的开发框架，UniApp 允许使用 Vue.js 语法进行跨平台应用开发，能够同时发布到微信小程序、支付宝小程序、H5 等多个平台，极大地提高了开发效率和代码复用性。
`Vue.js`	采用 Vue.js 的响应式编程模型和组件化开发思想，实现页面的动态渲染和交互逻辑。通过 Vuex 进行状态管理，方便在不同组件之间共享数据。
`UI框架`	提供丰富的 UI 组件和样式，使界面设计更加美观和统一，同时提高了开发速度
`小程序 API`	利用微信小程序、支付宝小程序等平台提供的原生 API，实现用户登录、支付、分享、本地存储等功能，增强应用的功能性和用户体验。

后端技术数据库

文件名	生成方式	功能描述
`admin/db_connection.php`	安装过程自动生成	采用MySQL作为数据存储。利用其强大的关系型数据管理能力，设计合理的数据库表结构，存储用户信息、考试题目、考试记录等数据，并通过 SQL 语句进行数据的增删改查操作。

三、数据库设计

用户表（users）：存储用户的基本信息，包括用户名、密码、手机号码、邮箱等。
考试表（exams）：记录考试的相关信息，如考试名称、考试时间、考试说明、创建者等。
题目表（questions）：存储题目内容，包括题目类型（单选题、多选题、判断题等）、题目描述、选项、答案等。
考试题目关联表（exam_question_relation）：建立考试和题目之间的关联关系，确定每个考试包含哪些题目。
考试记录（exam_records）：记录用户参加考试的结果，包括用户 ID、考试 ID、得分、答题时间等。

<view class="grade-card" v-for="(item, index) in list" :key="index" @click="clickGrade(item)">
			<tui-card :title="{text: item.paper ? item.paper.title : '-', size: 30, color: '#7A7A7A'}" :tag="{text: item.cate ? item.cate.name : '-', size: 24}">
				<template v-slot:body>
					<view class="m-lr-20 grade-content text-sm">
						<view class="grid m-t-20">
							<view class="" style="width: 45%;">总分数：{{item.total_score}}分</view>
							<view>得分数：{{item.score}}分</view>
						</view>
						
						<view class="grid">
							<view style="width: 45%;">答对数：{{item.right_count}}题</view>
							<view>答错数：{{item.error_count}}题</view>
						</view>
						
						<view class="m-t-20" :class="is_pass ? ['text-green'] : ['text-red']">{{item.is_pass ? '及格' : '未及格'}}</view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="grade-time">
						<view class="grade-time-item" style="width: 69%;">
							时间：{{item.createtime|format_date}}
						</view>
						<view class="grade-time-item">
							用时：{{item.grade_time|format_second}}
						</view>
					</view>
					
				</template>
			</tui-card>
			
		</view>

示例调用文件

文件名	功能描述
`/cx/index.php`	提供题目查询页面示例，通过实现异步数据请求，展示 API 调用的实际应用场景。

在这里插入图片描述

<view class="tn-flex tn-flex-row-between tn-flex-col-between margin-top">
							<view v-if="item.status == 0"
								style="transform: translate(0rpx,6rpx);"
								class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold tn-bg-orange--light tn-color-orange"
							>未处理</view>
							<view v-if="item.status == 1"
								style="transform: translate(0rpx,6rpx);"
								class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold tn-bg-cyan--light tn-color-cyan"
							>已处理</view>
							<view v-if="item.status == 2"
								style="transform: translate(0rpx,6rpx);"
								class="justify-content-item tn-tag-content__item tn-margin-right-xs tn-round tn-text-sm tn-text-bold tn-bg-red--light tn-color-red"
							>忽略</view>

							<view class="justify-content-item tn-color-gray tn-text-center" style="padding-top: 15rpx;">
								<block>
									<view v-if="item.message">处理时间：{{ item.updatetime | format_date }}</view>
								</block>
							</view>
						</view>

在这里插入图片描述

四、接口设计

用户相关接口：
用户注册接口：接收用户注册信息，进行数据验证和存储。
用户登录接口：验证用户登录信息，生成并返回 JWT 令牌。
用户信息获取接口：根据 JWT 令牌获取用户的详细信息。
考试相关接口：
考试列表获取接口：返回所有考试的列表信息。
考试详情获取接口：根据考试 ID 获取考试的详细信息，包括题目列表。
考试创建接口：接收考试创建信息，创建新的考试。
题目相关接口：
题目列表获取接口：根据条件（如考试 ID、题目类型等）获取题目列表。
题目添加接口：接收题目信息，添加新的题目。
考试记录相关接口：
考试记录提交接口：接收用户的答题结果，保存考试记录并计算得分。
考试记录查询接口：根据用户 ID 或考试 ID 查询考试记录。

五、后台功能介绍

在这里插入图片描述

六、

<view class="wallpaper-shadow tn-margin tn-padding" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
			<view class="tn-flex tn-flex-col-top">
				<!-- 这个是图片形式，自己看需要去使用 -->
				<view class="" v-if="item.image">
					<view class="logo-pic">
						<view class="logo-image">
							<view class="" style="width: 100rpx;height: 100rpx;background-size: 100%;" :style="{backgroundImage:'url('+item.image+')'}">
							</view>
						</view>
					</view>
				</view>
				<view class="tn-padding-left-sm" style="width: 100%;">
					<view class="tn-flex tn-flex-row-between tn-flex-col-between">
						<view class="justify-content-item">
							<text class="tn-color-wallpaper tn-text-lg tn-text-bold">{{item.name}}</text>
						</view>
					</view>
					<view class="tn-padding-top-xs tn-text-ellipsis-2 sub-title">
						<block v-if="item.source == 'room' && item.room">
							<text class="tn-color-red">考场考试</text>
						</block>
						<block v-else-if="item.source == 'paper' && item.paper">
							<text class="tn-color-blue">试卷考试</text>
						</block>
						<block v-else>
							<text class="tn-color-gray">手动发放</text>
							<text class="tn-color-gray margin-left">得分：{{item.score}}</text>
						</block>
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
				<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray">
					<text class="tn-icon-time tn-padding-right-xs tn-padding-left-xs tn-text-df"></text>
					<text class="tn-text-sm">{{item.create_time_text}}</text>
				</view>

			</view>
		</view>