Vue 将el-form数据,转换为json post 提交Spring Boot后台

Posted 在奋斗的大道

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 将el-form数据,转换为json post 提交Spring Boot后台相关的知识,希望对你有一定的参考价值。

第一步:创建一个表单数据集(定时任务过滤参数实体)

表单数据集(定时任务过滤参数实体)定义

 el-form 绑定表单数据集(定时任务过滤参数实体)定义:

 <div>
    <el-col :span="24">
      <el-form :inline="true" :model="queryParams" ref="queryParams">
        <el-form-item label="定时任务类名">
          <el-input v-model="queryParams.jobName"  placeholder="类名"></el-input>
        </el-form-item>
        <el-form-item label="定时任务实体名称">
          <el-input v-model="queryParams.beanName"  placeholder="实体名称"></el-input>
        </el-form-item>
        <el-form-item >
        <el-form-item label="定时任务方法名称">
          <el-input v-model="queryParams.methodName"  placeholder="方法名称"></el-input>
        </el-form-item>
        <el-form-item label="定时任务状态">
           <el-select v-model="queryParams.status" placeholder="任务状态">
                <el-option label="启动" value="0"></el-option>
                <el-option label="停止" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="定时任务删除状态">
          <el-select v-model="queryParams.delFlag" placeholder="删除状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="删除" value="1"></el-option>
            </el-select>
        </el-form-item>
        
        </el-form-item>
      </el-form>
    </el-col>
    <el-col>
         <!--自定义searchHandler函数-->
            <el-button type="primary" @click="searchHandler">查询</el-button>
            <!---->
            <el-button type="primary" @click="reset">重置</el-button>

             <!---->
            <el-button type="primary" @click="dialogFormAdd = true">新增</el-button>

             <el-button type="primary" @click="stopAll">暂停所有定时任务</el-button>

              <el-button type="primary" @click="startAll">开启所有定时任务</el-button>
    </el-col>

第二步:表单数据集(定时任务过滤参数实体)参数转换为JSON

触发条件,点击查询按钮触发相关事件执行(在method 定义如下方法)

searchHandler() {
        var self = this
        this.$axios({
          method:'post',
          url:'/api/scheduleJob/getPage',
          data:JSON.stringify(this.queryParams),
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          console.log(res);
         self.pagination.total = res.data.datas.data.total;
          self.tableData = res.data.datas.data.records;
        })
          .catch(function (error) {
            console.log(error)
          })
      },

核心代码片段=data:JSON.stringify(this.queryParams)

动态定时任务效果展示和前端相关代码

 

 

Vue 动态定时任务界面核心代码:

