VUE+ElementUI+SpringBoot前后端交互实现动态增加文本组

已于 2022-11-22 18:35:07 修改
阅读量1.2k 收藏 6
点赞数
分类专栏： 实战案例 文章标签： vue.js elementui javascript springboot
于 2022-11-22 18:22:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44172158/article/details/127872845
版权

实战说明：本文主要讲解前后端分离框架实现动态增加、删除文本框组，前端VUE+ElementUI，介绍如何通过JS动态增；后端：springboot+mybatis，介绍如何设计主子表对表单提交的数据进行存储，实现如下界面效果：

前端vue界面设计：

   以打开一个对话框为例，在对话框中可以点击加号，增加多个文本组；点击减号，减少文本组。核心代码从 <span class="title">组合</span>开始到 <el-button @click="addList()">添加</el-button>，为上图的代码描述。

//打开一个对话框
el-dialog :title="title" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="名称" prop="modelName"  >
              <el-input v-model="form.modelNameMix" placeholder="请输入名称" disabled/>
        </el-form-item>
        <el-form-item label="分类" prop="assortMix"  :rules="{required: true, message:'请输入类别', trigger: 'blur'}">
          <el-select v-model="form.assortMix" placeholder="云智能分类">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <span class="title">组合</span>
        <el-row :gutter="20" v-for="(item,index) in form.modeList" :key="index">
          <el-col :span="9">
            <el-form-item :label="'范围'+index" :prop="'modeList.'+index+'.forecastRange'"
                          :rules="{required: true, message:'请输入范围', trigger: 'blur'}">
              <el-input v-model="item.forecastRange" placeholder="请输入范围"/>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item :label="'字段'+index" :prop="'modeList.'+index+'.functionalDirectiveEn'"
                          :rules="{required: true, message:'请输入字段', trigger: 'blur'}">
              <el-input v-model="item.functionalDirectiveEn" placeholder="请输入字段"/>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item :label="'名称'+index" :prop="'modeList.'+index+'.functionalDirectiveCn'"
                          :rules="{required: true, message:'请输入名称', trigger: 'blur'}">
              <el-input v-model="item.functionalDirectiveCn" placeholder="请输入名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item :label="'温度'+index" :prop="'modeList.'+index+'.targetTemperature'"
                          :rules="{required: true, message:'请输入温度', trigger: 'blur'}">
              <el-input v-model="item.targetTemperature" placeholder="请输入温度"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button circle icon="el-icon-plus" @click="addList()"></el-button>
            <el-button circle icon="el-icon-minus" @click="subList(item)"></el-button>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="addList()">添加</el-button>
        </el-form-item>
        <el-form-item label="公式" prop="formulaDescMix">
          <el-input v-model="form.formulaDescMix" placeholder="请输入公式"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

前端脚本设计：需要定义数据列表，列表中的值是需要动态增加的值，因文本框中默认数据都是空，因此初始化设置时全部都是空字符串。

modeList: [
          {
            forecastRange: '', functionalDirectiveCn: '', targetTemperature: '',
            functionalDirectiveEn: ''
          }
        ]

  当点击加号时，通过push动态的增加文本框数据到modeList；当点击减号时，通过indexOf找到要移除项的位置,并通过splice移除数组中的值。

