文章标题
2017-04-21 17:51
344 查看
VUE.JS+Freemarker请求非前后端分离的案例（包括文件上传）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="${ctx }/css/bootstrap.min.css" >
<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${ctx }/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/css/css.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css"/>
</head>
<body>
<div id="app" class="htmleaf-container">
<hr>
<div class="container kv-main">
<div class="robot-b-name">
<i>选择文件</i>
<div class="robot-b-namet" id="filediv">{{defaultMessswage}}</div>
<input type="file" name="file" v-on:change="handleFileChange" ref="inputer" onchange="selectFile()">
<a href="javascript:;" class="robot-b-namea">浏览...</a>
</div>
<br>
<form id="up">
<div id="inputgroup" class="input-group">
<span class="input-group-addon">APPKEY</span>
<div><input v-model="user.APPKEY" placeholder="请输入APPKEY" type="text" class="form-control"></div>
</div>
<br>
<div id="inputgroup" class="input-group">
<p v-show="user.APPKEY==''?false:true">APPKEY is: {{ user.APPKEY }}</p>
</div>
<br>
<div id="inputgroup" class="input-group">
<span class="input-group-addon">APPSECTKEY</span>
<input v-model="user.APPSECTKEY" placeholder="请输入APPSECTKEY" type="text" class="form-control">
</div>
<br>
<div id="inputgroup" class="input-group">
<p v-show="user.APPSECTKEY==''?false:true">APPSECTKEY is: {{ user.APPSECTKEY }}</p>
</div>
<br>
<div id="inputgroup" class="input-group">
<span class="input-group-addon">METHOD</span>
<input v-model="user.METHOD" type="text" placeholder="请输入METHOD" class="form-control">
</div>
<br>
<div id="inputgroup" class="input-group">
<p v-show="user.METHOD==''?false:true">METHOD is: {{ user.METHOD }}</p>
</div>
</form>
<br>
<div id="inputgroup" class="input-group">
<h5>请输入请求参数</h5>
<p v-for="(name,index) in user.names">
<input v-model="name.text" type="text" name="names[]">
<a href="javascript:void(0)" v-on:click="add">新增</a>
<a v-on:click="decrease(index)">刪除</a>
</p>
</div>
<br>
<div class="robot-b-xone" id="upload"><a v-on:click="uploadfile">上传并校验</a></div>
<br>
<!--提示框公共部分begining-->
<div class="modal-mask" v-show="show">
<div class="modal-confirm">
<h4 class="confirm-header">
<i class="iconfont icon-questioncircle"></i> {{ title }}
</h4>
<div class="confirm-content">
{{ content }}
</div>
<div class="confirm-btns">
<#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
<button class="btn btn-primary" v-on:click="opt(2)">确 定</button>
</div>
</div>
</div>
<br>
<!--提示框公共部分ending-->
<div class="modal-mask" v-show="showcontent">
<div class="modal-confirm">
<h4 class="confirm-header">
<i class="iconfont icon-questioncircle"></i> {{ title }}
</h4>
<div class="confirm-content">
{{ content }}
</div>
<div class="confirm-btns">
<#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
<button class="btn btn-primary" v-on:click="opt(3)">确 定</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="${ctx }/js/jquery/jquery-2.0.3.min.js"></script>
<script src="${ctx }/js/jquery.form.js"></script>
<script src="${ctx }/js/twbatch.js" type="text/javascript"></script>
<script src="${ctx }/js/vue/vue.js"></script>
<script src="${ctx }/js/business/subwelcome.js" type="text/javascript"></script>
</html>var vue = new Vue({
el: '#app',
data: {
user: {
APPSECTKEY: '',
APPKEY: '',
METHOD: '',
names: [{
text: undefined
}]
},
show: false,
showcontent: false,
onCancel: false,
onOk: false,
title: '提示框',
content: '加载......',
message: '批量数据处理',
defaultMessswage: '支持各种版本exel,文件不超过150',
value: {
// 绑定默认的value prop
default: undefined
},
},
methods: {
refreshTest: function () {
location.reload(true)
},
//输入框增加方法
add: function () {
this.user.names.push({
text: ""
})
},
handleFileChange ($event) {
var inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.file = $event.target.files[0] //获取要上传的文件
var tempfile = this.file.name;
var names = tempfile.split(".");
var lastStr = names[names.length - 1];
if (!(lastStr == "xls" || lastStr == "xlsx" )) {
vue.show = true;
vue.content = '请使用合法模板!';
return;
}
this.errText = '';
var size = Math.floor(this.file.size / 1024);
if (size > 153600) {
// 这里可以加个文件大小控制
vue.show = true;
vue.content = '文件过大请重新上传!';
return false
}
// 触发这个组件对象的input事件
//this.$emit('input', this.file);
// 这里就可以获取到文件的名字了
this.fileName = this.file.name;
this.defaultMessswage = this.fileName;
// 这里加个回调也是可以的
this.onChange && this.onChange(this.file, inputDOM.value);
},
//输入框删除方法
decrease: function (index) {
if (!index == 0) {
this.user.names.splice(index, 1)
}
},
checkparam(){
if (this.user.APPKEY == "" || this.user.APPKEY == undefined) {
vue.showcontent = true;
vue.content = '请输入APPKEY!';
return false
} else if (this.user.APPSECTKEY == "" || this.user.APPSECTKEY == undefined) {
vue.showcontent = true;
vue.content = '请输入APPSECTKEY!';
return false
} else if (this.file == undefined) {
vue.showcontent = true;
vue.content = '请选择文件!';
return false
} else if (this.user.METHOD == "" || this.user.METHOD == undefined) {
vue.showcontent = true;
vue.content = '请输入METHOD!';
return false
} else if (JSON.stringify(vue.user.names).length <= 4) {
vue.showcontent = true;
vue.content = '请输入请求参数!';
return false
}
else {
return true
}
},
opt(type){
this.show = false
if (type == '1') {
if (this.onCancel) this.onCancel()
}
else if (type == '3') {
this.showcontent = false
if (this.onOk) this.onOk()
}
else {
if (this.onOk) this.onOk()
vue.refreshTest();
}
this.onCancel = false
this.onOk = false
document.body.style.overflow = ''
},
uploadfile: function () {
var data = new FormData()
data.append("file", this.file)
data.append("user", JSON.stringify(this.user))
if (!vue.checkparam()) {
return
}
;
//da.append("name", this.name)可以逐次添加多个参数
$.ajax({
url: '../interface/validate_file',
data: data,
type: 'POST',
dataType: 'JSON',
cache: false,
processData: false,// 告诉jQuery不要去处理发送的数据
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
if (data.respCode == 'success') {
vue.show = true;
vue.content = '上传成功,请不要重复提交!';
}
console.log(data)
},
error: function (data) {
vue.show = true;
vue.content = '系统内部错误';
}
})
}
}
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 