• ElementUI结合Vue完成主页的CUD(增删改)&表单验证

    目录

    一、CUD

    ( 1 )  CU讲述

    ( 2 )  编写

    1. CU

    2. 删除

    二、验证

    前端整合代码 :

    一、CUD

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

    使用ElementUI结合Vue导航菜单和后台数据分页查询

    ( 1 )  CU讲述

    在CRUD操作中，CU代表创建（Create）和更新（Update）。

    1. 创建（Create）：创建操作用于在数据库中创建新的数据记录。它通常涉及向数据库中插入新的数据行或文档。例如，在关系型数据库中，可以使用INSERT语句来创建新的数据行。在文档数据库中，可以直接插入新的文档。

    2. 更新（Update）：更新操作用于修改数据库中已存在的数据记录。它可以用于更改数据行或文档中的一个或多个属性的值。例如，在关系型数据库中，可以使用UPDATE语句来更新数据行的值。在文档数据库中，可以使用更新操作符来修改文档的属性。

    这两个操作通常是CRUD操作中最常用的。创建操作用于添加新的数据记录，而更新操作用于修改已存在的数据记录。它们可以在应用程序中用于实现用户注册、添加新的产品、更新用户信息等功能。

    ( 2 )  编写

    1. CU

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

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

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

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

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

     在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.     },

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

    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.axios.post(url, params).then(d => {
    18.               // console.log(url);
    19.               // console.log(d);
    20.               this.close();
    21.               this.query({});
    22.             }).catch(e => {});
    23.    
    24.  
    25.  
    26.       },
    27.       //弹出窗取消，值初始化
    28.       close() {
    29.         this.book = {
    30.           id: '',
    31.           bookname: '',
    32.           price: '',
    33.           booktype: ''
    34.         };
    35.         this.dialogFormVisible = false;
    36.       },
    37.       //打开弹出窗，进行书籍的编辑
    38.       open(index, row) {
    39.         this.dialogFormVisible = true;
    40.         if (row) {
    41.           this.title = '书籍编辑';
    42.           this.book.id = row.id;
    43.           this.book.bookname = row.bookname
    44.           this.book.price = row.price;
    45.           this.book.booktype = row.booktype;
    46.         }
    47.       },

    在created中初始化数据

    1. created() {
    2.       this.query({});
    3.       //初始书籍类型的书籍
    4.       this.types = [{
    5.         tid: 1,
    6.         tname: '玄幻'
    7.       }, {
    8.         tid: 2,
    9.         tname: '爽文'
    10.       }, {
    11.         tid: 3,
    12.         tname: '爱情'
    13.       }, {
    14.         tid: 4,
    15.         tname: '动作'
    16.       }, {
    17.         tid: 5,
    18.         tname: '都市'
    19.       }];
    20.     }

    增加表格操作 ：

    1.       <el-table-column label="操作">
    2.         <template slot-scope="scope">
    3.           <el-button size="mini" @click="open(scope.$index,scope.row)">编辑el-button>
    4.           <el-button size="mini" type="danger" @click="Del(scope.row)">删除el-button>
    5.         template>
    6.       el-table-column>

    增加效果 :

    修改效果 : 

    2. 删除

    在script标签中编写方法进行数据删除实现，在methods中编写方法:

    1.      //书籍删除的方法
    2.       Del(r) {
    3.         this.$confirm('你确定将编号为' + r.id + '的书籍永久删除, 是否继续?', '提示', {
    4.           confirmButtonText: '确定',
    5.           cancelButtonText: '取消',
    6.           type: 'warning'
    7.         }).then(() => {
    8.           //获取配置的书籍删除方法请求地址
    9.           let url = this.axios.urls.SYSTEM_BookDel;
    10.           //请求后端地址进行书籍的新增或修改
    11.           this.axios.post(url, {
    12.             id: r.id
    13.           }).then(d => {
    14.             this.$message({
    15.               type: 'success',
    16.               message: '书籍删除成功!'
    17.             });
    18.             this.query({});
    19.           }).catch(e => {});
    20.         }).catch(() => {
    21.           this.$message({
    22.             type: 'info',
    23.             message: '已取消删除'
    24.           });
    25.         });
    26.       }

    删除效果 ： 

    二、验证

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

    :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>

     

  • 相关阅读:
    美国SAFECOM发布《采用公共安全云计算的注意事项》指南
    Django笔记二十五之数据库函数之日期函数
    9.基于SpringBoot3+MybatisPlus定制化代码生成器类
    iMAP——论文解析
    Centos7环境下搭建Rabbitmq 集群
    分享一个口碑炸裂的Python可视化模块，简单快速入手！！
    某医院基于超融合架构的规划设计和应用实践
    欢迎入坑单目深度估计
    关于构造方法
    【prometheus】监控MySQL并实现可视化
  • 原文地址：https://blog.csdn.net/SAME_LOVE/article/details/133465278