export default {
  name: "SmartSchema",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 模式表格数据
      smartSchemaList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,  
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        modelNameMix: [
          {required: true, message: "名称不能为空", trigger: "blur"},
        ],
        functionalDirectiveEnMix: [
          {required: true, message: "字段不能为空", trigger: "blur"},
        ],
        functionalDirectiveCnMix: [
          {required: true, message: "名称不能为空", trigger: "blur"},
        ],
        forecastRangeMix: [
          {required: true, message: "范围不能为空", trigger: "blur"},
        ],
        targetTemperatureMix: [
          {required: true, message: "温度不能为空", trigger: "blur"},
        ],
      },
      requestMapping: '/smart/smartSchema',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listSmartSchema(this.queryParams).then(response => {
        this.smartSchemaList = response.rows;
        // this.smartSchemaList = this.handleTree(response.data, "id","subId","modeList");
        this.total = response.total;
        this.loading = false;
      });
    },
  
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        modelNameMix: null,
        forecastRangeMix: null,
        assortMix: null,
        functionalDirectiveCnMix: null,
        targetTemperatureMix: null,
        formulaDescMix: null,
        modelDescMix: null,
        applyUserId: null,
        applyUserName: null,
        applyTime: null,
        instanceId: null,
        processKey: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        modeList: [
          {
            forecastRange: '', functionalDirectiveCn: '', targetTemperature: '',
            functionalDirectiveEn: ''
          }
        ]
      };
      this.resetForm("form");
    },
  
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSmartSchema(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSmartSchema(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    //加号
    addList() {
      this.form.modeList.push({
        forecastRange: '',
        functionalDirectiveCn: '',
        targetTemperature: '',
        functionalDirectiveEn: '',
        key: Date.now()
      });
    },
    //减号
    subList(item) {
      var index = this.form.modeList.indexOf(item)
      if (index !== -1) {
        this.form.modeList.splice(index, 1)
      }
    }
  }
};

JS脚本，实现服务端接口的访问：

// 新增
export function addSmartSchema(data) {
  return request({
    url: '/smart/smartSchema',
    method: 'post',
    data: data
  })
}

// 修改
export function updateSmartSchema(data) {
  return request({
    url: '/smart/smartSchema',
    method: 'put',
    data: data
  })
}

服务端业务实体类：前端提交到服务端的数据存在一对多的关系，因此在设计业务实体类的时候需要考虑在一个实体类中引入另一个实体类，而且时多个。因此，这里设计两个实体类，把文本框组合看成一个实体类ModelVo，表单中所有的属性值看作一个实体类BizSmartSchema，并在其实体类下面定义列表List<ModelVo>。

public class BizSmartSchema extends ProcessEntity {
    private static final long serialVersionUID = 1L;

    /**
     * 主键ID
     */
    private Long id;

    /**
     * 分类
     */
    @Excel(name = "分类")
    private String assortMix;

    /**
     * 名称
     */
    @Excel(name = "名称")
    private String modelNameMix;

    /**
     * 描述
     */
    @Excel(name = "描述")
    private String modelDescMix;

    /**
     * 预测范围
     */
    @Excel(name = "范围")
    private String forecastRangeMix;

    /**
     * 字段
     */
    @Excel(name = "字段")
    private String functionalDirectiveEnMix;

    /**
     * 名称
     */
    @Excel(name = "名称")
    private String functionalDirectiveCnMix;

    /**
     * 温度
     */
    @Excel(name = "温度")
    private String targetTemperatureMix;

    /**
     * 适配公式
     */
    @Excel(name = "公式")
    private String formulaDescMix;

    /**
     * 当前模式生效状态
     */
    @Excel(name = "状态")
    private String state;
   /**
    *模型文本框列表
    */
    private List<ModelVo> modeList;
    //表示当前字段是否为数据库字段,false标识不是
    @TableField(exist=false)
    private boolean hasChildren;

}

controller层，直接拿到请求参数，往后传给服务层。

    @PreAuthorize("@ss.hasPermi('smart:smartSchema:add')")
    @Log(title = "模式", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody BizSmartSchema bizSmartSchema) {
        return toAjax(bizSmartSchemaService.insertBizSmartSchema(bizSmartSchema));
    }

