项目实训：面试小助手的功能实现

效果展示：

点击左边的面试助手，会跳出抽屉组件，实现随时向面试小助手提问的功能

具体实现步骤

1.前端抽屉组件实现

需求：点击左边的面试助手，就会跳出来聊天框

实现：element 的drawer组件

 <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false"
        :close-on-click-modal="false"
        :wrapper-closable="true"
        :modal-append-to-body="false"
        ref="drawer_el"
    >

      <div class="chat-container">
        <div style="height: 50px">

        </div>
        <div class="chat-messages">
          <div class="message"
               v-for="(message, index) in messages"
               :key="index"
               :class="{ 'sent': message.sentBy === 'user', 'received': message.sentBy === 'bot' }">
            {{ message.text }}
          </div>
        </div>
        <div class="chat-input-area">
          <el-input v-model="question" placeholder="请输入问题..."></el-input>
          <el-button type="primary" @click="askQuestion">发送</el-button>
        </div>
      </div>
    </el-drawer>

代码解释

1. <el-drawer>：这是Element UI库中的一个组件，用于创建一个可抽拉的面板。
2. :visible.sync="drawer"：使用.sync修饰符将drawer属性的值与组件内部的visible状态进行双向绑定。当drawer的值为true时，抽屉面板将显示；为false时，抽屉面板将隐藏。
3. :with-header="false"：设置抽屉面板不显示头部。
4. :close-on-click-modal="false"：设置点击遮罩层时不关闭抽屉面板。
5. :wrapper-closable="true"：允许点击抽屉外部区域关闭抽屉面板。
6. :modal-append-to-body="false"：设置抽屉的遮罩层是否添加到body元素下。
7. ref="drawer_el"：为抽屉组件设置一个引用名，以便在Vue实例中可以通过this.$refs.drawer_el访问该组件。
8. v-for="(message, index) in messages"：使用Vue的v-for指令遍历messages数组，并为每个message对象创建一个<div>元素。
9. :class="{ 'sent': message.sentBy === 'user', 'received': message.sentBy === 'bot' }"：使用Vue的绑定类名语法，根据message.sentBy的值动态地添加sent或received类名到<div>元素上。
10. <el-input v-model="question" placeholder="请输入问题..."></el-input>：使用Element UI的el-input组件创建一个输入框，并通过v-model指令将其与question数据属性进行双向绑定。
11. <el-button type="primary" @click="askQuestion">发送</el-button>：使用Element UI的el-button组件创建一个按钮，并设置其点击事件为askQuestion方法。当点击按钮时，将调用该方法。

2.发送问题

   askQuestion() {
      if (this.question) {
        // 假设这里有一个处理问题的函数，返回回答
        this.messages.push({text: this.question, sentBy: 'user'});
        let que = this.question
        // 清空输入框
        this.question = '';
        this.processQuestion(que);

      }

1. 方法定义：

   askQuestion 是一个在 Vue 组件中定义的方法，用于处理用户点击“发送”按钮后的逻辑。

2. 条件判断：

   if (this.question)：这里检查this.question是否有值（即用户是否输入了问题）。如果this.question是空的（例如用户没有输入任何内容）、null、undefined或空字符串，那么这个条件将为false，方法将不会执行内部的代码块。

3. 记录用户问题：

   this.messages.push({text: this.question, sentBy: 'user'});：这行代码将用户输入的问题（this.question）添加到messages数组中。每个问题都被表示为一个对象，其中包含text（问题的文本）和sentBy（表示这个问题是由用户发送的，值为'user'）。

4. 存储问题变量：

   let que = this.question;：这里将this.question的值赋给一个新的变量que。虽然在这个特定的代码片段中，这个步骤可能是多余的（因为你可以直接使用this.question），但在某些情况下，你可能需要保留原始值以供后续使用或避免在后续代码中修改原始数据。

5. 清空输入框：

   this.question = '';：这行代码将this.question的值设置为空字符串，从而清空输入框。这是为了确保用户每次发送问题后，输入框都是空的，以便他们可以输入新的问题。

6. 处理用户问题：

   • this.processQuestion(que);：这行代码调用了processQuestion方法（虽然该方法在这个代码片段中没有定义），并传入que（即用户输入的问题）作为参数。我们可以假设processQuestion方法会处理用户的问题（可能涉及API调用、计算等），并可能将回答添加到messages数组中或执行其他操作

3.回答问题，调用后端接口/answer

 processQuestion(question) {
      // 这里只是一个模拟，实际中你可能需要调用API或其他逻辑
      request.post("/answer",{
        question: question
      }).then(res=>{
        if (res.code == 200){
          console.log(res.result)
          // 将问题和回答添加到消息列表中
          this.messages.push({text: res.result, sentBy: 'bot'});
          // 滚动到消息列表的底部
          this.$nextTick(() => {
            const chatMessages = this.$refs.chatMessages;
            if (chatMessages) {
              chatMessages.scrollTop = chatMessages.scrollHeight;
            }
          });
          this.low()
        }
        else{
          return "抱歉，我也不知道"
        }
      })

后端实现

@app.route('/answer', methods=['POST'])
def answer():
    data = request.json.get('question')
    result = Turing(data)
    if result == "":
        return jsonify({
            'code': 0,
            'result': result
        })
    return jsonify({
        'code': 200,
        'result': result
    })

这里调用了部署在AutoDl上的大模型，前面博客有写怎么在这个上面部署大模型并实现外部调用。