怎样实现调用数据库中的题库数据实现在线查题程序
要实现这样的一个程序分一下几个步骤
支持对接油猴
概览
- 肯定是需要建一个数据库然后新建一个数据表，表中字段包含题目和答案部分
- 封装后端接口连接到数据库，索引表中题目字段内容
- 后端封装好后就是前端
HTML页面连接后端接口 - 如果中途出现问题还得慢慢优化
实例
第一步新建数据库
CREATE TABLE questions (
id INT AUTO_INCREMENT PRIMARY KEY,
question TEXT NOT NULL,
answer TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
以上就是数据库结构
questions数据表名称question题目字段answer答案字段
第二步封装后端接口
- 连接数据库
// 数据库连接参数
$servername = "localhost";
$username = "question";
$password = "question";
$dbname = "question";
try {
// 创建数据库连接
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);以上是连接数据库部分
- 封装查询数据表中答案
// 获取用户输入的题目
$question = $_GET['question'] ?? '';
if ($question) {
// 查询数据库获取答案
$stmt = $conn->prepare("SELECT answer FROM questions WHERE question = :question LIMIT 1");
$stmt->bindParam(':question', $question);
$stmt->execute();
// 获取结果
$result = $stmt->fetch(PDO::FETCH_ASSOC);
if ($result) {
// 返回答案
echo json_encode(['answer' => $result['answer']]);
} else {
// 未找到对应的答案
echo json_encode(['error' => '未找到该题目的答案']);
}
} else {
echo json_encode(['error' => '未提供题目']);
}
} catch(PDOException $e) {
echo json_encode(['error' => '数据库错误: ' . $e->getMessage()]);
}
// 关闭数据库连接
$conn = null;以上创建一个PHP脚本来接收题目查询并返回答案。这个脚本会接收用户输入的题目，查询数据库，并返回对应的答案。
前端用户界面
Element UI表单和按钮: 使用<el-form>组件来创建一个输入表单，其中包含输入框和查询按钮。
数据绑定: 使用Vue.js的v-model指令来绑定输入的数据(question)。
查询功能: 当用户点击查询按钮时，调用handleSubmit方法，通过fetch向后端发送请求并处理响应。
显示结果: 使用<el-alert>组件来显示查询到的答案或错误信息。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询答案</title>
<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
/* 自定义样式 */
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.el-header {
text-align: center;
margin-bottom: 20px;
}
.el-form-item__content {
display: flex;
justify-content: center;
}
.el-input {
width: 100%;
}
.el-button {
margin-left: 10px;
}
.el-alert {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app" class="container">
<el-header>
<h1>查询答案</h1>
</el-header>
<el-main>
<el-form :inline="true" @submit.native.prevent="handleSubmit">
<!-- 输入题目的输入框 -->
<el-form-item label="" >
<el-input v-model="question" placeholder="请输入题目"
></el-input>
</el-form-item>
<!-- 查询按钮 -->
<el-form-item>
<el-button type="primary" @click="handleSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 答案显示区域 -->
<el-alert
v-if="answer"
:title="`答案: ${answer}`"
type="success"
show-icon>
</el-alert>
<el-alert
v-if="error"
:title="error"
type="error"
show-icon>
</el-alert>
</el-main>
</div>
<!-- 引入 Vue 和 Element UI -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
question: '', // 用户输入的题目
answer: '', // 查询到的答案
error: '' // 错误信息
},
methods: {
// 提交查询
handleSubmit() {
if (this.question.trim() === '') {
this.error = '请输入题目';
this.answer = '';
return;
}
// 调用后端API进行查询
fetch(`confing.php?question=${encodeURIComponent(this.question)}`)
.then(response => response.json())
.then(data => {
if (data.answer) {
this.answer = data.answer;
this.error = '';
} else {
this.error = data.error || '未知错误';
this.answer = '';
}
})
.catch(error => {
this.error = '请求失败: ' + error.message;
this.answer = '';
});
}
}
});
</script>
</body>
</html>
以上基本完成基本可以实现效果
演示图
总结
基本就是三个步骤实现
1.必须有个数据库
2.封装PHP接口文件调用数据库中信息
3.用element ui实现前端页面
免费题库地址
`
https://up.026wk.xyz/tkapi4.php?question=
`
专属版题库地址
https://www.anyzero.org