springboot实现表单添加功能

最新推荐文章于 2024-05-16 13:30:42 发布
最新推荐文章于 2024-05-16 13:30:42 发布
阅读量470 收藏 2
点赞数
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52858329/article/details/130551281
版权

 1.新建按钮

 <div class="filter-container">
                <el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书描述" v-model="pagination.description" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>

 2.新建弹层


            <div class="add-form">

                <el-dialog title="新增图书" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>

3.data定义

data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {}//表单数据          
        }

4.从上面的代码中可知新建按钮双向绑定的是handleCreate()，因此对它进行操作

//弹出添加窗口
            handleCreate() {
                this.dialogFormVisible=true;
                this.resetForm();
            },
 //添加
            handleAdd () {
                axios.post("/heima",this.formData).then((res)=>{
                    if (res.data.flag){
                        //1.关闭弹层
                        this.dialogFormVisible=false;
                        this.$message.success("添加成功");
                    }else {
                        this.$message.error("添加失败");
                    }
                }).finally(()=>{
                    //2.重新加载数据
                    this.getAll();
                });

            },

5.当成功添加后需要进行重置表单操作，否则表单中会有上次添加成功的数据，可以把重置表单放在添加弹出窗口，也可以放在列表加载那块。

 

//重置表单
            resetForm() {
                this.formData={};
            },

6.添加完成后有取消操作

//取消
            cancel(){
                this.dialogFormVisible=false;
                this.$message.info("当前操作已取消");

            },

附完整前端代码

<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>基于SpringBoot整合SSM案例</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">

<div id="app">

    <div class="content-header">

        <h1>图书管理</h1>

    </div>

    <div class="app-container">

        <div class="box">

            <div class="filter-container">
                <el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书描述" v-model="pagination.description" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>

            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                <el-table-column type="index" align="center" label="序号"></el-table-column>

                <el-table-column prop="type" label="图书类别" align="center"></el-table-column>

                <el-table-column prop="name" label="图书名称" align="center"></el-table-column>

                <el-table-column prop="description" label="描述" align="center"></el-table-column>

                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

                    </template>

                </el-table-column>

            </el-table>

            <!--分页组件-->
            <div class="pagination-container">

                <el-pagination
                        class="pagiantion"

                        @current-change="handleCurrentChange"

                        :current-page="pagination.currentPage"

                        :page-size="pagination.pageSize"

                        layout="total, prev, pager, next, jumper"

                        :total="pagination.total">

                </el-pagination>

            </div>

            <!-- 新增标签弹层 -->

            <div class="add-form">

                <el-dialog title="新增图书" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

            <!-- 编辑标签弹层 -->

            <div class="add-form">

                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleEdit()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {},//表单数据
            rules: {//校验规则
                type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                type: "",
                name: "",
                description: ""
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            //调用查询全部数据的操作
            this.getAll();
        },

        methods: {
            //列表
            getAll() {
                axios.get("/heima").then((res)=>{
                    // console.log(res.data);
                    this.dataList=res.data.data;
                });
            },

            //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible=true;
                this.resetForm();
            },

            //重置表单
            resetForm() {
                this.formData={};
            },

            //添加
            handleAdd () {
                axios.post("/heima",this.formData).then((res)=>{
                    if (res.data.flag){
                        //1.关闭弹层
                        this.dialogFormVisible=false;
                        this.$message.success("添加成功");
                    }else {
                        this.$message.error("添加失败");
                    }
                }).finally(()=>{
                    //2.重新加载数据
                    this.getAll();
                });

            },

            //取消
            cancel(){
                this.dialogFormVisible=false;
                this.$message.info("当前操作已取消");

            },

            // 删除
            handleDelete(row) {

            },

            //弹出编辑窗口
            handleUpdate(row) {

            },

            //修改
            handleEdit() {

            },

            //条件查询
        }
    })

</script>

</html>

贴前端图片

 

