答案题库在线转JSON数组toMysQL-HTML页面

最新推荐文章于 2024-07-16 20:23:32 发布

I'mZero

最新推荐文章于 2024-07-16 20:23:32 发布

阅读量412

点赞数 3

分类专栏：程序教程文章标签： json html 前端 vue.js

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

版权

程序教程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

都是为了多搞点题库进数据库

HTML和CSS部分

HTML结构：页面的结构由Element UI的组件构成，使用el-container、el-header、el-main等组件布局。表单使用el-form和el-form-item组件。
CSS样式：基本样式用于调整布局和外观。

JavaScript部分

引入库：通过CDN引入Vue.js、Element UI和Axios库。
Vue实例：创建一个新的Vue实例，并挂载到#app元素上。

`data`对象

form对象：包含用户输入的questions和answers字段。
rules对象：定义了表单验证规则。
jsonData：用于存储生成的JSON数据。
loading：用于控制加载动画的显示。

`methods`对象

validateInput：自定义验证器，确保输入内容不为空。
validateAndGenerate：验证表单内容，如果通过验证，则调用generateJSON方法生成JSON数据。
generateJSON：将用户输入的questions和answers分割成数组，去除空行，并生成JSON数据。
copyToClipboard：将生成的JSON数据复制到剪贴板。
clearInputs：清空输入框和生成的JSON数据。
submitData：将生成的JSON数据提交到后端。提交前显示加载动画，提交完成后隐藏加载动画，并根据后端返回的响应消息显示成功或失败的提示。

详细分析

HTML和CSS

el-container：用于页面布局，包含头部和主要内容区域。
el-header：头部区域，显示标题。
el-main：主要内容区域，包含表单和结果显示区域。
表单部分：
- el-form：用于创建表单。
- el-form-item：表单项，包含输入框和按钮。
- el-input：多行输入框，用于输入问题和答案。
- el-button：按钮，用于生成JSON、清空和提交数据。
结果显示部分：
- el-card：显示生成的JSON数据和复制按钮。
- el-dialog：加载动画，提交数据时显示。

Vue实例

data对象：
- form：存储用户输入的数据。
- rules：表单验证规则。
- jsonData：存储生成的JSON数据。
- loading：控制加载动画的显示。
methods对象：
- validateInput：自定义验证规则，确保每行输入不为空。
- validateAndGenerate：验证表单内容，通过验证后生成JSON数据。
- generateJSON：将输入的多行数据转换为JSON格式。
- copyToClipboard：复制生成的JSON数据到剪贴板。
- clearInputs：清空输入框和生成的JSON数据。
- submitData：提交生成的JSON数据到后端，并处理提交过程中的加载动画和响应消息。

关键功能

数据验证：确保输入数据不为空且问题和答案数量匹配。
数据生成：将输入的多行数据转换为JSON格式。
数据提交：将生成的JSON数据提交到后端，并处理响应。
用户交互：提供一键复制和清空功能，提高用户体验。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本toJSON数据</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    #app {
      padding: 20px;
    }
    .el-header {
      background-color: #b3c0d1;
      color: #333;
      line-height: 60px;
      text-align: center;
      font-size: 20px;
    }
    .el-main {
      padding: 20px;
    }
    .el-card {
      margin-top: 20px;
    }
    .buttons {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header>
        <h1>文本tojson</h1>
      </el-header>
      <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="问题 (每行一个问题)" prop="questions">
            <el-input type="textarea" v-model="form.questions" autosize></el-input>
          </el-form-item>
          <el-form-item label="答案 (每行一个答案)" prop="answers">
            <el-input type="textarea" v-model="form.answers" autosize></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="validateAndGenerate">生成JSON</el-button>
            <el-button type="danger" @click="clearInputs">清空</el-button>
            <el-button type="success" @click="submitData">提交到后端</el-button>
          </el-form-item>
        </el-form>
        <el-card v-if="jsonData">
          <pre>{{ jsonData }}</pre>
          <div class="buttons">
            <el-button type="primary" @click="copyToClipboard">一键复制</el-button>
          </div>
        </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() {
        const validateInput = (rule, value, callback) => {
          const lines = value.split('\n').filter(line => line.trim() !== '');
          if (lines.length === 0) {
            callback(new Error('输入内容不能为空'));
          } else {
            callback();
          }
        };

        return {
          form: {
            questions: '',
            answers: ''
          },
          rules: {
            questions: [{ validator: validateInput, trigger: 'blur' }],
            answers: [{ validator: validateInput, trigger: 'blur' }]
          },
          jsonData: null,
          loading: false
        }
      },
      methods: {
        validateAndGenerate() {
          this.$refs.form.validate(valid => {
            if (valid) {
              this.generateJSON();
            } else {
              this.$message.error('请检查输入内容');
            }
          });
        },
        generateJSON() {
          const questions = this.form.questions.split('\n').filter(q => q.trim() !== '');
          const answers = this.form.answers.split('\n').filter(a => a.trim() !== '');

          if (questions.length !== answers.length) {
            this.$message.error('问题和答案的数量不匹配');
            return;
          }

          const qaList = questions.map((q, index) => {
            return { q: q.trim(), a: answers[index].trim() };
          });

          this.jsonData = JSON.stringify(qaList, null, 2);
        },
        copyToClipboard() {
          if (this.jsonData) {
            const textarea = document.createElement('textarea');
            textarea.value = this.jsonData;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            this.$message.success('JSON数据已复制到剪贴板');
          }
        },
        clearInputs() {
          this.form.questions = '';
          this.form.answers = '';
          this.jsonData = null;
        },
        submitData() {
          if (!this.jsonData) {
            this.$message.error('请先生成JSON数据');
            return;
          }

          this.loading = true;

          const postData = {
            pass: 'yourpass',
            data: this.jsonData
          };

          axios.post('YOUR_BACKEND_URL_HERE', postData)
            .then(response => {
              this.loading = false;
              if (response.data.code === 1) {
                this.$message.success('数据提交成功: ' + response.data.msg);
              } else {
                this.$message.error('数据提交失败: ' + response.data.msg);
              }
            })
            .catch(error => {
              this.loading = false;
              this.$message.error('请求失败: ' + error);
            });
        }
      }
    });
  </script>
</body>
</html>