Vue中使用表单验证+CRUD

最新推荐文章于 2023-10-03 16:31:48 发布
最新推荐文章于 2023-10-03 16:31:48 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57504000/article/details/124736013
版权
本文介绍了如何实现表格数据的增删改查功能，并结合后台数据接口展示了表单验证的步骤。包括后台的接口设计、前端的按钮事件、Dialog对话框的使用、表单验证以及操作的实现。详细讲解了新增、修改和删除操作的代码实现，提供了相应的前端UI交互效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 接上篇的数据表格与分页，今天我们给表格中的数据增删改查与表单验证

 一、后台数据接口

public class BookAction extends DispatcherAction implements ModelDriver<Book> {
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	private ObjectMapper mapper=new ObjectMapper();
	@Override
	public Book getModel() {
		return book;
	}

	public String queryBookPager(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		List<Book> books = bookDao.queryBookPager(book, pageBean);
		Map<String,Object> map=new HashMap<String,Object>();
		Map<String,Object> data=new HashMap<String,Object>();
		data.put("rows", books);
		data.put("total", pageBean.getTotal());
		map.put("data", data);
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
	public String addBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		Map<String,Object> json=new HashMap<String,Object>();
		try {
			bookDao.addBook(book);
			json.put("code","1");
			json.put("msg", "操作成功");
		} catch (Exception e) {
			json.put("code", "-1");
			json.put("msg", "操作失败");
			e.printStackTrace();
		}
		mapper.writeValue(resp.getOutputStream(),json);
		return null;
	}
	
	public String editBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		Map<String,Object> json=new HashMap<String,Object>();
		try {
			bookDao.editBook(book);
			json.put("code","1");
			json.put("msg", "操作成功");
		} catch (Exception e) {
			json.put("code", "-1");
			json.put("msg", "操作失败");
			e.printStackTrace();
		}
		mapper.writeValue(resp.getOutputStream(),json);
		return null;
	}
	public String delBook(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		Map<String,Object> json=new HashMap<String,Object>();
		try {
			bookDao.delBook(book);
			json.put("code","1");
			json.put("msg", "操作成功");
		} catch (Exception e) {
			json.put("code", "-1");
			json.put("msg", "操作失败");
			e.printStackTrace();
		}
		mapper.writeValue(resp.getOutputStream(),json);
		return null;
	}
}

二、新增

 1.添加新增按钮

<el-form-item>
   <el-button type="primary" @click="query(1)">查询</el-button>
   <el-button type="success" @click="open">新增</el-button>
</el-form-item>

在查询按钮的旁边加一个新增按钮，给按钮添加一个点击事件open

2.初始化数据

    data: function() {
      return {
        bookname: '',
        tableData:[],
        page:1,
        rows:10,
        total:0,
        title:'书本新增',
        dialogFormVisible:false,
        book:{
          id:'',
          bookname:'',
          price:'',
          booktype:''
        },
        formLabelWidth:'100px',
      }
    }

3. Dialog对话框

<el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="dialogClose">
      <el-form ref="book" :model="book">
        <el-form-item  label="书本编号" :label-width="formLabelWidth">
          <el-input readonly="readonly" v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bookname" label="书本名字" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth" >
          <el-select v-model="book.booktype" placeholder="请选择" style="width: 100%">
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="神话" value="神话"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

 使用Dialog搭建新增与修改的页面

 Attributes（属性）

参数说明类型可选值默认值
visible是否显示 Dialog，支持 .sync 修饰符boolean—false
titleDialog 的标题，也可通过具名 slot （见下表）传入string——
widthDialog 的宽度string—50%
fullscreen是否为全屏 Dialogboolean—false
topDialog CSS 中的 margin-top 值string—15vh
modal是否需要遮罩层boolean—true
modal-append-to-body遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上boolean—true
append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Dialog 出现时将 body 滚动锁定boolean—true
custom-classDialog 的自定义类名string——
close-on-click-modal是否可以通过点击 modal 关闭 Dialogboolean—true
close-on-press-escape是否可以通过按下 ESC 关闭 Dialogboolean—true
show-close是否显示关闭按钮boolean—true
before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog——
center是否对头部和底部采用居中布局boolean—false
destroy-on-close关闭时销毁 Dialog 中的元素boolean—false

Slot（插槽）

name说明
—Dialog 的内容
titleDialog 标题区的内容
footerDialog 按钮操作区的内容

Events（事件）

事件名称说明回调参数
openDialog 打开的回调—
openedDialog 打开动画结束时的回调—
closeDialog 关闭的回调—
closedDialog 关闭动画结束时的回调—

