大学生网课实现的一个批量在线搜题页面（附带题库接口）-CSDN博客

本文链接：https://blog.csdn.net/weixin_48005690/article/details/141907373

使用 Element UI 作为前端框架，配合 Vue.js 和 Axios 实现交互功能。

原文地址： Element UI 框架实现的一个批量在线搜题页面（附带题库接口） - 坏蛋MOOC

项目背景与需求分析

用户需要一个网页工具，能够批量查询题目并显示对应答案。
输入的题目通过回车键分隔。
需要一个输入框来输入 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>