ELementUI之CURD及表单验证

news2025/11/4 11:26:17

一.CURD

1.后端CURD实现

@RequestMapping("/addBook")
    @ResponseBody
    public JsonResponseBody<?> addBook(Book book){
        try {
            bookService.insert(book);
            return new JsonResponseBody<>("新增书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("新增书本失败",false,0,null);
        }
    }

    @RequestMapping("/editBook")
    @ResponseBody
    public JsonResponseBody<?> editBook(Book book){
        try {
            bookService.updateByPrimaryKey(book);
            return new JsonResponseBody<>("编辑书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("编辑书本失败",false,0,null);
        }
    }

    @RequestMapping("/delBook")
    @ResponseBody
    public JsonResponseBody<?> delBook(Book book){
        try {
            bookService.deleteByPrimaryKey(book.getId());
            return new JsonResponseBody<>("删除书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("删除书本失败",false,0,null);
        }
    }

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }

2.前端实现

2.1前端HTML

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
       <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="open(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="del(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 编辑窗体 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear()">
      <el-form :model="book">
        <el-form-item label="书籍编号" :label-width="formLabelWidth">
          <el-input v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍类别" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="请选择活动区域">
            <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></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="dosub">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

我们通过在ELementUI官网中获取表格样式，弹出框样式及各种界面布局

2.2 路径配置

'BOOK_ADD':'book/addBook',
  'BOOK_UPD':'book/editBook',
  'BOOK_DEL':'book/delBook',
  'SYSTEM_BookList': 'book/queryBookPager', //书籍的后端数据请求

2.3 JS业务方法实现

export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        total: 0,
        page: 1,
        title:'新增窗体',
        dialogFormVisible:false,
        formLabelWidth:'100px',
        types:[],
        book:{
          id:'',
          bookname:'',
          price:'',
          booktype:'',
        }
      }
    },
    methods: {
      del(idx,row){
        this.$confirm('是否进行删除id为'+row.id+'的数据', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  let url = this.axios.urls.BOOK_DEL
                  this.axios.post(url, {id:row.id}).then(d => {
                    console.log(url);

                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.query({});
                  }).catch(e => {});

                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });
      },
      dosub(){
        //获取后台请求书籍数据的地址
        let url = this.axios.urls.BOOK_ADD;
        console.log(this.title)
        if(this.title=='编辑窗体'){
          url = this.axios.urls.BOOK_UPD
        }
        let params = {
          id:this.book.id,
          bookname:this.book.bookname,
          price:this.book.price,
          booktype:this.book.booktype,
        };
        this.axios.post(url, params).then(d => {
          console.log(url);
          this.clear();
          this.query({});
        }).catch(e => {});
      },
      clear(){
        this.dialogFormVisible= false;
        this.title = '新增窗体';
        this.book={
          id:'',
          bookname:'',
          price:'',
          booktype:'',
        }
      },
      open(idx,row){
        this.dialogFormVisible= true;
        if(row){
          this.title = '编辑窗体';
          this.book.id = row.id;
          this.book.bookname = row.bookname;
          this.book.price = row.price;
          this.book.booktype = row.booktype;
        }
      },
      handleSizeChange(r) {
        //当页大小发生变化
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        // console.log(params)
        this.query(params);
      },
      handleCurrentChange(p) {
        //当前页码大小发生变化
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        // console.log(params)
        this.query(params);
      },
      query(params) {
        //获取后台请求书籍数据的地址
        let url = this.axios.urls.SYSTEM_BookList;
        this.axios.get(url, {
          params: params
        }).then(d => {
          console.log(url)
          this.tableData = d.data.rows;
          this.total = d.data.total;
        }).catch(e => {});
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }
        console.log(params)
        this.query(params);
        this.bookname = ''
      }
    },
    created() {
      this.query({});
      this.types = [{
        'id':1,
        'name':'爽文'
      },
      {
        'id':2,
        'name':'动作'
      },
      {
        'id':3,
        'name':'爱情'
      },
      ]
    }
  }

方法详解：

