第二组 Beta冲刺（1/3）

最新推荐文章于 2025-12-18 10:37:20 发布

原创最新推荐文章于 2025-12-18 10:37:20 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文记录了第二组在Beta冲刺阶段的进展，完成了前后端对接、后端代码修改和前端样式完善，成功实现1.0版本。在对接过程中遇到500错误，解决跨域问题。下一步计划优化模型准确性和前端样式。分享了项目分工、燃尽图和例会照片。

一、完成的任务

前后端对接
后端代码修改
前端样式完善
1.0版本写完

前后端对接

后端使用本地服务，我需要先跑通后端项目，在我原本的前端项目中嵌入后端的代码，项目结构改变，还好可以正常运行
在这里插入图片描述

后端代码修改

在接口对接的时候服务器一直报500的问题，按理来说应该不是跨域的问题，但为了放心，还是配置了一下跨域

前端样式完善

增加了一些人机交互的动画和处理，重点在使用element框架进行前后端对接，核心代码upload的使用

<template>
    <el-upload class="upload-demo" action="#" drag :before-upload="beforeUpload" multiple :headers="headers" :limit="2"
        :auto-upload="false" :file-list="fileList" :on-change="handleChange" :on-exceed="exceed" accept=".mat" :on-remove="handleRomove">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传mat格式文件</div>
    </el-upload>
    <el-button @click="dialogOfUpload = false">取 消</el-button>
    <el-button type="primary" @click="confirmUpload()">上 传</el-button>
</template>
<script>
import axios from 'axios'
export default {
    name: 'Upload',
    data() {
        return {
            fileList: [],
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }
    },
    methods: {
        handleRomove(file, fileList) {
            // console.log(file.name,fileList[0]);
            var tmplist = []
            for (let index = 0; index < fileList.length; index++) {
                const element = fileList[index];
                if(file.name!=element.name)tmplist.push(file)
            }
            this.fileList=tmplist
        },
        beforeUpload(file) {
            const extension = testmsg === "mat";
            if (!extension) {
                this.$message({
                    message: "上传文件只能是mat格式!",
                    type: "warning",
                });
            }
            return extension;
        },
        exceed(files, fileList) {
            this.$message({
                message: "只能上传两个文件噢",
                duration: 1000,
                type: 'warning'
            });
        },
        handleChange(file, fileList) { //文件数量改变
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            if (testmsg != 'mat') {
                this.$message({
                    message: "请上传mat格式文件！",
                    duration: 1000,
                    type: 'warning'
                });
            } else {
                this.fileList.push(file)
            }
            console.log(file);
            // console.log(fileList[target]);
            console.log(this.fileList);
        },
        confirmUpload() { //确认上传
            var param = new FormData();
            var step = 0
            this.fileList.forEach(
                (val, index) => {
                    step++
                    param.append("mat" + String(index + 1), val.raw);
                }
            );
            if (step != 2) {
                this.$message({
                    message: "请上传两个mat文件！",
                    duration: 1000,
                    type: 'warning'
                });
            } else {
                const loading = this.$loading({
                    lock: true,
                    text: '请耐心等待1-2分钟...',
                });
                // 上传时需要先上传correct文件
                axios.post("/test", param).then(res => {
                    loading.close()
                    console.log(res);
                    if (res.status == 200) {
                        this.$message({
                            message: "分类成功！",
                            duration: 1000,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: "分类失败，请重新上传文件",
                            duration: 1000,
                            type: 'warning'
                        });
                    }
                    this.$emit('getSrc',res.data.result)
                }).catch(error => {
                    loading.close()
                    this.$message({
                    message: "上传失败，请重新检查文件",
                    duration: 1000,
                    type: 'warning'
                });
                })
            }

        },
    }
}
</script>

<style>

</style>

1.0版本写完

首页效果
上传界面
做了处理，打开的时候默认显示mat格式文件
防止用户一意孤行选择非mat文件，但选择非mat文件时会有提示
点击文件名会展示删除按钮
确保用户上传两个mat文件
选择两个mat文件之后上传会有loading动画
分类结果

二、具体项目分工和进度

任务	姓名
前端、对接后端	陈江栋
核心代码编写和数据训练以及验证模型	李智杰、邱琦、陈江栋
后端实现与对接	韦境、宋子昂、陈晓政