项目实训日志（十二）-面试问答系统UI制作（2）

cariethy

已于 2024-06-24 12:23:50 修改

阅读量220

点赞数 2

分类专栏：智能简历平台Plus 文章标签： ui

于 2024-06-24 12:16:53 首次发布

本文链接：https://blog.csdn.net/m0_62500092/article/details/139922001

版权

智能简历平台Plus 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

先引入axios用于与后端的通信

import axios from 'axios';

先设置显示对话框可见，使其一进入页面就可看见提示框

设置各问题选择的按钮不可见，这样就不有前后组件顺序的问题

设置responseMessage变量作为将前端输入传给后端进行数据处理

设置response变量用于将后端传入的信息传回前端

为了ui界面的美观，先设置回答界面不可见

 return{

        tipVisible: true, // 初始状态为显示对话框

        inputText: '', // 输入框的内容



        buttonVisible: false,

        civilServiceVisible: false,

        educationalVisible: false,

        bankVisible: false,

        enterpriseVisible: false,



        showText: false,

        displayMessage:'',



        simulator:"模拟器给出修改意见以及标准答案：",

        response: [], // 用于显示回复的消息

        responseMessage: '', // 响应消息

        responseAreaVisibility:false



      };

先是显示问题的方法（以考公为例）

handleCivilQuestion(question) {

      this.civilServiceVisible=false;

      switch (question) {

        case 'civilQuestion1': this.civilQuestion1();break;

        case 'civilQuestion2':this.civilQuestion2();break;

        case 'civilQuestion3':this.civilQuestion3();break;

        case 'civilQuestion4':this.civilQuestion4();break;

        case 'civilQuestion5':this.civilQuestion5();break;

        default:break;

      }

    },

    civilQuestion1() {

      this.showText=true;this.displayMessage="问题一：你认为什么是成为一名优秀公务员的关键特质?";},

    civilQuestion2() {

      this.showText=true;this.displayMessage="问题二：举一个你在团队合作中发挥关键作用的例子。"; },

    civilQuestion3() {

      this.showText=true;this.displayMessage="问题三：你如何看待个人利益与公共利益之间的关系?"; },

    civilQuestion4() {

      this.showText=true;this.displayMessage="问题四：你为什么想要加入公务员队伍?";},

    civilQuestion5() {

      this.showText=true;this.displayMessage="问题五：你的长远职业规划是什么？";},

关闭对话框的方法

close() {

      this.tipVisible = false; // 点击按钮时隐藏对话框

      this.buttonVisible=true;

    },

发送输入的文字以及后端通信的方法

利用axios进行前后端数据的传输

 inputDialog(){

      axios.post('http://localhost:8002/api/generate_response', { user_input: (this.displayMessage+this.inputText) })

        .then(response => {

          console.log('API响应数据:', response.data); // 输出API响应数据以进行调试

          

          if (response.data && response.data.message) {

            this.responseMessage = response.data.message;

           // this.extendedResponse = response.data.extended;

            console.log('设置的responseMessage:', this.responseMessage); // 输出设置的响应消息

            //console.log('设置的extendedResponse:', this.extendedResponse); // 输出设置的扩展消息

          } else {

            console.error('响应数据格式不正确:', response.data);

          }

        })

        .catch(error => {

          console.error('生成回复时出错:', error);

        });



      //提交对话内容

      if (this.inputText.trim() !== '') {

        this.response.push(this.inputText.trim()); // 将输入框中的内容追加到消息数组中

        this.inputText = ''; // 清空输入框



      this.responseAreaVisibility=true;

      }},

问题选择框逻辑（以考公为例）

civilService(){

      this.responseAreaVisibility=false;

      this.responseMessage='';

      this.response=[];

      

      this.showText=false;

      this.civilServiceVisible=true;

      this.educationalVisible=false;

      this.bankVisible=false;

      this.enterpriseVisible=false;

    },

后续尽请期待~