本周完成任务
- 前后端对接
- 后端代码修改
- 前端样式完善
- 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