业务实现层： 设计主表跟子表，主表存form表单的主数据字段，子表存多个文本框数据。插入时考虑事务的ACID特性，此处重点关注的事务的原子性，主表插入后，子表也要插入。主表插入时，需要将前端传过来的多个文本框的同一类数据组合成一个字符串，然后存入相应的字段。

    @Override
    @Transactional
    public int insertBizSmartSchema(BizSmartSchema bizSmartSchema) {
        bizSmartSchema.setCreateBy(SecurityUtils.getUsername());
        bizSmartSchema.setCreateTime(DateUtils.getNowDate());
        //主子表设计
//        //遍历modeList将温度范围值、目标温度值进行封装，模式描述里面拼接具体情况。
        List<ModelVo> modeList = bizSmartSchema.getModeList();
        //描述数据
        StringBuffer sbModelDesc = new StringBuffer();
        //范围数据
        StringBuffer sbForecastRange = new StringBuffer();
        //温度数据
        StringBuffer sbTargetTemperature = new StringBuffer();
        //字段数据
        StringBuffer sbFunctionalDirectiveEn = new StringBuffer();
        //名称数据
        StringBuffer sbFunctionalDirectiveCn = new StringBuffer();

        modeList.forEach(str -> {
                    sbModelDesc.append(str.getFunctionalDirectiveCn() + ",")
                            .append(str.getFunctionalDirectiveEn() + ",")
                            .append(str.getForecastRange() + ",")
                            .append(str.getTargetTemperature() + ";" + "\n");
                    sbForecastRange.append(str.getForecastRange() + ";");
                    sbTargetTemperature.append(str.getTargetTemperature() + ";");
                    sbFunctionalDirectiveEn.append(str.getFunctionalDirectiveEn() + ";");
                    sbFunctionalDirectiveCn.append(str.getFunctionalDirectiveCn() + ";");

                }
        );
        bizSmartSchema.setForecastRangeMix(sbForecastRange.toString());
        bizSmartSchema.setFunctionalDirectiveCnMix(sbFunctionalDirectiveCn.toString());
        bizSmartSchema.setFunctionalDirectiveEnMix(sbFunctionalDirectiveEn.toString());
        bizSmartSchema.setTargetTemperatureMix(sbTargetTemperature.toString());
        bizSmartSchema.setModelDescMix(sbModelDesc.toString());
        int a = bizSmartSchemaMapper.insertBizSmartSchema(bizSmartSchema);
        modeList.forEach(str -> {
            //每次使用之前清空数据
            sbModelDesc.setLength(0);
            sbModelDesc.append(str.getFunctionalDirectiveCn() + ",")
                    .append(str.getFunctionalDirectiveEn() + ",")
                    .append(str.getForecastRange() + ",")
                    .append(str.getTargetTemperature() + ";" + "\n");
            str.setAssort(bizSmartSchema.getAssortMix());
            str.setModelDesc(sbModelDesc.toString());
            str.setModelName(bizSmartSchema.getModelNameMix());
            str.setSubId(bizSmartSchema.getId());
            str.setState("0");//未提交申请
            str.setFormulaDesc(bizSmartSchema.getFormulaDescMix());
        });
        int b = bizSmartSchemaMapper.insertBizSmartSchemaSub(modeList);
        return b;
    }

MAPPER层： 主表字段根据动态插入库中一条数据，子表则根据文本框组的个数生成多条数据，同时在子表设计时还要引入主表的主键作为外键使用。

