【山东大学项目实训】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 = '';

    }

页面效果：