Element UI 框架实现的一个批量在线搜题页面(附带题库接口)
使用Element UI
作为前端框架,配合Vue.js
和Axios
实现交互功能。
项目背景与需求分析
- 用户需要一个网页工具,能够批量查询题目并显示对应答案。
- 输入的题目通过回车键分隔。
- 需要一个输入框来输入
Token
(用于API
鉴权)。 - 用户需要两个功能按钮,一个是执行批量查询,另一个是清空题目列表。
- 在批量查询过程中,需要显示一个动态加载图标,提示用户操作正在进行中。
页面结构设计
- 使用
Element UI
的el-card
组件作为页面的主要容器,以提供清晰的布局和样式。 - 使用
el-form
组件构建表单,包含两个主要输入区域:Token
输入框和题目列表输入框。 - 利用
Element UI
的栅格系统(el-row 和 el-col)
对表单布局进行优化,确保在不同屏幕大小下都有良好的显示效果。
Token
输入框
- 通过
el-input
组件实现用户输入Token
的功能,并将其绑定到Vue
数据模型form.token
上。
题目列表输入框
- 使用
el-input
组件的textarea
类型创建一个多行文本输入框,用于输入多条题目,题目之间通过回车键分隔。 - 数据绑定到
Vue
数据模型form.questions
上。
操作按钮
- 批量搜题按钮:用户点击此按钮后,将触发
searchQuestions
方法,进行批量查询操作。按钮使用loading
属性绑定Vue
数据 - 模型
loading
,控制是否显示动态加载图标。 - 清空题目列表按钮:点击此按钮将调用
clearQuestions
方法,清空题目输入框和查询结果。
结果表格
- 使用
el-table
组件展示查询结果,表格包含三个列:题目(question)
、答案(answer)
、状态信息(msg)
。 - 数据绑定到
Vue
数据模型results
,查询结果以数组形式存储,每个查询结果作为表格中的一行。
功能实现
Vue
实例化:代码中使用new Vue()
创建一个Vue
实例,管理页面的状态和行为。实例化过程中定义了data
和methods
属性。
数据管理:
form
对象管理表单输入的数据,包括Token
和题目列表。results
数组存储查询结果,供表格显示。loading
布尔值控制动态加载图标的显示与隐藏。
方法定义:
searchQuestions
方法负责执行批量查询。它将题目列表按回车键拆分成多个题目,逐一调用API
查询,并将返回的结果存储在results
数组中。为确保用户体验,在查询过程中启用加载图标,查询结束后关闭图标。clearQuestions
方法用于清空题目列表和查询结果。
样式与用户体验
- 为确保页面布局整洁,使用了
Element UI
的栅格系统来管理布局。同时,通过调整margin
和gutter
属性使得输入框和按钮的排列更加合理。 - 在按钮点击时,加载图标的显示能及时反馈操作状态,提升用户体验。
总结
- 代码结构清晰,采用了组件化的设计思路,使得代码模块化、易于维护。
- 使用
Vue.js
实现了响应式的数据绑定和用户交互,使得页面能够实时响应用户的输入和操作。 - 借助
Element
UI` 提供的组件,页面布局和样式得到了良好的保证,同时减少了手写样式的工作量。 - 使用
Axios
处理异步API
请求,实现了与后端的交互功能。 - 总体而言,这段代码实现了一个功能完整、用户体验良好的在线批量搜题工具。
演示
演示地址:
演示地址
代码板块
<!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的CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
/* 样式定义 */
.box-card {
margin: 20px;
}
.el-row {
margin-bottom: 20px;
}
.el-col:last-child .el-form-item {
margin-bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>在线批量搜题</span>
</div>
<!-- 表单开始 -->
<el-form :model="form" label-width="80px">
<el-row :gutter="20">
<!-- Token输入框 -->
<el-col :span="12">
<el-form-item label="Token">
<el-input v-model="form.token" placeholder="请输入token"></el-input>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
<el-col :span="12" style="text-align: right;">
<el-button type="primary" @click="searchQuestions" :loading="loading">批量搜题</el-button>
<el-button @click="clearQuestions" style="margin-left: 10px;">清空题目列表</el-button>
</el-col>
</el-row>
<!-- 题目列表输入框 -->
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="题目列表">
<el-input
v-model="form.questions"
type="textarea"
:rows="10"
placeholder="每条题目用回车键隔开"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 表单结束 -->
<!-- 结果表格 -->
<el-table :data="results" style="width: 100%">
<el-table-column prop="question" label="题目" width="400"></el-table-column>
<el-table-column prop="answer" label="答案" width="400"></el-table-column>
<el-table-column prop="msg" label="状态"></el-table-column>
</el-table>
</el-card>
</div>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Element UI的JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
token: '', // 存储用户输入的Token
questions: '', // 存储用户输入的题目列表
},
results: [], // 存储返回的结果
loading: false, // 控制加载图标的显示
};
},
methods: {
// 批量搜题的方法
async searchQuestions() {
const token = this.form.token;
const questionsArray = this.form.questions.split('\n'); // 根据回车键分割题目
this.results = [];
this.loading = true; // 显示加载图标
for (const question of questionsArray) {
try {
// 调用API获取结果
const response = await axios.get(
`https://up.026wk.xyz/tkapi4.php?token=${token}&question=${encodeURIComponent(question)}`
);
// 将结果存入results数组
this.results.push({
question: question,
answer: response.data.answer || '无答案',
msg: response.data.msg || '无状态',
});
} catch (error) {
// 错误处理
this.results.push({
question: question,
answer: '查询失败',
msg: error.message || '未知错误',
});
}
}
this.loading = false; // 隐藏加载图标
},
// 清空题目列表的方法
clearQuestions() {
this.form.questions = '';
this.results = [];
},
},
});
</script>
</body>
</html>