（1）.我们Vue.js中的钩子函数中定义初始化值和状态

  1. bookname: ''：这是一个字符串属性，表示书籍的名称，初始值为空字符串。

  2. tableData: []：这是一个数组属性，用于存储表格数据，初始值为空数组。

  3. rows: 10：这是一个数字属性，表示每页显示的行数，默认为 10。

  4. total: 0：这是一个数字属性，表示数据总数，初始值为 0。

  5. page: 1：这是一个数字属性，表示当前页数，初始值为 1。

  6. title: '新增窗体'：这是一个字符串属性，表示窗体的标题，初始值为 '新增窗体'。

  7. dialogFormVisible: false：这是一个布尔属性，表示一个对话框是否可见，初始值为 false，意味着对话框默认是隐藏的。

  8. formLabelWidth: '100px'：这是一个字符串属性，表示表单标签的宽度，初始值为 '100px'。

  9. types: []：这是一个数组属性，用于存储书籍的类型数据，初始值为空数组。

  10. book 对象：这是一个包含多个属性的对象，表示一个书籍的信息，包括 id、bookname、price 和 booktype。这些属性初始值都为空字符串或空值。

（2）del(idx,row)   :

这个方法接受两个参数 idx 和 row，其中 idx 可能是一个索引或标识，而 row 是包含书籍信息的对象。

首先，它弹出一个确认对话框，询问用户是否要删除一个具体 ID（row.id）的数据。

如果用户点击了 "确定"，则会发起一个 HTTP POST 请求，将 row.id 发送到指定的删除书籍的接口。

如果请求成功，会在控制台上打印请求的 URL，然后显示一个成功的消息，并调用 query({}) 方法来刷新数据。

如果请求失败，将会捕获错误，但似乎没有特定的处理代码。

（2）dosub()方法：

这个方法执行与书籍数据相关的提交操作。

首先，它根据 title 属性的值来确定是要执行添加书籍还是更新书籍的操作，然后设置 url 变量为相应的请求地址。

接着，它构造一个包含书籍信息的 params 对象。

然后，它发起一个 HTTP POST 请求，将 params 发送到指定的地址（可能是添加或更新书籍的接口）。

如果请求成功，会在控制台上打印请求的 URL，然后调用 clear() 方法清空表单数据，并调用 query({}) 方法刷新数据。

如果请求失败，将会捕获错误，但似乎没有特定的处理代码。

（3）clear()方法：

这个方法用于清除表单数据和重置一些状态。

它将 dialogFormVisible 属性设置为 false，隐藏对话框。

将 title 属性设置为 '新增窗体'，表示这个对话框是用于新增数据的。

清空 book 对象中的属性，使其恢复到初始状态。

（4）open()方法：

这个方法用于打开对话框，以便编辑或添加书籍信息。

它将 dialogFormVisible 属性设置为 true，以显示对话框。

如果传递了 row 参数，表示要编辑数据，因此将 title 属性设置为 '编辑窗体'。

然后，将 book 对象的属性设置为 row 对象中的属性，以便在对话框中显示原有数据，以便编辑。

这些方法一起构成了一个用于管理书籍信息的 Vue.js 组件的一部分，包括删除、提交、清除和编辑功能。它们依赖于一些状态和属性，如 title、book 和 dialogFormVisible，以实现不同的交互行为。\

（5）create()方法是生命周期钩子是 Vue.js 组件中的一个生命周期函数

  1. this.query({});：在组件被创建后立即调用 query 方法，传递一个空对象 {} 作为参数。这可能是用来初始化组件中的数据，例如加载初始的书籍数据。

  2. this.types：这是一个数组属性，包含了书籍类型的数据。在这个代码段中，它被初始化为一个包含三个对象的数组。每个对象都有两个属性：id 表示类型的唯一标识符，name 表示类型的名称。这个数组似乎是用于提供书籍类型的选项，以供用户在界面上选择。

所以，在组件被创建后，它会立即执行一个查询操作，可能是获取初始的书籍数据，同时初始化了书籍类型的选项。这样，在组件渲染完成后，它就有了初始的数据和选项，可以供用户交互和显示在界面上。

注： 

1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose" 

效果演示：

 二.表单验证

1.什么是表单验证

表单验证是一种用于检查用户输入数据的过程，以确保输入的数据符合预期的格式、要求和规则。表单验证通常用于 web 应用程序中的用户界面，以确保用户提交的数据有效、合法且安全

2.定义规则

2.1绑定表单规则属性

<el-form :model="book" :rules="rules" ref="book">

2.2在指定的字段中定义prop属性

<el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>

2.3在data中定义规则