<style>
</style>
<template>
  <div>
    <el-col :span="24">
      <el-form :inline="true" :model="queryParams" ref="queryParams">
        <el-form-item label="定时任务类名">
          <el-input v-model="queryParams.jobName"  placeholder="类名"></el-input>
        </el-form-item>
        <el-form-item label="定时任务实体名称">
          <el-input v-model="queryParams.beanName"  placeholder="实体名称"></el-input>
        </el-form-item>
        <el-form-item >
        <el-form-item label="定时任务方法名称">
          <el-input v-model="queryParams.methodName"  placeholder="方法名称"></el-input>
        </el-form-item>
        <el-form-item label="定时任务状态">
           <el-select v-model="queryParams.status" placeholder="任务状态">
                <el-option label="启动" value="0"></el-option>
                <el-option label="停止" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="定时任务删除状态">
          <el-select v-model="queryParams.delFlag" placeholder="删除状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="删除" value="1"></el-option>
            </el-select>
        </el-form-item>
        
        </el-form-item>
      </el-form>
    </el-col>
    <el-col>
         <!--自定义searchHandler函数-->
            <el-button type="primary" @click="searchHandler">查询</el-button>
            <!---->
            <el-button type="primary" @click="reset">重置</el-button>

             <!---->
            <el-button type="primary" @click="dialogFormAdd = true">新增</el-button>

             <el-button type="primary" @click="stopAll">暂停所有定时任务</el-button>

              <el-button type="primary" @click="startAll">开启所有定时任务</el-button>
    </el-col>
    <!--
    <p style="text-align: left; margin-bottom: 10px;">
      <el-button type="primary" @click="dialogFormAdd = true">添加</el-button>
    </p>-->
    <el-col>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          v-for="(data,index) in tableHeader"
          :key="index"
          :prop="data.prop"
          :label="data.label"
          :min-width="data['min-width']"
          :align="data.align">
        </el-table-column>
        <el-table-column
          prop="status"
          label="任务状态">
          <template slot-scope="scope">{{ scope.row.status === 0 ? '启动' : '停止' }}</template>
        </el-table-column>
        <el-table-column
          prop="delFlag"
          label="删除状态">
          <template slot-scope="scope">{{ scope.row.delFlag === 0 ? '正常' : '删除' }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="240">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteMember(scope)">删除</el-button>

            <el-button type="info" v-if="scope.row.status == 1" size="mini" @click="startQuartz(scope)">任务启动</el-button>
            <el-button type="warning" v-if="scope.row.status == 0" size="mini" @click="stopQuartz(scope)">任务暂停</el-button>
            <el-button type="danger" size="mini" @click="deleteQuartz(scope)">任务删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageIndex"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=pagination.total>
      </el-pagination>
    </el-col>
 
    <el-dialog title="添加定时任务" :visible.sync="dialogFormAdd">
      <el-form :model="member">
        <el-form-item label="任务名称" >
          <el-input v-model="member.jobName" auto-complete="off"></el-input>
        </el-form-item>
         <el-form-item label="任务表达式" >
          <el-input v-model="member.cronExpression" auto-complete="off"></el-input>
        </el-form-item>
         <el-form-item label="实体名称" >
          <el-input v-model="member.beanName" auto-complete="off"></el-input>
        </el-form-item>
         <el-form-item label="方法名称" >
          <el-input v-model="member.methodName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">取 消</el-button>
        <el-button type="primary" @click="add(member)">确 定</el-button>
      </div>
    </el-dialog>
 
    <el-dialog title="修改定时任务" :visible.sync="dialogFormEdit">
      <el-form :model="member">
        <el-form-item label="任务名称" >
          <el-input v-model="member.jobName" auto-complete="off"></el-input>
        </el-form-item>
         <el-form-item label="任务表达式" >
          <el-input v-model="member.cronExpression" auto-complete="off"></el-input>
        </el-form-item>
         <el-form-item label="实体名称" >
          <el-input v-model="member.beanName" auto-complete="off"></el-input>
        </el-form-item>
         <el-form-item label="方法名称" >
          <el-input v-model="member.methodName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务状态" >
          <el-select v-model="member.status" placeholder="任务状态">
                <el-option label="启动" value="0"></el-option>
                <el-option label="停止" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="删除状态" >
           <el-select v-model="member.delFlag" placeholder="删除状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="删除" value="1"></el-option>
            </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="edit(member)">确 定</el-button>
      </div>
    </el-dialog>
 
  </div>
</template>
 
<script>
  
  export default{
    name: 'member',
    data () {
      return {
        tableData: [],
        dialogFormEdit: false,
        dialogFormAdd:false,
        member: {
          sid: '',
          jobName: '',
          cronExpression: '',
          beanName: '',
          methodName: '',
          status: '',
          createTime:'',
          updateTime:'',
          delFlag:''
        },
        queryParams:{
          jobName:'',
          beanName:'',
          methodName:'',
          status:'',
          delFlag:''
        },
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
        },
        tableHeader: [
          {
            prop: 'id',
            label: '任务编号',
            align: 'left'
          },
          {
            prop: 'jobName',
            label: '任务名称',
            align: 'left'
          },
          {
            prop: 'cronExpression',
            label: '任务表达式',
            align: 'left'
          },
          {
            prop: 'beanName',
            label: '实体名称',
            align: 'left'
          },
          {
            prop: 'methodName',
            label: '方法名称',
            align: 'left'
          }
        ]
      }
    },
    methods: {
      init () {
        var self = this
        this.$axios({
          method:'post',
          url:'/api/scheduleJob/getPage',
          data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize},
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          console.log(res);
          self.pagination.total = res.data.datas.data.total;
          self.tableData = res.data.datas.data.records;
        })
          .catch(function (error) {
            console.log(error)
          })
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageIndex = 1;
        this.init();
      },
      handleCurrentChange(val) {
        this.pagination.pageIndex = val;
        this.init();
      },
      add (member) {
        console.log("添加事件被触发")
        this.$axios({
          method:'post',
          url:'/api/scheduleJob/insert',
          data:JSON.stringify(member),
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          this.$message.success('添加成功')
          this.dialogFormAdd = false
          this.init()
        })
          .catch(function (error) {
            console.log(error)
          })
      },
      toEdit (scope) {
        this.member.sid = scope.row.id
        this.member.jobName = scope.row.jobName
        this.member.cronExpression = scope.row.cronExpression
        this.member.beanName = scope.row.beanName
        this.member.methodName = scope.row.methodName
        this.member.status = scope.row.status.toString()
        this.member.delFlag = scope.row.delFlag.toString()
        this.dialogFormEdit = true
      },
      edit () {
        
        var params ={
          'id' : this.member.sid,
          'jobName' : this.member.jobName,
          'cronExpression' : this.member.cronExpression,
          'beanName' :  this.member.beanName,
          'methodName' : this.member.methodName,
          'status' : this.member.status,
          'delFlag' : this.member.delFlag
        }
 
        this.$axios({
          method:'post',
          url:'/api/scheduleJob/update',
          data:params,
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          this.$message.success('修改成功')
          this.dialogFormEdit = false
          this.init()
        }).catch(function (error) {
          console.log(error)
        })
      },
      deleteMember (scope) {
        if (!scope.row.id) {
          this.tableData.splice(scope.$index, 1)
        } else {
          this.$confirm('确认是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          })
            .then(() => {
            console.log(scope.row.id)
            var params ={
                 'id' : scope.row.id
            }
             
        this.$axios({
          method:'post',
          url:'/api/scheduleJob/delete',
          data:params,
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          this.$message.success('修改成功')
          this.init()
        }).catch(function (error) {
          console.log(error)
        })
        })
        }
      },
      deleteQuartz(scope) {
           if (!scope.row.id) {
          this.tableData.splice(scope.$index, 1)
        } else {
          this.$confirm('确认是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          })
            .then(() => {
            console.log(scope.row.id)
            var params ={
                 'id' : scope.row.id,
                 'jobName' : scope.row.jobName
            }
             
        this.$axios({
          method:'post',
          url:'/api/quartz/deleteJob',
          data:JSON.stringify(params),
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          console.log(res)
          this.$message.success('删除成功')
          this.init()
        }).catch(function (error) {
          console.log(error)
        })
        })
        }
      },
      startQuartz(scope) {
          if (!scope.row.id) {
          this.tableData.splice(scope.$index, 1)
        } else {
          this.$confirm('确认是否启动', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          })
            .then(() => {
            console.log(scope.row.id)
            var params ={
                 'id' : scope.row.id,
                 'jobName' : scope.row.jobName
            }
             
        this.$axios({
          method:'post',
          url:'/api/quartz/startJob',
          data:JSON.stringify(params),
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          console.log(res)
          this.$message.success('启动成功')
          this.init()
        }).catch(function (error) {
          console.log(error)
        })
        })
        }
      },
      stopQuartz(scope) {
          if (!scope.row.id) {
          this.tableData.splice(scope.$index, 1)
        } else {
          this.$confirm('确认是否暂停', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          })
            .then(() => {
            console.log(scope.row)
            var params ={
                 'id' : scope.row.id,
                 'jobName' : scope.row.jobName
            }
             
        this.$axios({
          method:'post',
          url:'/api/quartz/pauseJob',
          data:JSON.stringify(params),
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          console.log(res)
          this.$message.success('暂停成功')
          this.init()
        }).catch(function (error) {
          console.log(error)
        })
        })
        }
      },
      searchHandler() {
        var self = this
        this.$axios({
          method:'post',
          url:'/api/scheduleJob/getPage',
          data:JSON.stringify(this.queryParams),
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          console.log(res);
         self.pagination.total = res.data.datas.data.total;
          self.tableData = res.data.datas.data.records;
        })
          .catch(function (error) {
            console.log(error)
          })
      },
      reset(){
         //  重新设置请求参数实体属性
        this.queryParams = {
        jobName:undefined,
        beanName:undefined,
        methodName:undefined,
        status:undefined,
        delFlag:undefined
        };
        //表单验证还原
        if (this.$refs['queryParams'] !== undefined) {
           this.$refs['queryParams'].resetFields();
        }else{
          this.$nextTick(()=>{
            this.$refs['queryParams'].resetFields();
          });
        }
      },
      startAll(){
            this.$axios({
          method:'post',
          url:'/api/quartz/startAllJob',
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          this.$message.success('定时任务全部启动成功')
         
        }).catch(function (error) {
          console.log(error)
        })
      },
      stopAll(){
            this.$axios({
          method:'post',
          url:'/api/quartz/pauseAllJob',
          headers:{
            'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
          this.$message.success('定时任务全部暂停成功')
        }).catch(function (error) {
          console.log(error)
        })
      }
    },
    mounted: function () {
      this.init()
    }
  }
</script>

 

 

 

 

 

 

以上是关于Vue 将el-form数据,转换为json post 提交Spring Boot后台的主要内容,如果未能解决你的问题,请参考以下文章

po2json的安装和使用方法

将 JSON 转换为 XML

vue el-form鼠标事件导致页面刷新解决方案;vue 阻止多次点击提交数据通用方法

Vue - 将 JSON 对象转换为具有特定布局的字符串

小5聊Vue基础开发之el-form表单自定义规则校验value为underfind的情况

vue+el-form表单验证、提交及重置