文章标题

来源：互联网发布：矩阵相似矩阵的迹编辑：程序博客网时间：2024/05/16 18:43

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>                &nbsp &nbsp<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 = '系统内部错误';                }            })        }    }})

0 0