SpringBoot+html+vue模板开发

除了对某个表基本的增删改查以外，可能需要额外的增加操作，这里是通过按钮来实现的

1、新增一个测试按钮 

<el-button type="primary" class="butT" @click="test()">测试</el-button>

 2、这个按钮绑定一个方法test（），这个方法是为了弹出一个框，只需要修改this.dialogFormVisibleTest的dialogFormVisibleTest值即可（dialogFormVisibleTest 是弹窗的名称，可以理解为是id）

// 弹出测试窗口
test() {
    this.dialogFormVisibleTest = true;
    this.resetForm();
}

 3、定义dialogFormVisibleTest 这个弹窗的内容

  <!-- 测试标签弹层 -->
            <div class="add-form">
                <el-dialog title="测试表单" :visible.sync="dialogFormVisibleTest">
                    <el-form ref="" :model="formData" :rules="rules" label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="输入框1" prop="code1">
                                    <el-input v-model="formData.code1"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="输入框2" prop="code2">
                                    <el-input v-model="formData.code2"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="下拉框" prop="xlk">
                                    <el-select v-model="formData.xlk">
                                        <el-option label="不限" value="0"></el-option>
                                        <el-option label="男" value="1"></el-option>
                                        <el-option label="女" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="时间"  prop="time">
                                    <el-date-picker
                                            v-model="formData.time"
                                            type="datetime"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="多行文本">
                                    <el-input v-model="formData.remark" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisibleTest = false">取消</el-button>
                        <el-button type="primary" @click="handleTest()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

  上面的弹窗包括常见的四种类型，输入文本框、时间、多行文本、下拉框，然后标红了的都是需要根据业务需求进行修改的地方，这里特别注意prop和v-model中绑定的值是要一致并且跟后端接收的实体类的属性名称要一致，不然表单数据就赋值不了给那个实体类，也就是后端就拿不到前端传过来的值了

 

 这个弹窗还有在vue的data里定义一下

 这样弹窗才会有效果

4、编写handleTest方法 ，只需要根据业务修改红色画出来的地方就可

 到这里整个前端就改好了

5、后端定义与前端对应的实体类

package com.sd.sbmb.entity;
 
import lombok.AllArgsConstructor;
import lombok.Data;
 
import java.io.Serializable;
import java.util.Date;
 
@Data
@AllArgsConstructor
public class Test implements Serializable {
    String code1;
    String code2;
    Integer xlk;
    String remark;
    Date time;
}

 6、写个控制器看看前端数据传给后端没

    //测试
    @RequestMapping("/handleTest")
    public Result handleTest(@RequestBody Test test){
        try {
            System.out.println(test);
        }catch (Exception e){
            return new Result(false,MessageConstant.EDIT_FAIL);
        }
        return new Result(true,MessageConstant.EDIT_SUCCESS);
    }