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-pickerv-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);}

SpringBoot+html+vue模板开发相关推荐

基于SpringBoot+MybatisPlus+Vue+MySQL的体育用品商城设计
目录 1.项目简介 1 1.1背景分析 1 1.2功能概述 2 2.需求分析 4 前台页面的功能主要包括: 4 后台管理页面的功能主要包括: 5 3.数据库分析与设计 6 3.1 数据库需求分析 6 ...
视频教程-SpringBoot+Security+Vue前后端分离开发权限管理系统-Java
SpringBoot+Security+Vue前后端分离开发权限管理系统 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独 ...
SpringBoot+Vue项目实例开发及部署
目录一.SpringBoot快速上手 1.SpringBoot介绍 2.SpringBoot特点 3.快速创建SpringBoot应用 4.SpringBoot开发热部署二.Web开发基础 1.W ...
js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...
thymeleaf html模块化,SpringBoot中使用Thymeleaf模板开发的后台管理框架
系统简介 JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理.模块管理,数据库管理 ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
基于 SpringBoot + Vue 框架开发的网页版聊天室项目
‍ ‍简介微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...
基于Springboot+VUE框架开发的企业微信SCRM系统
应用介绍基于Springboot+ vue框架开发的企业微信SCRM 系统是一款基于人工智能的企业微信SCRM系统,企业微信SCRM系统基于企业微信开放能力,不仅集成了企微基础的客户管理和后台管理功 ...
一个基于SpringBoot + Mybatis + Vue的代码生成器
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! code-gen 一款代码生成工具,可自定义模板生成不同的 ...

SpringBoot+html+vue模板开发

SpringBoot+html+vue模板开发相关推荐

最新文章

热门文章