软件工程——Beta冲刺（1/3）

本周完成任务

• 前后端对接
• 后端代码修改
• 前端样式完善
• 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动画
  
• 分类结果
  
  git仓库地址：https://gitee.com/jiang-ye-CJD/hybird-sn