PPT 全方位辅助系统——PPT辅导&PPT评价功能前后端连接

1.PPT辅导：

这个功能逻辑比较简单主要就是前端将input中输入的内容发送给后端，后端调用ai并返回ai的话，因此前后端连接前端代码如下：

import axios from 'axios';

export default {
  data() {
    return {
      userInput: '',
      messages: [],
      messageId: 0
    };
  },
  methods: {
    async sendMessage() {
      if (this.userInput.trim() === '') return;

      const userMessage = {
        id: this.messageId++,
        text: this.userInput,
        type: 'user'
      };
      this.messages.push(userMessage);

      try {
        const response = await axios.post('http://localhost:8080/teach/async', this.userInput, {
          headers: {
            'Content-Type': 'text/plain'
          }
        });

        const aiMessage = {
          id: this.messageId++,
          text: response.data,
          type: 'ai'
        };
        this.messages.push(aiMessage);
      } catch (error) {
        console.error('Error sending message:', error);
      }

      this.userInput = '';
    }
  }
};

2.PPT评价：

此功能跟PPT辅导比较类似，即上传PPT，前端分页提取PPT中的内容并将内容返回给后端，后端调用ai对上传的PPT进行评价并给出修改意见，返回给前端。

前端代码如下：

分页提取PPT：

readFile(file) {
      const reader = new FileReader();

      reader.onload = async (e) => {
        const arrayBuffer = e.target.result;

        try {
          let pptData = await parse(arrayBuffer);
          console.log(pptData);

          var allText = [];
          console.log(Array.isArray(pptData));
          //pptData=JSON.parse(pptData);
          for(let si in pptData){
            console.log(si);
          }
          pptData.slides.forEach((slide) => {
            console.log("yyy");
            console.log(slide.elements.content);
            if (slide.elements) {
              slide.elements.forEach(text => {
                console.log("msy");
                var processcontent=text.content.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
                allText.push(processcontent);
              });
            }
          });

        // 分页处理
        const pageSize = 1000; // 每页字符数
        const pages = [];
        for (let i = 0; i < allText.length; i += pageSize) {
          pages.push(allText.slice(i).join(' '));
        }

        // 逐页发送到后端
        pages.forEach((pageContent, index) => {
          this.sendMessage(pageContent, `${file.name}-page-${index + 1}`);
        });
      }catch(err)  {
          console.error('PPT解析失败:', err);
        }
      };

      reader.onerror = (e) => {
        console.error("File reading error:", e);
      };

      reader.readAsArrayBuffer(file);
    },

前后端连接：

async sendMessage(content = this.userInput,fileName='') {
      if (content.trim() === '') return;

      const userMessage = {
        id: this.messageId++,
        text: content,
        type: 'user'
      };
      this.messages.push(userMessage);

      try {
        const response = await axios.post('http://localhost:8080/chat/async', {content,fileName}, {
          headers: {
            'Content-Type': 'application/json'
          }
        });

        const aiMessage = {
          id: this.messageId++,
          text: response.data,
          type: 'ai'
        };
        this.messages.push(aiMessage);
        console.log(aiMessage);
      } catch (error) {
        console.error('Error sending message:', error);
      }

      this.userInput = '';
    }

页面效果：