rules:{
          bookname: [
                      { required: true, message: '请输入书籍名称', trigger: 'blur' },
                      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
          price:[
            { required: true, message: '请输入书籍价格', trigger: 'blur' },
          ],
          booktype:[
            { required: true, message: '请填写书籍类别', trigger: 'blur' },
          ]
        }

3.提交验证规则

在我们进行提交验证时进行表单验证

dosub(){
        this.$refs['book'].validate((valid) => {
                  if (valid) {
                    //获取后台请求书籍数据的地址
                    let url = this.axios.urls.BOOK_ADD;
                    console.log(this.title)
                    if(this.title=='编辑窗体'){
                      url = this.axios.urls.BOOK_UPD
                    }
                    let params = {
                      id:this.book.id,
                      bookname:this.book.bookname,
                      price:this.book.price,
                      booktype:this.book.booktype,
                    };
                    this.axios.post(url, params).then(d => {
                      console.log(url);
                      this.clear();
                      this.query({});
                    }).catch(e => {});
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
      },

4.效果演示

当我们进行验证提交时必须通过验证我们写的规则才能进行提交

今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1073985.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Winform的UDP通信

基于Winform的UDP通信

1、文件结构 2、UdpReceiver.cs using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading.Tasks;namespace UDPTest.Udp {public class UdpStateEventArgs : EventArgs…
阅读更多...
【C/C++】结构体内存分配问题

【C/C++】结构体内存分配问题

规则1&#xff1a;以多少个字节为单位开辟内存 就是说&#xff0c;该结构体最终所占字节大小&#xff0c;是这个单位的整数倍 给结构体变量分配内存的时候&#xff0c;会去结构体变量中找基本类型的成员 哪个基本类型的成员占字节数多&#xff0c;就以它大大小为单位开辟内存 …
阅读更多...
数据产品读书笔记——数据产品经理和其他角色的关系

数据产品读书笔记——数据产品经理和其他角色的关系

&#x1f34a;上一节我们初步对数据产品经理的角色有了初步的了解&#xff0c;今天我们继续学习数据产品经理与其他角色之间的关系。上一期的内容如下&#x1f447;: 链接: 数据产品读书笔记——认识数据产品经理 &#x1f340;当我们处在一个组织中&#xff0c;就一定会有与…
阅读更多...
leetcode:2427. 公因子的数目(python3解法)

leetcode:2427. 公因子的数目(python3解法)

难度&#xff1a;简单 给你两个正整数 a 和 b &#xff0c;返回 a 和 b 的 公 因子的数目。 如果 x 可以同时整除 a 和 b &#xff0c;则认为 x 是 a 和 b 的一个 公因子 。 示例 1&#xff1a; 输入&#xff1a;a 12, b 6 输出&#xff1a;4 解释&#xff1a;12 和 6 的公因…
阅读更多...
大模型rlhf 相关博客

大模型rlhf 相关博客

想学习第一篇博客: https://huggingface.co/blog/zh/rlhf RLHF 技术分解 RLHF 是一项涉及多个模型和不同训练阶段的复杂概念&#xff0c;这里我们按三个步骤分解&#xff1a; 预训练一个语言模型 (LM) &#xff1b;聚合问答数据并训练一个奖励模型 (Reward Model&#xff0c;RM…
阅读更多...
数据结构和算法（10）：B-树

数据结构和算法（10）：B-树

B-树&#xff1a;大数据 现代电子计算机发展速度空前&#xff0c;就存储能力而言&#xff0c;情况似乎也是如此&#xff1a;如今容量以TB计的硬盘也不过数百元&#xff0c;内存的常规容量也已达到GB量级。 然而从实际应用的需求来看&#xff0c;问题规模的膨胀却远远快于存储能…
阅读更多...
10.9作业

10.9作业

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 #include <iostream>using namespace std;clas…
阅读更多...
Java实现哈希表

Java实现哈希表

1.哈希表定义 哈希表&#xff08;hash table&#xff0c;也叫散列表&#xff09;&#xff0c;是根据关键码值&#xff08;key value&#xff09;而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。这…
阅读更多...
【深度学习实验】卷积神经网络（七）：实现深度残差神经网络ResNet

【深度学习实验】卷积神经网络（七）：实现深度残差神经网络ResNet

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. Residual&#xff08;残差连接&#xff09; __init__&#xff08;初始化&#xff09; forward&#xff08;前向传播&#xff09; 2. resnet_block&#xff08;残…
阅读更多...
9+代谢+分型，基于代谢通路对肝癌进行分型从而开展实验。

9+代谢+分型，基于代谢通路对肝癌进行分型从而开展实验。

今天给同学们分享一篇代谢分型的生信文章“Bulk and single-cell transcriptome profiling reveal extracellular matrix mechanical regulation of lipid metabolism reprograming through YAP/TEAD4/ACADL axis in hepatocellular carcinoma”&#xff0c;这篇文章于2023年04…
阅读更多...
【Linux 下 MySQL5.7 中文编码设置】

【Linux 下 MySQL5.7 中文编码设置】

前言 原本要使用 Sqoop 把我 MySQL 的数据导入到 HBase 中&#xff0c;习惯了使用 windows 下的 MySQL 8.0 版本&#xff0c;但是用 Sqoop 从windows 传到 linux 下有点复杂&#xff0c;就索性用我自己之前没用过的 linux 下的 MySQL 5.7&#xff0c;结果果然一堆问题&#xff…
阅读更多...
爱国者的润学日记-十月

爱国者的润学日记-十月

首先需要科学的准备面试和润。如何进行科学的准备工作呢&#xff1f; 高效的按照面试考察内容进行针对性训练&#xff0c;按 Machine-learning-interview准备保证处于专注的心态&#xff0c;如今互联网娱乐发达&#xff0c;之前即使比赛时我也是一边比赛一边看视频。之后准备面…
阅读更多...
MySQL：读写分离-amoeba（7）

MySQL：读写分离-amoeba（7）

环境介绍 mysql主服务器 192.168.254.1 mysql从服务器&#xff08;1&#xff09;192.168.254.2 mysql从服务器&#xff08;2&#xff09;192.168.254.3 amoeba代理服务器 192.168.254.4 测试服务器 192.168.254.5 此技术搭配主从复制&#xff0c;我的主服务器和从服务器都…
阅读更多...
TS类中属性的封装

TS类中属性的封装

我们在如下的代码中&#xff0c;我们在类中设置属性&#xff0c;创建的对象可以随意修改自身的属性&#xff0c;对象中的属性可以任意被修改导致对象中的数据非常不安全。 // 创建一个Person类 class Person {name: string;age: number;constructor(name: string, age: number…
阅读更多...
通道剪枝channel pruning

通道剪枝channel pruning

1、相关定义 过参数化&#xff1a;主要是指在训练阶段&#xff0c;在数学上需要进行大量的微分求解&#xff0c;去捕捉数据中微小的变化信息&#xff0c;一旦完成迭代式的训练之后&#xff0c;网络模型在推理的时候就不需要这么多参数。剪枝算法&#xff1a;核心思想就是减少网…
阅读更多...
【【萌新的SOC学习之小水文系列】】

【【萌新的SOC学习之小水文系列】】

萌新的SOC学习之小水文系列 SD卡读写TXT文本实验 SD 卡共有 9 个引脚线&#xff0c;可工作在 SDIO 模式或者 SPI 模式。在 SDIO 模式下&#xff0c;共用到 CLK、CMD、DAT[3:0]六根信号线&#xff1b;在 SPI 模式下&#xff0c;共用到 CS&#xff08;SDIO_DAT[3]&#xff09;、…
阅读更多...
栅形状的影响及可靠性的优化

栅形状的影响及可靠性的优化

栅形状的影响 VD-MOSFET单元结构采用平面栅极拓扑结构&#xff0c;栅极电极位于半导体的平坦上表面。虽然在这种结构中&#xff0c;在平面结处会发生电场增强&#xff0c;但在栅极电极处不会发生电场增强&#xff0c;因为栅极电极的边缘与高度掺杂的N源区重叠。栅极电极的边缘被…
阅读更多...
新能源+低代码：百数服务商新领域，跨行业结合所碰撞出的新火花

新能源+低代码：百数服务商新领域，跨行业结合所碰撞出的新火花

新能源行业的兴起主要是在最近几年&#xff0c;特别是“双碳”目标提出后&#xff0c;中国的新能源行业迎来了快速发展的阶段。在政策支持和资本加持下&#xff0c;各种新能源和绿色发展基金设立&#xff0c;以新能源为主体的新型电力系统也得到了深化改革&#xff0c;大力推动…
阅读更多...
Qt中QTimer定时器的用法

Qt中QTimer定时器的用法

Qt中提供了两种定时器的方式一种是使用Qt中的事件处理函数&#xff0c;另一种就是Qt中的定时器类QTimer。 使用QTimer类&#xff0c;需要创建一个QTimer类对象&#xff0c;然后调用其start()方法开启定时器&#xff0c;此后QTimer对象就会周期性的发出timeout()信号。 1.QTimer…
阅读更多...
十五、异常（6）

十五、异常（6）

本章概要 Try-With-Resources 用法 揭示细节 异常匹配 Try-With-Resources 用法 在考虑所有可能失败的方法时&#xff0c;找出放置所有 try-catch-finally 块的位置变得令人生畏。确保没有任何故障路径&#xff0c;使系统远离不稳定状态&#xff0c;这非常具有挑战性。 Inp…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023