一个页面实现批量查网课答案

I'mZero

于 2024-06-16 22:36:15 发布

阅读量309

点赞数 5

分类专栏：程序教程 JavaScript学习笔记文章标签： javascript php html5 vue.js elementui

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

版权

程序教程同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript学习笔记

6 篇文章 0 订阅

订阅专栏

这段代码是一个简单的网页应用，使用了 Vue.js 和 Element UI 库，用于查询一组问题的答案并显示结果。让我解释一下主要的部分和功能：

HTML 结构和样式：
- 使用了 Element UI 的组件和样式，如 <el-container>, <el-header>, <el-main>, <el-form>, <el-input>, <el-button>, <el-card>, 和 <el-dialog>，用来构建页面布局和交互元素。
- 自定义了一些样式，如 .success 和 .failure 用来根据答案是否成功显示不同的背景颜色。
Vue 实例：
- 在 <script> 标签中创建了一个 Vue 实例，绑定到 #app 元素上。
- 使用了 Vue 的 data 选项来定义了 form 对象（包含 questions 属性）、answers 数组（用于存储问题和答案）、loading 状态（用于显示加载动画）。
方法：
- queryAnswers() 方法用于处理用户点击“查询答案”按钮的事件。
  - 首先从输入框中获取用户输入的问题列表，并且过滤空白行。
  - 如果问题为空，显示错误消息。
  - 设置 loading 状态为 true，准备开始加载数据。
  - 使用 axios 库发送多个并发请求（每个问题一个请求），并将结果存入 promises 数组中。
  - 使用 Promise.all() 等待所有请求完成后更新 answers 数组。
  - 捕获可能的异常并显示“查询失败”消息。
  - 最后，无论成功或失败，设置 loading 状态为 false，结束加载过程。
- clearInputs() 方法用于清空输入框和答案列表。

引用的库：

使用了
 Vue.js (<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>)、
Element UI (<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
和 

<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>)。

总体来说，这段代码实现了一个简单的前端页面，用户可以输入问题并查询答案，同时展示加载过程和查询结果。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>问题查询答案</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    #app {
      padding: 20px;
    }
    .el-header {
      background-color: #3a7ca5;
      color: #333;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-bottom: 3px solid #f0f0f0;
    }
    .el-main {
      padding: 20px;
    }
    .el-card {
      margin-top: 20px;
    }
    .buttons {
      margin-top: 10px;
    }
    .success {
      background-color: #d4edda;
      color: #155724;
      padding: 10px;
      border-radius: 5px;
    }
    .failure {
      background-color: #f8d7da;
      color: #721c24;
      padding: 10px;
      border-radius: 5px;
    }
    .el-textarea__inner {
      min-height: 150px; /* 增加初始高度 */
      border-radius: 8px;
      border: 1px solid #dcdfe6;
      padding: 10px;
      font-size: 16px;
      line-height: 1.5;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .el-textarea__inner:focus {
      border-color: #3a7ca5;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header>
        <h1>问题查询答案</h1>
      </el-header>
      <el-main>
        <el-form ref="form" :model="form">
          <el-form-item label="问题 (每行一个问题)">
            <el-input type="textarea" v-model="form.questions" :autosize="{ minRows: 6, maxRows: 10 }"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryAnswers">查询答案</el-button>
            <el-button type="danger" @click="clearInputs">清空</el-button>
          </el-form-item>
        </el-form>
        <el-card v-if="answers.length">
          <ul>
            <li v-for="(answer, index) in answers" :key="index" :class="{'success': answer.a !== '查询失败', 'failure': answer.a === '查询失败'}">
              <strong>问题:</strong> {{ answer.q }}<br>
              <strong>答案:</strong> {{ answer.a }}
            </li>
          </ul>
        </el-card>
        <el-dialog :visible.sync="loading" title="加载中">
          <div style="text-align: center;">
            <el-loading :fullscreen="true" text="数据查询中..."></el-loading>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            questions: ''
          },
          answers: [],
          loading: false
        };
      },
      methods: {
        async queryAnswers() {
          const questions = this.form.questions.split('\n').filter(q => q.trim() !== '');

          if (questions.length === 0) {
            this.$message.error('请输入至少一个问题');
            return;
          }

          this.loading = true;
          this.answers = [];

          try {
            const promises = questions.map(async q => {
              const url = `YOURAPI?q=${encodeURIComponent(q.trim())}`;
              try {
                const response = await axios.get(url);
                if (response.status === 200) {
                  return { q: q.trim(), a: response.data.answer };
                } else {
                  return { q: q.trim(), a: '查询失败' };
                }
              } catch {
                return { q: q.trim(), a: '查询失败' };
              }
            });

            this.answers = await Promise.all(promises);
          } catch (error) {
            this.$message.error('查询过程中出现错误');
          } finally {
            this.loading = false;
          }
        },
        clearInputs() {
          this.form.questions = '';
          this.answers = [];
        }
      }
    });
  </script>
</body>
</html>

效果：

更换成自己的题库接口就可以

想赞助一下就用我的接口吧嘻嘻嘻

API接口传送门

I'mZero

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
一个页面实现批量查网课答案

这段代码是一个简单的网页应用，使用了 Vue.js 和 Element UI 库，用于查询一组问题的答案并显示结果。总体来说，这段代码实现了一个简单的前端页面，用户可以输入问题并查询答案，同时展示加载过程和查询结果。方法用于处理用户点击“查询答案”按钮的事件。方法用于清空输入框和答案列表。
复制链接

扫一扫