若依框架 前端Vue弹出对话框后将多个参数传递给后端 例子

若依（Ruoyi）是一款基于 Spring Boot 2.x 和 Vue 开发的前后端分离的开源框架，提供了多个组件和工具类，方便开发人员快速搭建企业级应用程序。下面是一个使用若依框架实现前端Vue弹出对话框并将多个参数传递给后端的例子。

1. 在后端接口中定义需要接收的多个参数，例如：

@RequestMapping("/addUser")
public AjaxResult addUser(String username, String password, Integer age) {
    // 处理添加用户的逻辑
}

2. 在前端Vue组件中使用Dialog组件实现弹出对话框的效果，例如：

<template>
  <div>
    <el-button type="primary" @click="showDialog = true">添加用户</el-button>
    <el-dialog title="添加用户" :visible.sync="showDialog" :close-on-click-modal="false">
      <el-form ref="form" :model="formData">
        <el-form-item label="用户名">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input type="number" v-model="formData.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { addSysUser } from '@/api/system/user'

  export default {
    data() {
      return {
        showDialog: false,
        formData: {
          username: '',
          password: '',
          age: null
        }
      }
    },
    methods: {
      submitForm() {
        addSysUser(this.formData).then(res => {
          if (res.code === 200) {
            this.$message.success('添加用户成功')
            this.showDialog = false
          } else {
            this.$message.error(res.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

在这个示例中，我们使用了Element UI中的el-dialog弹出对话框组件，el-form表单组件和el-button按钮组件，通过v-model将表单数据绑定到formData对象上，通过调用addSysUser方法将formData作为参数提交给后端接口。

3. 在前端api文件中定义addSysUser方法，例如：

import request from '@/utils/request'

export function addSysUser(data) {
  return request({
    url: '/system/user/addUser',
    method: 'post',
    data: data
  })
}

在这个示例中，我们使用了若依框架提供的request方法，通过传入url、method和data等参数发起http请求，将data作为参数提交给后端接口。

通过以上步骤，我们可以在前端Vue弹出对话框并将多个参数传递给后端，实现添加用户的功能。