PPT全方位辅助系统——项目记录4

本周我们继续学习前端的相关内容，并根据之前小组讨论后设计的项目前端页面进行前端页面和功能的进一步实现和完善。

接上周进度，我们本周主要进行了PPT生成功能对应页面的进一步实现和补充完善。主要包括：1）实现项目系统主界面的页面和PPT评价功能的页面；3）用页面跳转功能将所有的页面连接起来形成一个相对完整前端界面。

页面展示

核心代码：

<template>  
    <div class="web-page">  
      <div class="header" style="font-size: 40px;">  
        <h1>PPT评价</h1>  
      </div>  
      <div class="back">
        <router-link to="/" class="button">返回</router-link>
        <router-view></router-view>
      </div>


      <div class="import" style="font-size: 20px;">  
        <h1>导入PPT</h1>  
      </div> 

      <div>  
         <input type="file"  @change="handleFileUpload" />  
      </div>
      
        <button  @click="submitFile">提交</button>   
      
      
    </div>  
  </template>  
    
  <script>  
  
  window.location.href = '/Home.vue';
    
  export default {  
    data() {  
      return {  
        generateMethod: 'auto',  
        pptTopic: '',  
        showUpload: false, // 控制上传组件的显示与隐藏  
        selectedFile: null, // 存储选中的文件  
      };  
    },  
     methods: {  
    generatePPT() {  
      // 处理PPT生成逻辑  
      console.log('生成PPT', this.generateMethod, this.pptTopic);  

    },  
    handleFileUpload(event) {  
      this.selectedFile = event.target.files[0];  
    },  
    submitFile() {  
      if (!this.selectedFile) {  
        alert('请先选择一个文件');  
        return;  
      }  
      // 使用axios或其他HTTP库发送文件到后端  
      const formData = new FormData();  
      formData.append('file', this.selectedFile);  
      // 发送POST请求到后端API  
      axios.post('/api/upload', formData)  
        .then(response => {  
          // 处理上传成功后的逻辑  
          this.showUpload = false; // 上传成功后隐藏上传组件  
          alert('文件上传成功');  
          // ...  
        })  
        .catch(error => {  
          // 处理上传失败后的逻辑  
          alert('文件上传失败');  
          // ...  
        });  
    }, 
    
  },  



    

};  
  

  </script>  
    
  <style scoped>  
  .web-page {  
    display: flex;  
    flex-direction: column;  
    align-items: stretch;  
    justify-content: flex-start;  
    font-family: Arial, sans-serif;  
    margin: 0 auto;  
    padding: 20px;  
    max-width: 600px;  
  }  
    
  .header {  
    display: flex;  
    justify-content: center;  
    margin-bottom: 20px;
    position: absolute; /* 使用绝对定位 */  
    top: 50px; /* 距离顶部的位置 */  
    left: 100px; /* 距离左侧的位置 */  
  
  }  
    
  .header h1 {  
    margin: 0;  
  }

  .import {  
    display: flex;  
    justify-content: center;  
    margin-bottom: 20px;
    position: absolute; /* 使用绝对定位 */  
    top: 300px; /* 距离顶部的位置 */  
    left: 200px; /* 距离左侧的位置 */  
  
  }  
  
  .back{
    display: flex;  
    flex-direction: column; 
    position: absolute; /* 使用绝对定位 */  
    top: 50px; /* 距离顶部的位置 */  
    left: 50px; /* 距离左侧的位置 */  
  }

  

  /* 按钮样式 */
.btn-go {
  background-color: #42b983; /* 背景色 */
  color: white; /* 文字颜色 */
  padding: 10px 20px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角边框 */
  cursor: pointer; /* 鼠标样式为指针 */
  font-size: 16px; /* 字体大小 */
  transition: background-color 0.3s ease; /* 鼠标悬停过渡效果 */
}

.btn-go:hover {
  background-color: #369b6e; /* 鼠标悬停时的背景色 */
}

  button {  
    margin-top: 15px;  
    padding: 10px 20px;  
    border: none;  
    border-radius: 4px;  
    position: absolute; /* 使用绝对定位 */  
    top: 610px; /* 距离顶部的位置 */  
    left: 600px; /* 距离左侧的位置 */  
    background-color: #4CAF50;  
    color: white;  
    cursor: pointer;  
  }  
    
  button:hover {  
    background-color: #45a049;  
  }  
  </style>