4.对话框的打开与关闭事件

    methods: {
      //对话框打开事件
      open:function(){
        this.dialogFormVisible=true;
      },
      //关闭对话框事件
      dialogClose:function(){
        //清空表单数据
        this.book={
          id:'',
          bookname:'',
          price:'',
          booktype:''
        };
        //清空表单
        this.$refs['book'].resetFields();
        //重置对话框标题
        this.title="新增书本";
      },
    }

5.确定按钮的点击事件

      //新增书本事件
      save:function(){
        //定义路径
        let url=this.axios.urls.BOOK_ALL;
        let methodName="addBook";
        if(this.title=="编辑书本"){
           methodName="editBook";
        }
        //定义请求参数
        this.book['methodName']=methodName;
        //ajax请求
        this.axios.post(url,this.book).then(resp=>{
          let data=resp.data;
          this.$message({
              message: data.msg,
              type: data.code==1?'success':'error'
          });
          if(data.code==1){
            //关闭对话框
            this.dialogFormVisible=false;
            //刷新数据
            this.query(this.page);
          }
        }).catch(err=>{
          console.log(err);
        });
      },

 确定按钮可能是新增也可能是修改

6.文本框和下拉框的表单验证

data: function() {
      return {
        bookname: '',
        tableData:[],
        page:1,
        rows:10,
        total:0,
        title:'书本新增',
        dialogFormVisible:false,
        book:{
          id:'',
          bookname:'',
          price:'',
          booktype:''
        },
        formLabelWidth:'100px',
        rules: {
          bookname: [
            { required: true, message: '请输入书本名称', trigger: 'blur' },
          ],
          price: [
            { required: true, message: '请输入书本价格', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          booktype: [
            { required: true, message: '请选择书本类型', trigger: 'change' }
          ],
        }
      }
    },

 注：

  1. 要给<el-form>标签加上ref属性与rules属性（rules的值必须与下面定义的值一样）
  2. 还要在<el-form-item>标签中添加prop属性，prop="此处的名字，必须与rules中定义的属性一致"
  3. trigger中值的含义
    事件名说明参数
    change用户确认选定的值时触发组件绑定值
    blur当 input 失去焦点时触发组件实例
    focus当 input 获得焦点时触发组件实例

7.判断表单验证是否成功

//新增书本事件
      save:function(){
        this.$refs['book'].validate((valid) => {
          if (valid) {
            //定义路径
            let url=this.axios.urls.BOOK_ALL;
            let methodName="addBook";
            if(this.title=="编辑书本"){
              methodName="editBook";
            }
            //定义请求参数
            this.book['methodName']=methodName;
            //ajax请求
            this.axios.post(url,this.book).then(resp=>{
              let data=resp.data;
              this.$message({
                  message: data.msg,
                  type: data.code==1?'success':'error'
              });
              if(data.code==1){
                //关闭对话框
                this.dialogFormVisible=false;
                //刷新数据
                this.query(this.page);
              }
            }).catch(err=>{
              console.log(err);
            });
          } else {
            alert('格式不正确！');
            return false;
          }
        });
      },

表单验证成功才能新增书本

 新增效果：

二、修改 

1.添加操作栏

    <el-table-column label="操作">
        <!-- 插槽-->
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

2.给修改方法定义事件

      //书本编辑
      handleEdit:function(row){
        //设置对话框为显示状态
        this.dialogFormVisible=true;
        //设置标题为编辑书本
        this.title="编辑书本";
        //赋值表单数据
        this.book={
          id:row.id,
          bookname:row.bookname,
          price:row.price,
          booktype:row.booktype
        };
      },

效果：

 

 三、删除

 1.给删除按钮定义事件

     //书本删除
      handleDelete:function(row){
        this.$confirm('删?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url=this.axios.urls.BOOK_ALL;
          let params={
            id:row.id,
            methodName:'delBook'
          };
          this.axios.post(url,params).then(resp=>{
              let data=resp.data;
              this.$message({
                  message: data.msg,
                  type: data.code==1?'success':'error'
              });
              if(data.code==1){
                this.query(this.page);
              }
            }).catch(err=>{
              console.log(err);
            });
        }).catch(() => {});
      },

效果：

删除了编号为41的书

 然后他就无了

 博主水平有限，难免有错。欢迎评论交流

基于AVue的二次封装：快速构建后台管理系统的CRUD方案
weixin_40461134的博客
02-21 1057
avue,快速crud
VUE-CRUD+表单验证
weixin_63104855的博客
05-18 760
VUE-CRUD+表单验证
vue crud table
10-11
vue封装 table
Vue中的CRUD
yang_zhong_rong的博客
07-30 1632
Vue中的CRUD <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bookinfo显示</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> &
Vue-CRUD-
03-18
粗鲁的 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue实现CRUD
qq_38839758的博客
05-05 2894
Title 英雄名称 血量 {{hero.name}} {{hero.hp}} 英雄名称： ...
vue crud
qq_43183527的博客
11-26 615
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">&l...
（vue）spa项目开发之CRUD&表单验证&vue的增删改查
m0_60375943的博客
11-12 422
1. 表单验证 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label="活动名称" prop="name"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 注1：有多个表单，怎么在提交进行区分？ 我们在rules这里写了对表单的验证规则，...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
例如，用户注册可能涉及到表单验证、数据提交到后端的逻辑，而用户管理则可能包括用户的查看、编辑、删除等操作。 后端方面，SpringBoot是Java领域的轻量级框架，MybatisPlus是Mybatis的扩展工具，简化了SQL操作。...
VUE实现静态数据的CRUD功能
11-23
Vue实现的一个增删改查案例，打开即用，可使用spring boot+vue的形式，将静态数据变成动态数据，如要前后端分离案例资源，可关注博主，查看博主上传资源列表。
Vue CRUD-基于Vue.js的REST-ful CRUD系统。 使您可以轻松创建快速应用程序，例如CMS或CRM。-Vue.js开发
05-27
Vue CRUD基于Vue.js的REST-ful CRUD系统。 Vue CRUD允许创建一种用于管理单个表的机制，也可以创建CMS或扩展CRM以及基于Vue CRUD的基于Vue.js的REST-ful CRUD系统。 Vue CRUD允许创建一种用于管理单个表的机制，还可以创建具有登录系统和模块的CMS或扩展CRM，而Vue CRUD内置的应用程序是SPA（单页应用程序），因此其运行速度比基于Wordpress的应用程序快得多，Joomla等。Vue CRUD将vue及其生态系统（Vuex，Vuetify等）一起使用。 享受世界上最流行的JS框架的好处。 应用架构进行了调整
vue-crud：基于Vue.js的REST-ful CRUD系统
02-03
该项目不受支持 如果您想为此项目做出贡献，请从该项目中分叉或给我发送电子邮件以将您添加到“无聊”小组 Vue CRUD 基于Vue.js的REST-ful CRUD系统。 Vue CRUD允许创建用于管理单个表的机制，以及具有登录系统和模块的CMS或扩展CRM。 用Vue CRUD构建的应用程序是SPA（单页应用程序），因此它比基于Wordpress，Joomla等的应用程序运行得快得多。 Vue CRUD使用vue及其生态系统（Vuex，Vuetify等）。 享受世界上最流行的JS框架的好处。 该应用程序体系结构适用于REST API 功能 Vue CRUD提供了一组实用程序，您可以从中组成自己的应用程序。 由于使用了Vuex库，系统中包含的功能可以相互通信。 Vue CRUD包含以下元素： CRUD | ： 记录操作： 商店， 更新， 暂停/恢复， 删除， 多次更新 多个挂起/恢复， 多次删除 过滤： 显示有效/无效记录， 在整个表格中搜索词组， 在选定的列中搜索短语（精确，喜欢和列出模式） 项目查看版本： 客户端（小桌子）， 服务器端（大表）
crud-vue:用户以Vuejs编写的CRUD前端项目，使用模仿API.io作为假API
04-19
杂乱无章的 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
springboot+vue>>crud
01-02
springboot整合vue的简单上手案例 （添加用户的模型框中少了性别model），如需下载更新后代码，请移步到个人博客 https://mp.csdn.net/postedit/85625793
vue--CRUD
weixin_30472035的博客
09-21 430
1. Create this.$http.post("http://localhost:3000/users",newCustomer).then(function (response) { this.$router.push({path: "/", query:{alert: "用户信息添加成功！"}}); //$router对象是全局路由的实例...
Vue基本的CRUD操作
reg183的专栏
03-21 4529
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue学习 语法demo1</title> ...
通过ElementUi在Vue搭建的项目中实现CRUD
最新发布
lz17267861157的博客
10-03 1734
🏅，一个在CSDN分享笔记的博主。📚📚🌟在这里，我要推荐给大家我的专栏《🎯🎯🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆🌈让我们在Vue的世界里畅游吧！🌈🎁🎁💖期待你的加入，一起学习，一起进步！💖💖。
Vue前端用户管理系统实现CRUD操作
总结来说，这个Vue.js项目是一个用于用户信息管理的前端应用程序，它涉及前端开发中的CRUD操作，并且可能需要与后端API进行交互。应用可能使用了Vue的核心特性如组件、模板、数据绑定、事件处理等，同时提供了用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值