• 关于一篇ElementUI之CUD+表单验证

    目录

    一.CUD增删改查简述

     1.1.增删改功能实现

    二.表单验证

    前端所有代码：

              好啦今天就分享到这了，希望能帮到你哦！！！

    以下的代码基于我博客中的代码进行续写 : 

    关于ElementUI之动态树+数据表格+分页实例

    一.CUD增删改查简述

    CUD是数据库操作中常用的四个基本操作，分别是创建(Create)、更新(Update)、删除(Delete)和查询(Query)。

    • 创建(Create)操作用于向数据库中添加新的数据记录。这可以通过插入一条新记录来完成，包括提供必要的数据和指定要插入的表。

    • 更新(Update)操作用于修改数据库中的现有数据。通过更新操作，可以更改一个或多个记录的特定字段值，以反映实际数据的变化。

    • 删除(Delete)操作用于从数据库中移除数据记录。可以通过指定特定的条件，删除满足条件的记录，或者直接删除整个表的内容。

    • 查询(Query)操作用于从数据库中检索指定数据记录或满足特定条件的数据记录。查询操作可以根据给定的条件过滤和排序数据，并返回满足条件的结果集。

    这四种操作通常是关系型数据库管理系统（RDBMS）中最基本和常用的操作，用于对数据库进行增加、修改、删除和检索数据。

     1.1.增删改功能实现

    在项目中的src文件下api中找到action.js进行配置数据访问的地址:

    1. /**
    2.  * 对后台请求的地址的封装，URL格式如下：
    3.  * 模块名_实体名_操作
    4.  */
    5. export default {
    6. 	'SERVER': 'http://localhost:8080/', //服务器
    7. 	'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆
    8. 	'SYSTEM_USER_DOREG': 'user/userRegister', //注册
    9.   'SYSTEM_MENUS': 'module/queryRootNode', //左侧菜单树
    10.   'BOOK_LIST': 'book/queryBookPager', //书籍列表
    11.   'BOOK_ADD': 'book/addBook', //书籍增加
    12.   'BOOK_UPD': 'book/editBook', //书籍修改
    13.   'BOOK_DEL': 'book/delBook', //书籍删除
    14. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    15. 		return this.SERVER + this[k];
    16. 	}
    17. }

    在BookList.vue组件中进行编写增加修改的代码：

    在ElementUI里面找到弹出窗进行编写增加修改的弹窗如下：

    2.     <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
    3.       <el-form :model="book" :rules="rules" ref="book">
    4.         <el-form-item label="书籍编号" :label-width="formLabelWidth" prop="id">
    5.           <el-input v-model="book.id" autocomplete="off">el-input>
    6.         el-form-item>
    7.         <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
    8.           <el-input v-model="book.bookname" autocomplete="off">el-input>
    9.         el-form-item>
    10.         <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
    11.           <el-input v-model="book.price" autocomplete="off">el-input>
    12.         el-form-item>
    13.         <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
    14.           <el-select v-model="book.booktype" placeholder="请选择活动区域">
    15.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id">el-option>
    16.           el-select>
    17.         el-form-item>
    18.       el-form>
    19.       <div slot="footer" class="dialog-footer">
    20.         <el-button @click="dialogFormVisible = false">取 消el-button>
    21.         <el-button type="primary" @click="dosub">确 定el-button>
    22.       div>
    23.     el-dialog>

    在script标签中编写方法进行数据增加修改实现，在data中编写属性:

    1. data() {
    2.       return {
    3.         bookname: '',
    4.         tableData: [],
    5.         rows: 10,
    6.         page: 1,
    7.         total: 0,
    8.         title: '新增窗体',
    9.         dialogFormVisible: false,
    10.         formLabelWidth: '100px',
    11.         types: [],
    12.         form: {},
    13.         book: {
    14.           id: '',
    15.           bookname: '',
    16.           price: '',
    17.           booktype: ''
    18.         },
    19.       }
    20.     },

    在script标签中编写方法进行数据增加修改实现，在methods中编写方法:

    1. methods: {
    2.       del(idx, row) {
    3.         this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', {
    4.           confirmButtonText: '确定',
    5.           cancelButtonText: '取消',
    6.           type: 'warning'
    7.         }).then(() => {
    8.           let url = this.axios.urls.BOOK_DEL;
    9.           this.axios.post(url, {
    10.               id: row.id
    11.             })
    12.             .then(r => {
    13.               console.log(r);
    14.               this.$message({
    15.                 type: 'success',
    16.                 message: '删除成功!'
    17.               });
    18.               this.query({});
    19.             })
    20.             .catch(e => {
    21.               // 处理错误
    22.             });
    23.         }).catch(() => {
    24.           this.$message({
    25.             type: 'info',
    26.             message: '已取消删除'
    27.           });
    28.         });
    29.       },
    30.       dosub() {
    31.  
    32.         this.$refs['book'].validate((valid) => {
    33.           if (valid) {
    34.             let url = this.axios.urls.BOOK_ADD;
    35.             if (this.title == '编辑窗体') {
    36.               url = this.axios.urls.BOOK_UPD;
    37.             }
    38.             // 构建请求参数
    39.             let params = {
    40.               id: this.book.id,
    41.               bookname: this.book.bookname,
    42.               price: this.book.price,
    43.               booktype: this.book.booktype
    44.             };
    45.             console.log(params)
    46.             console.log(url)
    47.             this.axios.post(url, params)
    48.               .then(r => {
    49.                 console.log(r);
    50.                 // 编辑/添加操作成功后，再进行查询
    51.                 this.query({});
    52.                 this.clear();
    53.               })
    54.               .catch(e => {
    55.                 // 处理错误
    56.               });
    57.           } else {
    58.             console.log('error submit!!');
    59.             return false;
    60.           }
    61.         });
    62.       },
    63.       clear() {
    64.         // 初始化窗体
    65.         this.dialogFormVisible = false;
    66.         this.title = '新增窗体';
    67.  
    68.         // 清空表单
    69.         this.book = {
    70.           id: '',
    71.           bookname: '',
    72.           price: '',
    73.           booktype: ''
    74.         };
    75.       },
    76.  
    77.       // 打开窗体的方法
    78.       open(idx, row) {
    79.         // 打开编辑窗口
    80.         this.dialogFormVisible = true;
    81.         // 初始化标题
    82.         this.title = '新增窗体';
    83.         if (row != null) {
    84.           this.title = '编辑窗体';
    85.         }
    86.         // 如果有传入行数据，将其填充到表单字段中
    87.         if (row) {
    88.           this.book.id = row.id;
    89.           this.book.bookname = row.bookname;
    90.           this.book.price = row.price;
    91.           this.book.booktype = row.booktype;
    92.         }
    93.       },
    94.  
    95.  
    96.       query(params) {
    97.         let url = this.axios.urls.BOOK_LIST;
    98.         this.axios.get(url, {
    99.           params: params
    100.         }).then(r => {
    101.           console.log(r);
    102.           this.tableData = r.data.rows;
    103.           this.total = r.data.total;
    104.         }).catch(e => {
    105.  
    106.         })
    107.       },
    108.       onSubmit() {
    109.         let params = {
    110.           bookname: this.bookname
    111.         }
    112.         this.query(params);
    113.       },
    114.       handleSizeChange(r) {
    115.         //当页大小发生变化
    116.         console.log("当前页大小为：" + r);
    117.         let params = {
    118.           bookname: this.bookname,
    119.           rows: r,
    120.           page: this.page
    121.         }
    122.         this.query(params);
    123.       },
    124.       handleCurrentChange(p) {
    125.         //当前页码发生变化
    126.         console.log("当前页页码为：" + p);
    127.         let params = {
    128.           bookname: this.bookname,
    129.           rows: this.rows,
    130.           page: p
    131.         }
    132.         this.query(params);
    133.       }
    134.     },

    在created中初始化数据，如下：

    1.  created() {
    2.       this.query({});
    3.       this.types = [{
    4.           id: 1,
    5.           name: "刘勾八"
    6.         },
    7.         {
    8.           id: 2,
    9.           name: "渣渣辉"
    10.         },
    11.         {
    12.           id: 3,
    13.           name: "耗子"
    14.         },
    15.         {
    16.           id: 4,
    17.           name: "叼毛"
    18.         },
    19.         {
    20.           id: 5,
    21.           name: "耗子"
    22.         }
    23.       ];
    24.     }

    实例效果：

    二.表单验证

    在表单中增加以下两个属性 ：

    :rules="rules" ref="book"

     在script标签中编写方法进行数据增加修改实现，在data中编写属性:

    1. data() {
    2.       return {
    3.         bookname: '',
    4.         tableData: [],
    5.         rows: 10,
    6.         total: 0,
    7.         page: 1,
    8.         formLabelWidth: '120px', //弹出窗输入框前的文字宽度
    9.         title: '书籍新增', //弹出窗标题
    10.         dialogFormVisible: false, //默认关闭
    11.         book: {
    12.           id: '',
    13.           bookname: '',
    14.           price: '',
    15.           booktype: ''
    16.         },
    17.         types: [],
    18.         //增加表单验证
    19.         rules: {
    20.           bookname: [{
    21.               required: true,
    22.               message: '请输入书籍的名称',
    23.               trigger: 'blur'
    24.             },
    25.             {
    26.               min: 2,
    27.               max: 10,
    28.               message: '书籍名称长度在 2 到 10 个字符',
    29.               trigger: 'blur'
    30.             }
    31.           ],
    32.           price: [{
    33.             required: true,
    34.             message: '请填写书籍价格',
    35.             trigger: 'blur'
    36.           }],
    37.           booktype: [{
    38.             required: true,
    39.             message: '请选择书籍类型',
    40.             trigger: 'blur'
    41.           }]
    42.         }
    43.       }
    44.     },

    在script标签中编写方法，在methods中编写submit()方法:

    1.  submit() {
    2.         //获取值
    3.         let params = {
    4.           id: this.book.id,
    5.           bookname: this.book.bookname,
    6.           price: this.book.price,
    7.           booktype: this.book.booktype
    8.         }
    9.         console.log(params);
    10.         //获取配置的方法请求地址
    11.         let url = this.axios.urls.SYSTEM_BookAdd;
    12.         //如果是书籍编辑就将请求地址修改为书籍修改的请求地址
    13.         if (this.title == '书籍编辑') {
    14.           url = this.axios.urls.SYSTEM_BookEdit;
    15.         }
    16.         //请求前必须通过表单验证
    17.         this.$refs['book'].validate((valid) => {
    18.            console.log(valid);
    19.           if (valid) {
    20.             //请求后端地址进行书籍的新增或修改
    21.             this.axios.post(url, params).then(d => {
    22.               // console.log(url);
    23.               // console.log(d);
    24.               this.close();
    25.               this.query({});
    26.             }).catch(e => {});
    27.           } else {
    28.             this.$message('有必输入项或者没有按要求输入，请正确填写！！');
    29.             return false;
    30.           }
    31.         });
    32.  
    33.  
    34.       }

    表单验证的效果  :

    前端所有代码：

    BookList.vue 所有代码如下  :

    1. <template>
    2.   <div class="Book" style="padding: 30px;">
    3.     
    4.     <el-form :inline="true" class="demo-form-inline">
    5.       <el-form-item label="书籍名称 : ">
    6.         <el-input v-model="bookname" placeholder="书籍名称">el-input>
    7.       el-form-item>
    8.       <el-form-item>
    9.         <el-button type="primary" plain @click="onSubmit">查询el-button>
    10.       el-form-item>
    11.       <el-form-item>
    12.         <el-button type="primary" plain @click="open">新增el-button>
    13.       el-form-item>
    14.     el-form>
    15.     
    16.     <el-table :data="tableData" style="width: 100%">
    17.       <el-table-column prop="id" label="书籍ID">el-table-column>
    18.       <el-table-column prop="bookname" label="书籍名称">el-table-column>
    19.       <el-table-column prop="price" label="书籍价格">el-table-column>
    20.       <el-table-column prop="booktype" label="书籍类型">el-table-column>
    21.       <el-table-column label="操作">
    22.         <template slot-scope="scope">
    23.           <el-button size="mini" @click="open(scope.$index,scope.row)">编辑el-button>
    24.           <el-button size="mini" type="danger" @click="Del(scope.row)">删除el-button>
    25.         template>
    26.       el-table-column>
    27.     el-table>
    28.     
    29.     <div class="block" style="padding: 20px;">
    30.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    31.         background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
    32.         :total="total">
    33.       el-pagination>
    34.     div>
    35.     
    36.     <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="close">
    37.       <el-form :model="book" :rules="rules" ref="book">
    38.         <el-form-item label="书籍编号 :" :label-width="formLabelWidth">
    39.           <el-input v-model="book.id" autocomplete="off">el-input>
    40.         el-form-item>
    41.         <el-form-item label="书籍名称 :" prop="bookname" :label-width="formLabelWidth">
    42.           <el-input v-model="book.bookname" autocomplete="off">el-input>
    43.         el-form-item>
    44.         <el-form-item label="书籍价格 :" prop="price" :label-width="formLabelWidth">
    45.           <el-input v-model="book.price" autocomplete="off">el-input>
    46.         el-form-item>
    47.         <el-form-item label="书籍类型 :" prop="booktype" :label-width="formLabelWidth">
    48.           <el-select v-model="book.booktype" placeholder="请选择书籍类型">
    49.             <el-option v-for="t in types" :label="t.tname" :value="t.tname" :key="'key'+t.tid">el-option>
    50.           el-select>
    51.         el-form-item>
    52.       el-form>
    53.       <div slot="footer" class="dialog-footer">
    54.         <el-button @click="close">取 消el-button>
    55.         <el-button type="primary" @click="submit">确 定el-button>
    56.       div>
    57.     el-dialog>
    58.   div>
    59.  
    60. template>
    61.  
    62. <script>
    63.   export default {
    64.     data() {
    65.       return {
    66.         bookname: '',
    67.         tableData: [],
    68.         rows: 10,
    69.         total: 0,
    70.         page: 1,
    71.         formLabelWidth: '120px', //弹出窗输入框前的文字宽度
    72.         title: '书籍新增', //弹出窗标题
    73.         dialogFormVisible: false, //默认关闭
    74.         book: {
    75.           id: '',
    76.           bookname: '',
    77.           price: '',
    78.           booktype: ''
    79.         },
    80.         types: [],
    81.         //增加表单验证
    82.         rules: {
    83.           bookname: [{
    84.               required: true,
    85.               message: '请输入书籍的名称',
    86.               trigger: 'blur'
    87.             },
    88.             {
    89.               min: 2,
    90.               max: 10,
    91.               message: '书籍名称长度在 2 到 10 个字符',
    92.               trigger: 'blur'
    93.             }
    94.           ],
    95.           price: [{
    96.             required: true,
    97.             message: '请填写书籍价格',
    98.             trigger: 'blur'
    99.           }],
    100.           booktype: [{
    101.             required: true,
    102.             message: '请选择书籍类型',
    103.             trigger: 'blur'
    104.           }]
    105.         }
    106.       }
    107.     },
    108.     methods: {
    109.       //书籍删除的方法
    110.       Del(r) {
    111.         this.$confirm('你确定将编号为' + r.id + '的书籍永久删除, 是否继续?', '提示', {
    112.           confirmButtonText: '确定',
    113.           cancelButtonText: '取消',
    114.           type: 'warning'
    115.         }).then(() => {
    116.           //获取配置的书籍删除方法请求地址
    117.           let url = this.axios.urls.SYSTEM_BookDel;
    118.           //请求后端地址进行书籍的新增或修改
    119.           this.axios.post(url, {
    120.             id: r.id
    121.           }).then(d => {
    122.             this.$message({
    123.               type: 'success',
    124.               message: '书籍删除成功!'
    125.             });
    126.             this.query({});
    127.           }).catch(e => {});
    128.         }).catch(() => {
    129.           this.$message({
    130.             type: 'info',
    131.             message: '已取消删除'
    132.           });
    133.         });
    134.       },
    135.       submit() {
    136.         //获取值
    137.         let params = {
    138.           id: this.book.id,
    139.           bookname: this.book.bookname,
    140.           price: this.book.price,
    141.           booktype: this.book.booktype
    142.         }
    143.         console.log(params);
    144.         //获取配置的方法请求地址
    145.         let url = this.axios.urls.SYSTEM_BookAdd;
    146.         //如果是书籍编辑就将请求地址修改为书籍修改的请求地址
    147.         if (this.title == '书籍编辑') {
    148.           url = this.axios.urls.SYSTEM_BookEdit;
    149.         }
    150.         //请求前必须通过表单验证
    151.         this.$refs['book'].validate((valid) => {
    152.            console.log(valid);
    153.           if (valid) {
    154.             //请求后端地址进行书籍的新增或修改
    155.             this.axios.post(url, params).then(d => {
    156.               // console.log(url);
    157.               // console.log(d);
    158.               this.close();
    159.               this.query({});
    160.             }).catch(e => {});
    161.           } else {
    162.             this.$message('有必输入项或者没有按要求输入，请正确填写！！');
    163.             return false;
    164.           }
    165.         });
    166.  
    167.  
    168.       },
    169.       //弹出窗取消，值初始化
    170.       close() {
    171.         this.book = {
    172.           id: '',
    173.           bookname: '',
    174.           price: '',
    175.           booktype: ''
    176.         };
    177.         this.dialogFormVisible = false;
    178.       },
    179.       //打开弹出窗，进行书籍的编辑
    180.       open(index, row) {
    181.         this.dialogFormVisible = true;
    182.         if (row) {
    183.           this.title = '书籍编辑';
    184.           this.book.id = row.id;
    185.           this.book.bookname = row.bookname
    186.           this.book.price = row.price;
    187.           this.book.booktype = row.booktype;
    188.         }
    189.       },
    190.       handleSizeChange(r) {
    191.         //当页大小发生变化
    192.         let params = {
    193.           bookname: this.bookname,
    194.           rows: r,
    195.           page: this.page
    196.         }
    197.         // console.log(params)
    198.         this.query(params);
    199.       },
    200.       handleCurrentChange(p) {
    201.         //当前页码大小发生变化
    202.         let params = {
    203.           bookname: this.bookname,
    204.           rows: this.rows,
    205.           page: p
    206.         }
    207.         // console.log(params)
    208.         this.query(params);
    209.       },
    210.       query(params) {
    211.         //获取后台请求书籍数据的地址
    212.         let url = this.axios.urls.SYSTEM_BookList;
    213.         this.axios.get(url, {
    214.           params: params
    215.         }).then(d => {
    216.           // console.log(url)
    217.           this.tableData = d.data.rows;
    218.           this.total = d.data.total;
    219.         }).catch(e => {});
    220.       },
    221.       onSubmit() {
    222.         let params = {
    223.           bookname: this.bookname
    224.         }
    225.         // console.log(params)
    226.         this.query(params);
    227.         this.bookname = ''
    228.       }
    229.     },
    230.     created() {
    231.       this.query({});
    232.       //初始书籍类型的书籍
    233.       this.types = [{
    234.         tid: 1,
    235.         tname: '刘勾八'
    236.       }, {
    237.         tid: 2,
    238.         tname: '渣渣辉'
    239.       }, {
    240.         tid: 3,
    241.         tname: '耗子'
    242.       }, {
    243.         tid: 4,
    244.         tname: '叼毛'
    245.       }, {
    246.         tid: 5,
    247.         tname: '耗子'
    248.       }];
    249.     }
    250.   }
    251. script>
    252.  
    253. <style>
    254. style>

              好啦今天就分享到这了，希望能帮到你哦！！！

  • 相关阅读:
    计算机组成原理-华科版本
    java中对象和类应用实例
    SQL注入简介
    一小时快速上手win10 docker 、vscode、MobaXterm、git协作开发
    前端工程化 之 Node 基础
    TypeScript - 枚举类型 -字符型枚举
    简单聊聊异常体系
    OCR是什么意思，有哪些好用的OCR识别软件？
    实现list的简单模型
    Visual Studio 2022的安装 - 编程手把手系列文章
  • 原文地址：https://blog.csdn.net/m0_74915426/article/details/133720433