a 梓七。
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot企业访客小程序的设计与实现181757（附源码+数据库）
09-20
系统的主要功能如下所示： (1) 登陆： 登陆模块在设计实现时采用的是 B/S 模式，可分为 web 客户端、 web 服务器端、数据库服务器三部分。客户端与服务器端的通信是通过 HTTP 协议来实现。登陆模块主要验证登陆用户是否合法，保证数据安全性。首先登陆用户输入用户名和密码，提交表单到数据库，查询用户表单的方式匹配系统用户是否为合法用户，并根据用户不同权限返回相对应的界面。当用户输入信息错误或者不匹配，提示错误信息，并重新登陆并提交信息。 (2) 用户管理： 用户管理模块只设计用户管理功能，主要包括用户的添加、用户编辑、用户删 除、用户查询几项基本操作。 添加用户，输入用户名、密码、联系方式等基本信息，并存入后台数据库用户表表单。 编辑用户实现对用户信息的修改操作，并保存到数据库。 在用户列表界面，选中需要删除的信息记录，删除记录并将此记录从数据库表中删除，完成用户记录的删除。 用户查询，按条件从数据库中查询出相对应的数据记录，并在前端渲染。 (3) 访客管理 (4) 留言管理 (5) 访客流量管理
SpringBoot项目实现登录验证码校验功能(可以学习，可以作为工具)
06-12
这是一个基于Spring Boot的项目，用于实现登录验证码校验功能。在 Web 应用中，为了防止恶意攻击者利用自动化程序进行暴力破解登录密码，在登录界面添加验证码是一种常见的防御手段。 该项目的核心思想是：在用户访问登录界面时生成一个包含随机字符的图片，并将该图片展示给用户。用户需要在登录表单中输入图片上显示的验证码才能完成登录操作。由于随机字符和图片会实时生成，因此每次访问页面时所获取到的验证码都是不同的，从而提高了安全性。 下面对该项目的实现细节进行简要介绍： 1. 在服务器端生成随机字符和对应的图片：使用Kaptcha库可以方便地生成验证码图片，并且支持配置多种参数（如字体、噪点、边框等）以满足个性化需求。 2. 将随机字符保存到Session中：可以通过将随机字符保存到HttpSession中使得每次请求都能够获取到正确的验证码值。另外，在将验证码值保存到Session之前，可以先对其进行加密处理，防止Session劫持等安全问题。 3. 在前端页面中展示验证码图片并验证用户输入：在登录表单中添加一个验证码输入框，在用户输入完用户名和密码等信息后，通过Ajax向后端
SpringBoot--列表添加新增功能
记录和分享属于我的“IT”时光
09-08 2255
SpringBoot--列表添加新增功能
SpringBoot SpringBoot 基础篇 4 基于 SpringBoot 的SSMP 整合案例 4.14 添加功能
谢谢你们的关注
11-13 433
SpringBoot SpringBoot 基础篇 4 基于 SpringBoot 的SSMP 整合案例 4.14 添加功能
SpringBoot -基于SpringBoot的SSMP整合案例（六）- 实现列表功能、“添加”按钮功能
qq_39123467的博客
05-07 563
SpringBoot -基于SpringBoot的SSMP整合案例（六）- 实现列表功能、“添加”按钮功能
SpringBoot完成查询和增加功能（简易版）
weixin_65808248的博客
11-18 3037
一、环境准备 1、db 2、html 打开前端开发工具HBuilder X，把准备好的前端spboot移进去： 接着查看电脑的mvn版本，选中项目右键： npm -version npm i​编辑 3、java 在弹出的窗口中选择你需要导入的项目，点击ok，选择maven 然后去修改maven配置： 再去检查一下application.yml文件和jdbc.properties，看数据库配置是否正确： 最后要注意修改generatorConfig.xml： 二、后台接口定义及测试
SpringBoot--列表添加详情功能
记录和分享属于我的“IT”时光
09-08 1025
SpringBoot--列表添加详情功能
java 项目，基于 spring 框架 向数组添加元素方法
YHLSunshine的博客
05-06 454
java 项目，基于 spring 框架 向数组添加元素方法（主要分为两种情形的添加方式）
SpringBoot整合Mybatis-Plus实现浏览数据新增、Redis进行热度排名
不愧是暮言的博客
05-05 1124
其中，UserMapper继承了Mybatis-Plus提供的BaseMapper接口，即基本的CRUD操作都被封装好了。Mybatis-Plus可以大大简化CRUD操作，是开发Web项目的好帮手。Redis的数据结构灵活，是非常好的缓存工具和快速存取的计数器功能的选择。Vue作为前端数据渲染的工具，非常方便易用。希望此篇文章能够对开发者有所帮助。
知识点6--spring boot实现三层架构-新增数据
别人笑我太疯癫，我笑他人看不穿。
06-10 1118
本篇承接知识点5，介绍如何新增数据，新增时考虑到后期的知识点，因此扩展一张部门表，达到一对多的关系第一步：首先我们需准备一张部门表，实现一个部门下有多个员工的一对多关系 同时在user表中，添加一个字段保存部门id 第二步：编写相应的架构代码块在User的bean实例中添加两个字段 准备部门的Bean 准备部门的Controller 准备对应的Service 下面这个实现类中的DeptMapper也是自己建的Dao层 Dao层准备Mapper xml文件 给UserMapper也准备一个映射 第三步：在U
基于SpringBoot实现登录注册功能模块（完整代码，并且已经成功跑起来）
03-24
实现登录和注册功能可以分为以下几个步骤： 设计数据库表结构：首先，你需要设计用户表，包含用户名、密码等字段。你也可以考虑使用加密算法存储密码，比如BCrypt。 创建Spring Boot项目：使用Spring Initializr创建...
基于Vue+SpringBoot实现的通讯录管理系统源码+项目说明(课程设计).zip
01-11
基于Vue+SpringBoot实现的通讯录管理系统源码+项目说明(课程设计).zip ExtJS 版本的项目在 `extjs` 文件夹下；Vue 版本的项目在 `vue` 文件夹下，自述说明请往下拉！ ExtJS 版本是大三《数据库编程》的课程设计，...
基于springboot的某大学外卖系统的实现.zip
06-07
基于springboot的某大学外卖系统的实现.zip基于springboot的某大学外卖系统的实现.zip基于springboot的某大学外卖系统的实现.zip基于springboot的某大学外卖系统的实现.zip 前台+后台： 前台界面：WN 后台界面：CJA...
springboot用aop做日志
z19799100的博客
11-13 316
说明：在每一个接口访问的时候记录访问日志，用户的信息，参数信息，执行时间，执行时长和返回的数据 在ssm框架中我们都知道用注解做aop只需要在配置文件中增加一行配置即可，如下：<aop:aspectj-autoproxy /> 但在springboot中做aop只要引进依赖，默认spring.aop.auto=ture，也就是说相当于在启动类中添加了@EnableAspectJAutoProxy注解 当我们要做CGLIB来实现AOP的时候，需要增加配置spring.aop.proxy-ta
springboot项目实现批量新增功能
长春小佛爷的博客
12-21 1114
1、mapper.xml <insert id="insertBatch" > insert into hm_authorization (ID,ROLE_CODE,RES_TYPE_CODE,RES_CODE) values <foreach collection="list" item="item" index="index" separator=","> (#{item.id},#{item.roleCode},#{item.resTy.
SpringBoot中使用@Insert、@Update实现批量新增、更新
m0_56188609的博客
06-06 5565
使用以上两种方式均可进行测试验证，此时数据均被批量新增成功！
spring boot 中3步集成beetl
weixin_30556161的博客
11-03 6717
<!DOCTYPE html><html><head><title>spring boot 中3步集成beetl</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='sty...
VUE项目实战——实现添加用户功能
Yilong18的博客
12-06 1728
实现新增用户的功能。
Vue3选项式和组合式生命周期说明
最新发布
weixin_44072254的博客
05-16 399
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
springboot+vue 实现添加用户功能
06-02
2. 前端使用Vue，设计一个用户添加页面，包括表单输入框等控件，使用axios发送POST请求到后端接口； 3. 后端定义一个用户添加的接口，接收前端传来的用户信息，进行数据验证，然后将用户信息存储到数据库； 4. 前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值