遇到原生的html小型单页应用时，是脱离了vue框架，而我们又想使用vue的语法和element的组件加快我们的开发速度，这个时候就需要引用他们的js了。技术栈即html+vue.js+element-ui。而使用它们的方法也很简单，引入对应的js和css文件即可。下面用一个小例子展示下。
普普通通的表单页面：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单页面</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
</head>
<style>
#app {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
margin-top: 10vh;
}
html{
width: 100%;
height: 100%;
background: #f0faff;
}
.el-form {
max-width: 600px;
width: 100%;
box-shadow: 1px 1px 8px #dedede;
padding: 30px;
border-radius: 10px;
background: #fff;
}
.el-row {
margin-bottom: 20px;
}
/* .el-button {
width: 100%;
} */
</style>
<body>
<div id="app">
<el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
<el-row>
<h3>业务数据导入终端：</h3>
</el-row>
<el-row>
<el-form-item label="邮箱" prop="email">
<el-input placeholder="请输入接收通知的邮箱" v-model="formData.email"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="IP地址" prop="ip">
<el-input v-model="formData.ip"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="端口" prop="port">
<el-input v-model="formData.port"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="账号" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码" prop="password">
<el-input v-model="formData.password" type="password"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="数据库" prop="database">
<el-input v-model="formData.database"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="表名" prop="table">
<el-input v-model="formData.table"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="上传文件">
<el-upload
class="upload-demo"
ref="upload"
:action="uploadUrl"
:before-upload="beforeUpload"
accept=".xlsx,.xls"
:limit="1"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传excel文件</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="text-align: center; margin-top: 20px;">
<el-button type="primary" @click="submitForm" :disabled="disabled">{{buttonText }}</el-button>
<el-button type="danger" @click="clear">清除缓存</el-button>
</el-col>
</el-row>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
timer:0,
limitTime: 1 * 60, // 限制时间为10分钟
disabled:false,
formRules:{
email:[
{ required: true, message: '请输入联系邮箱', trigger: 'blur' }
],
ip: [
{ required: true, message: '请输入ip', trigger: 'blur' }
],
port: [
{ required: true, message: '请输入端口', trigger: 'blur' }
],
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
database: [
{ required: true, message: '请输入数据库', trigger: 'blur' }
],
table: [
{ required: true, message: '请输入表名', trigger: 'blur' }
],
},
formData: {
email:'',
ip: '',
port: '',
username: '',
password: '',
database: '',
table: '',
},
uploadUrl: '/upload' // 文件上传的接口地址
};
},
mounted(){
var obj = localStorage.getItem("formData")||"";
var timer = localStorage.getItem("disabled")||"";
if(timer){ //定时还没结束，重置
this.disabled = true;
this.timer = this.limitTime;
const countdown = setInterval(() => {
this.timer--;
if (this.timer <= 0) {
localStorage.removeItem("disabled");
clearInterval(countdown);
this.disabled = false;
}
}, 1000);
}
if(obj){
this.formData = JSON.parse(obj);
}
},
computed: {
buttonText() {
if (this.disabled) {
const minutes = Math.floor(this.timer / 60);
const seconds = this.timer % 60;
return `禁用中 (${minutes}:${String(seconds).padStart(2, '0')})`;
} else {
return '提交';
}
},
},
methods: {
beforeUpload(file) {
// 上传文件之前的钩子函数，可用于校验文件类型等
const isExcel = ((file.type === 'application/vnd.ms-excel')||(file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'));
return isExcel;
},
clear(){
this.$confirm('该操作会清除本地保存的数据信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
localStorage.clear();
this.$message({
type: 'success',
message: '清除成功'
});
setTimeout(()=>{window.location.reload();},1000)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 提交表单的函数，将表单数据和文件一起发送给后端
const formData = new FormData();
formData.append('email', this.formData.email);
formData.append('ip', this.formData.ip);
formData.append('port', this.formData.port);
formData.append('access', this.formData.username);
formData.append('password', this.formData.password);
formData.append('dataName', this.formData.database);
formData.append('tableName', this.formData.table);
console.log(this.$refs.upload.uploadFiles[0]);
if(this.$refs.upload.uploadFiles[0]&&this.beforeUpload(this.$refs.upload.uploadFiles[0].raw)){
const file = this.$refs.upload.uploadFiles[0].raw;
formData.append('file', file);
}else{
this.$message.error('请上传excel文件');
return;
}
localStorage.setItem("formData",JSON.stringify(this.formData));
this.disabled = true;
localStorage.setItem("disabled",this.disabled)
this.timer = this.limitTime;
const countdown = setInterval(() => {
this.timer--;
if (this.timer <= 0) {
localStorage.removeItem("disabled");
clearInterval(countdown);
this.disabled = false;
}
}, 1000);
// 发送表单数据和文件给后端
fetch('http://localhost/from/uploadExcel', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('提交成功', data);
if(data.code==200){
this.$message({
message: data.msg,
type: 'success'
});
}else{
this.$message({
message: data.msg,
type: 'warning'
});
}
// 处理后端返回的数据
})
.catch(error => {
console.error('提交失败', error);
// 处理提交失败的情况
});
} else {
this.$message.error('请将表单补充完整');
}
});
}
}
});
</script>
</body>
</html>
