【山东大学项目实训】修改大纲并生成PPT内容&图片前后端连接

这个功能主要包含两个部分：

1. 用户在对话框中对大纲进行修改，确认修改完成后点击“提交修改”按钮，点击确认将文本框中的内容传给后端并由后端调用ai生成具体的PPT内容；
2. 用户可以根据大纲内容或第二次生成的具体内容传给后端生成符合主题的图片，生成的图片将会在生成PPT时被放在PPT中作为插图。

关键代码：

1. 提交修改生成PPT文本：

 created() {

    this.outline = this.$route.query.outline || '';

    //const queryOutline = this.$route.query.outline || '';  

    //this.$store.commit('setOutline', queryOutline); // 使用 mutation 初始化 outline

   

   

  },

  methods: {

   

    sendOutline() {

      axios.post('http://localhost:8080/create/async', {

        outline: this.outline

      })

      .then(response => {

        console.log('成功发送数据', response.data);

        // 处理成功响应

        this.outline = response.data; // 将返回的内容显示出来



      })

      .catch(error => {

        console.error('发送数据时出错', error);

        // 处理错误响应

       

      });

    },

1. 根据PPT文本或大纲生成图片：

generateImage() {

      axios.post('http://localhost:8080/ppt/generateImage', {

        content: this.outline

      })

      .then(response => {

        console.log('图像生成成功', response.data);

        alert('图像生成成功');

        // 在这里进行页面跳转

        this.$router.push({

      path: '/template',

      query: {

        content: this.outline

      }

    });

      })

      .catch(error => {

        console.error('生成图像时出错', error);

        alert('生成图像时出错');

      });

    }

页面展示：

可以在后端看到生成的图片