<insert id="insertBizSmartSchema" parameterType="BizSmartSchema" useGeneratedKeys="true" keyProperty="id">
        insert into con_data.app_electricheater_zero_tb_adaptive_model_detail
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="assortMix != null">
                assort,
            </if>
            <if test="modelNameMix != null">
                model_name,
            </if>
            <if test="modelDescMix != null">
                model_desc,
            </if>
            <if test="functionalDirectiveCnMix != null">
                functional_directive_cn,
            </if>
            <if test="functionalDirectiveEnMix != null">
                functional_directive_en,
            </if>
            <if test="forecastRangeMix != null">
                forecast_range,
            </if>
            <if test="targetTemperatureMix != null">
                target_temperature,
            </if>
            <if test="formulaDescMix != null">
                formula_desc,
            </if>
            <if test="applyUserId != null">
                apply_user_id,
            </if>
            <if test="applyUserName != null">
                apply_user_name,
            </if>
            <if test="applyTime != null">
                apply_time,
            </if>
            <if test="instanceId != null">
                instance_id,
            </if>
            <if test="processKey != null">
                process_key,
            </if>
            <if test="delFlag != null">
                del_flag,
            </if>
            <if test="createBy != null">
                create_by,
            </if>
            <if test="createTime != null">
                create_time,
            </if>
            <if test="updateBy != null">
                update_by,
            </if>
            <if test="updateTime != null">
                update_time,
            </if>
            <if test="remark != null">
                remark,
            </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="assortMix != null">
                #{assortMix},
            </if>
            <if test="modelNameMix != null">
                #{modelNameMix},
            </if>
            <if test="modelDescMix != null">
                #{modelDescMix},
            </if>
            <if test="functionalDirectiveCnMix != null">
                #{functionalDirectiveCnMix},
            </if>
            <if test="functionalDirectiveEnMix != null">
                #{functionalDirectiveEnMix},
            </if>
            <if test="forecastRangeMix != null">
                #{forecastRangeMix},
            </if>
            <if test="targetTemperatureMix != null">
                #{targetTemperatureMix},
            </if>
            <if test="formulaDescMix != null">
                #{formulaDescMix},
            </if>
            <if test="applyUserId != null">
                #{applyUserId},
            </if>
            <if test="applyUserName != null">
                #{applyUserName},
            </if>
            <if test="applyTime != null">
                #{applyTime},
            </if>
            <if test="instanceId != null">
                #{instanceId},
            </if>
            <if test="processKey != null">
                #{processKey},
            </if>
            <if test="delFlag != null">
                #{delFlag},
            </if>
            <if test="createBy != null">
                #{createBy},
            </if>
            <if test="createTime != null">
                #{createTime},
            </if>
            <if test="updateBy != null">
                #{updateBy},
            </if>
            <if test="updateTime != null">
                #{updateTime},
            </if>
            <if test="remark != null">
                #{remark},
            </if>
        </trim>
    </insert>
    <insert id="insertBizSmartSchemaSub" parameterType="java.util.List" useGeneratedKeys="true" keyProperty="modelId">
        <!--列表选填list,跟前面起的名字没有关系-->
        insert into con_data.app_electricheater_zero_tb_adaptive_model
        ( sub_id,
        model_name,
        model_desc,
        assort,
        functional_directive_cn,
        functional_directive_en,
        forecast_range,
        target_temperature,
        formula_desc,
        state) values
        <foreach collection='list' item='modelVo' separator=",">
            (#{modelVo.subId},
            #{modelVo.modelName},
            #{modelVo.modelDesc},
            #{modelVo.assort},
            #{modelVo.functionalDirectiveCn},
            #{modelVo.functionalDirectiveEn},
            #{modelVo.forecastRange},
            #{modelVo.targetTemperature},
            #{modelVo.formulaDesc},
            #{modelVo.state})
        </foreach>
    </insert>

详细代码可留言，发邮箱。

钱昱潼
关注
专栏目录
前端动态追加元素input
菜鸟老五
10-10 477
//如图效果 <template> <view> <!-- 消息 --> <view class=""> <u-top-tips ref="uTips"></u-top-tips> </view> <!-- --> <!-- 标签列表 --> <u-gap..
vue3 ts 点击加号添加一行
山海也有意难平
11-01 1203
<div style="width: 860px; height: 130px; border: 1px solid gray; margin-bottom: 50px" v-show="addAccountForm" v-for="(item, index) in accountFormDatas.applyNeed" :key="index"> <div style="display: flex; margin-top: 10px"> &lt.
element- UI checkbox与后端的动态交互
m0_52518047的博客
09-29 696
最近在做公司的一个项目用到了element UI的checkbox这块东西，单纯的去使用没什么难度，但是问题是后边的红色部分的选项是由后端生成的，是否被选中也是由后端来决定的，我想就如何实现这个效果进行一个思路总结 思路分为这样： （1）拿到后端所提供的所有选择项，便利循环选择项 （2）拿到后端选择的内容 (3)两个数组双重循环，对总的选择项中被选择到的选项添加一个新的属性checked // 硬件循环 row.hardwareModelVOs.map((v) => { this.hardw
【element+vue】点击加号增加一行，点击减号删除一行
随意记录
12-08 7269
【element+vue】点击加号增加一行，点击减号删除一行
springboot+vue前后端分离项目（后台管理系统）
m0_67265919的博客
03-08 3516
学习笔记 学习资源来自于B站UP，up他讲的非常详细，对于熟悉两大框架很有用。 我的作业源代码在文章末尾，欢迎有需要的同学，学习参考使用，内置SQL文件，导入后，开启springboot和vue服务即可使用，注意更改自己的数据库信息配置，一起学习，一起进步哦！！ 一、所使用的环境配置： 编译器：IDEA 后台框架：SpringBoot Mybatis-Plus 数据库：Mysql8.0 数据库工具：Navicat premium 前端框架：Vue Element UI 引用的富文本编辑器：wangEdito
Springboot+Vue+Element实现的CRM管理系统
zzzzzkkk的博客
08-10 2425
文章介绍 本文主要记录使用springboot和vue进行整合开发流程，实现前后端分离，具体步骤和知识点都会讲解记录或者是在注释中进行说明。使用Element工具提供组件，实现（CRM）客户关系管理的一个系统。开发工具使用Idea和Vscode,使用vue-cli搭建项目，实现前后端分离。下文将对项目的用户管理模块进行讲解记录，管理员可对用户进行添加，删除，修改，查询等功能。后端控制层使用REST风格提供接口 项目搭建，如果已经安装过vue-cli脚手架可跳过这一步，使用Idea的搭建springboot就
Springboot+Vue+ElementUI房屋租赁平台网站设计案例源码
资源摘要信息: "基于Springboot+Vue+ElementUI房屋租赁平台网站设计毕业源码案例设计.zip" 知识点详细说明: 1. Spring Boot框架知识点: - Spring Boot是一个开源的Java框架，它用于简化新Spring应用的初始搭建...
教你如何制作vue+springboot项目
m0_67392409的博客
07-30 655
以上，完整的vue+springboot教程就完成了，如需要参考，可以查看本人制作的基于vue+springboot的学生成绩管理系统作为参考学生成绩管理系统先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。httpshttpshttpshttps。...
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
vue 点击按钮增加一行的方法
01-19
如下所示： data() { return { customized_descs: [1]， } }, 不要js，jq里面的方法了。 以上这篇vue 点击按钮增加一行的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue 动态添加 HTML元素
06-13
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
vue +element +el-select +input 点击加号添加一行
weixin_45974516的博客
12-25 3237
** vue +element +el-select +input 点击加号添加一行 ** 直接上代码。 <div class="details"> <div class="detailsblcok" v-for="(v, index) in detailslist" :key="index" > <!-- 用户 --
基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程（四）——前后端数据交互
weixin_46662581的博客
03-08 2948
经过前面几个章节的学习我们掌握了：1、如何使用Vue快速搭建前端工程化项目，并结合elementUI优化了界面；2、还学会了使用注解、xml配置两种方式对后端进行数据库CRUD操作；在第四章节我们学习前后端跨域连接，这样就架起了前后端交互的桥梁。
vue项目中动态创建输入框功能（项目实战）
可乐加冰的博客
07-19 4523
vue项目中动态创建输入框功能，并返回指定数据格式
vue elementui 动态追加下拉框、输入框
最新发布
Z18834071903的博客
04-26 2050
vue elementui 动态追加下拉框、输入框
Vue+ElementUI实现点击加号动态添加
qq_42753983的博客
12-28 967
1.需求是点击加号图标往下增加，最多增加5行，最少显示一行（每条前面输入框不能为空及每条的前面输入框的值不能重复）
vue+element UI 实战点击按钮添加一组输入框
qq_44811609的博客
12-29 5330
点击添加实验组 ，添加一组输入框,点击减号删除一组输入框 <el-button type="primary" style="margin-left:30px" @click="addItem">添加实验组</el-button> <div class="form" v-show="dialogForm" v-for="(item,index) in List" :key=...
vue中点击加减按钮，添加或删除一列输入框
Super Livia
10-27 1727
<template> <el-form :model="form"> <div v-for="(item,index) in form.addForm" :key="`addForm${index}`"> <el-col :span="7"> <el-form-item label="" :prop="`addForm.${index}.name`"> .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值