说明

创建 views/leave/add.vue 文件，该页面实现申请请假，如下图：

代码

<template>
    <div>
        <h1>请假</h1>
        <div>
        请假类型：
        <select v-model="type">
            <option v-for="item in type_datas" :key="item.id" :value='item.id'>{{item.text}}</option>
        </select>
        </div>
        <div>
        开始日期：<input type="date" v-model="start_date">
        </div>
        <div>
        结束日期：<input type="date" v-model="end_date">
        </div>
        <div>
        请假事由：<input v-model="reason" >

        </div>
        <div>请假人：<span>{{leave_name}}</span></div>
        <input type="button" @click="doSubmit()" value="提交">
        <div style="color:red;">{{msg}}</div>

    </div>
</template>
<script>
export default {
    data: function(){
        return { //是vue的配置，表示数据
            reason:"", // 设置表单控件的默认值
            type:"-1", // 设置表单控件的默认值
            start_date:"", // 设置表单控件的默认值
            end_date:"", // 设置表单控件的默认值
            leave_name:"", // 请假人
            type_datas:[
                    {id:"-1",text:"请选择"},
                    {id:"1",text:"事假"},
                    {id:"2",text:"病假"},
                    {id:"3",text:"产假"},
                    {id:"4",text:"婚假"}
                ],
            msg:""
        }
    },
    methods:{
        doSubmit:function(){
            //console.log("请假类型：",type) // 错误，需要通过this访问， 相当于java代码，通过this访问成员变量
            console.log("请假类型：",this.type) // 相当于java代码，通过this访问成员变量
            console.log("开始时间：",this.start_date)
            console.log("结束时间：",this.end_date)
            console.log("请假原由：",this.reason)
            //非空校验
            if( this.type === "-1"){
                this.msg="请选择请假类型！"
                return
            }
            if( this.start_date === ""){
                this.msg="请填写开始时间！"
                return
            }
            if( this.end_date === ""){
                this.msg="请填写结束时间！"
                return
            }
            if( this.reason === ""){
                this.msg="请填写请假事由！"
                return
            }
            this.msg=""

            //调用axios发请求，需要通过post方法
            //axios中，通过post传参数，需要通过下面对象
            let params = new URLSearchParams();
            params.append("type", this.type);
            params.append("start_date", this.start_date)
            params.append("end_date", this.end_date)
            params.append("reason", this.reason)

            this.$axios.post('leaveServletJWT', params)
              .then(res => {
                console.log(res);
                if(res.data.code===0){
                    alert("提交成功！");
                    this.$router.push("/leave/list")
                }
              })
              .catch(function (error) {// 请求失败处理
                console.log(error);
              });
        }
    },
    mounted:function(){ // vue挂载完成后，发送ajax请求

        //将返回结果赋值给 vue 的 leave_name
        this.leave_name=sessionStorage.getItem("realName")
    }
}
</script>

原文出处：/show_1IX2orzjIkOZ.html