智能简历平台Plus——求职推荐系统UI制作（1）

与面试问答系统制作UI类似

先是对页面内出现的各项内容的定义，确定其出现顺序

先是标题

<div class="title">
        <p>智简PLUS 求职推荐</p>
        <button @click="introduction"  class="introduction-button">项目介绍</button>
      </div>

然后是项目介绍

<div class="tip" v-if="tipVisible">
        <p><strong>欢迎使用智简PLUS求职推荐大模型模拟器！</strong><br>欢迎使用我们的职业推荐模拟器！这是一个基于大模型微调技术开发的工具，旨在帮助用户根据个人的MBTI人格类型、星座、大学专业和性别等信息，精确推荐最适合的职业方向。<br></p>
        <p><strong>使用说明：</strong><br>只需输入您的MBTI类型、星座、大学专业和性别，模拟器将为您生成个性化的职业推荐列表。无论是寻找第一份工作，还是考虑职业转型，我们的模拟器都能为您提供有价值的指导和建议。</p>
        <p><strong>免责声明：</strong><br>职业推荐模拟器的建议仅供参考，最终决策应综合考虑个人的兴趣、技能和市场需求。模拟器不保证推荐结果的完全准确性，建议用户在实际应用中慎重考虑。</p>
        <button @click="close">Close</button>
      </div>

对话框内容

<textarea id="userInput" v-model="inputText" placeholder="请输入你的回答"></textarea>
      <button @click="inputDialog" class="inputDialog-button">发送</button>
      <button @click="clearDialog" class="clearDialog-button">清空</button>

显示输入内容

<div class="response-area" v-if="responseAreaVisible">
        <h3>YOU：</h3>
        <p v-for="(message, index) in response" :key="index">{{ message }}</p>
        <h3>SIMULATOR：</h3>
        <p>{{ responseMessage }}</p>
      </div>

---

• data 属性： 定义了组件的初始数据。包括 tipVisible 控制是否显示提示框，inputText 存储用户输入的内容，responseAreaVisible 控制回复区域的显示，response 存储用于显示的回复消息数组，responseMessage 存储从 API 返回的消息。

data() {
        return{
          tipVisible: false, // 初始状态为显示对话框
          inputText: '', // 输入框的内容

          responseAreaVisible:false,

          response: [], // 用于显示回复的消息
          responseMessage: '' // 响应消息
        };

• methods 方法： 包含了组件的方法，每个方法都对应一个组件内部的操作。

clearDialog() 方法用于清空对话内容

clearDialog(){
        this.responseAreaVisible=false;
        this.response=[];
        this.responseMessage='';
      },

introduction() 方法用于显示提示对话框

introduction(){
        this.tipVisible=true;
      },

close() 方法用于关闭提示对话框

close() {
        this.tipVisible = false; // 点击按钮时隐藏提示
      },

inputDialog() 方法用于处理用户提交的对话内容：

首先使用 Axios 发送 POST 请求到 http://localhost:8003/api/generate_response，发送的数据是用户输入的 inputText

在请求成功时，处理返回的数据，将 response.data.message 存储到 responseMessage 中，并在控制台输出调试信息

如果用户输入框不为空，将输入内容加入 response 数组中，并清空输入框

最后，设置 responseAreaVisible 为 true，显示回复区域

    inputDialog(){
        axios.post('http://localhost:8003/api/generate_response', { user_input: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); // 将输入框中的内容追加到消息数组中
          this.inputText = ''; // 清空输入框
        }
        this.responseAreaVisible=true;
      }

后续尽请期待~