• Vue 实现表单的增删改查功能及表单的验证

    前言：

    上一篇我们已经将前端表单的数据和后端的数据交互了，今天我们就继续开发功能来实现表单的增删改查功能及表单的验证

    一，表单的增删改查功能

    新增

    去官网找模版：

    1.1添加新增按钮：

    1.2添加新增弹窗点击事件：

    1.3添加新增提交功能，刷新表单

    1.       // 确认新增
    2.       dosub() {
    3.  
    4.         this.$refs['book'].validate((valid) => {
    5.           if (valid) {
    6.             let url = this.axios.urls.BOOK_ADD;
    7.             if (this.title == '编辑窗口') {
    8.               url = this.axios.urls.BOOK_UPD;
    9.             };
    10.             let params = {
    11.               id: this.book.id,
    12.               bookname: this.book.bookname,
    13.               price: this.book.price,
    14.               booktype: this.book.booktype
    15.             };
    16.             this.axios.post(url, params).then(r => {
    17.               console.log(r);
    18.               this.clear();
    19.               this.query({});
    20.             }).catch(e => {
    21.  
    22.             });
    23.           } else {
    24.             console.log('error submit!!');
    25.             return false;
    26.           }
    27.         });
    28.  
    29.       }

    二，表单的验证

    优化：当我们点击新增区提交的时候，我们就必须要设置表单的规则去验证，不然的话我们的功能就少了体验感，后台保存的数据可能有问题！！！

    通过查看官网：

    Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

    规则

    编写规则

    注意：

    表单重置时必须先清空表单验证信息，再清空表单数据信息，通过form表单的ref属性来清空表单验证信息

    代码：

    1. this.$refs['需要验证的表单名称'].validate((valid) => {
    2.     if (valid) {
    3.     	//验证通过
    4.     	alert('submit!');
    5.     } else {
    6.     	//验证失败
    7.     	console.log('error submit!!');
    8.         return false;
    9.     }
    10. });

    具体代码：

    BookList.vue

    1. <template>
    2.   <div class="books" style="padding: 20px;">
    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" @click="onSubmit">查询</el-button>
    10.         <el-button type="primary" size="small" plain @click="open">新增</el-button>
    11.       </el-form-item>
    12.     </el-form>
    13.     <!-- 数据表格 -->
    14.     		<template>
    15.     			<el-table :data="tableData" border style="width: 100%">
    16.     				<el-table-column align="center" type="selection" min-width="1">
    17.     				</el-table-column>
    18.     				<el-table-column sortable prop="id" label="编号ID" min-width="2">
    19.     				</el-table-column>
    20.     				<el-table-column sortable prop="bookname" label="书籍名称" min-width="2">
    21.     				</el-table-column>
    22.     				<el-table-column sortable prop="price" label="书籍价格" min-width="2">
    23.     				</el-table-column>
    24.     				<el-table-column sortable prop="booktype" label="书籍类别" min-width="2">
    25.     				</el-table-column>
    26.     				<el-table-column label="操作" min-width="2">
    27.     					<template slot-scope="scope">
    28.     						<el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
    29.     						<el-button size="mini" type="danger"
    30.     							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
    31.     					</template>
    32.     				</el-table-column>
    33.     			</el-table>
    34.     		</template>
    35.     <!-- 分页 -->
    36.     <div class="block">
    37.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    38.         :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
    39.         :total="total">
    40.       </el-pagination>
    41.     </div>
    42.     <!-- 编辑窗口 -->
    43.     <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear()">
    44.       <el-form :model="book" :rules="rules" ref="book">
    45.         <el-form-item label="书籍编号" :label-width="formLabelWidth" :disabled="true">
    46.           <el-input :value="book.id" autocomplete="off"></el-input>
    47.         </el-form-item>
    48.         <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
    49.           <el-input v-model="book.bookname" autocomplete="off"></el-input>
    50.         </el-form-item>
    51.         <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
    52.           <el-input v-model="book.price" autocomplete="off"></el-input>
    53.         </el-form-item>
    54.         <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
    55.           <el-select v-model="book.booktype" placeholder="请选择书籍类别">
    56.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
    57.           </el-select>
    58.         </el-form-item>
    59.       </el-form>
    60.       <div slot="footer" class="dialog-footer">
    61.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    62.         <el-button type="primary" @click="dosub">确 定</el-button>
    63.       </div>
    64.     </el-dialog>
    65.  
    66.   </div>
    67. </template>
    68.  
    69. <script>
    70.   export default {
    71.     data() {
    72.       return {
    73.         bookname: '',
    74.         tableData: [],
    75.         page: 1,
    76.         rows: 10,
    77.         total: 0,
    78.         title: '新增窗口',
    79.         dialogFormVisible: false,
    80.         formLabelWidth: '100px',
    81.         types: [],
    82.         book: {
    83.           id: '',
    84.           bookname: '',
    85.           price: '',
    86.           booktype: ''
    87.         },
    88.         rules: {
    89.           bookname: [{
    90.             required: true,
    91.             message: '请输入书籍名称',
    92.             trigger: 'blur'
    93.           }, ],
    94.           price: [{
    95.             required: true,
    96.             message: '请输入书籍价格',
    97.             trigger: 'blur'
    98.           }, ],
    99.           booktype: [{
    100.             required: true,
    101.             message: '请选择书籍类别',
    102.             trigger: 'blur'
    103.           }, ]
    104.         }
    105.       }
    106.     },
    107.     methods: {
    108.       // 删除
    109.       handleDelete(idx, row) {
    110.         this.$confirm('此操作将永久删除id为'+row.id+'的数据是否继续?', '提示', {
    111.           confirmButtonText: '确定',
    112.           cancelButtonText: '取消',
    113.           type: 'warning'
    114.         }).then(() => {
    115.           let url = this.axios.urls.BOOK_DEL;
    116.           this.axios.post(url, {
    117.             id: row.id
    118.           }).then(r => {
    119.             console.log(r);
    120.             this.query({});
    121.           }).catch(e => {
    122. 		 
    123.           });
    124.  
    125.           this.$message({
    126.             type: 'success',
    127.             message: '删除成功!'
    128.           });
    129.         }).catch(() => {
    130.           this.$message({
    131.             type: 'info',
    132.             message: '已取消删除'
    133.           });
    134.         });
    135.  
    136.       },
    137.       // 确认新增
    138.       dosub() {
    139.  
    140.         this.$refs['book'].validate((valid) => {
    141.           if (valid) {
    142.             let url = this.axios.urls.BOOK_ADD;
    143.             if (this.title == '编辑窗口') {
    144.               url = this.axios.urls.BOOK_UPD;
    145.             };
    146.             let params = {
    147.               id: this.book.id,
    148.               bookname: this.book.bookname,
    149.               price: this.book.price,
    150.               booktype: this.book.booktype
    151.             };
    152.             this.axios.post(url, params).then(r => {
    153.               console.log(r);
    154.               this.clear();
    155.               this.query({});
    156.             }).catch(e => {
    157.  
    158.             });
    159.           } else {
    160.             console.log('error submit!!');
    161.             return false;
    162.           }
    163.         });
    164.  
    165.       },
    166.       // 初始化窗口
    167.       clear() {
    168.         this.dialogFormVisible = false;
    169.         this.title = '新增窗口',
    170.           this.book = {
    171.             id: '',
    172.             bookname: '',
    173.             price: '',
    174.             booktype: ''
    175.           }
    176.       },
    177.       // 打开窗口的方法
    178.       open(idx, row) {
    179.         this.dialogFormVisible = true;
    180.         // console.log(idx);
    181.         // console.log(row)
    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.       },
    191.       // 当前页大小
    192.       handleSizeChange(r) {
    193.         let params = {
    194.           bookname: this.bookname,
    195.           rows: r,
    196.           page: this.page
    197.         }
    198.         this.query(params);
    199.         // 当前页码
    200.       },
    201.       handleCurrentChange(p) {
    202.         let params = {
    203.           bookname: this.bookname,
    204.           rows: this.rows,
    205.           page: p
    206.         }
    207.         this.query(params);
    208.       },
    209.       query(params) {
    210.         let url = this.axios.urls.BOOK_LIST;
    211.         this.axios.get(url, {
    212.           params: params
    213.         }).then(r => {
    214.           console.log(r);
    215.           this.tableData = r.data.rows;
    216.           this.total = r.data.total;
    217.         }).catch(e => {
    218.  
    219.         });
    220.       },
    221.       onSubmit() {
    222.         let params = {
    223.           bookname: this.bookname
    224.         }
    225.         this.query(params);
    226.       }
    227.     },
    228.     created() {
    229.       this.query({});
    230.       this.types = [{
    231.         id: 1,
    232.         name: '玄幻'
    233.       }, {
    234.         id: 2,
    235.         name: '逆天'
    236.       }, {
    237.         id: 3,
    238.         name: '抗日'
    239.       }, {
    240.         id: 4,
    241.         name: '和平'
    242.       }, {
    243.         id: 5,
    244.         name: '无敌'
    245.       }];
    246.     }
    247.   }
    248. </script>
    249.  
    250. <style>
    251. </style>

    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. 	
    15. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    16. 		return this.SERVER + this[k];
    17. 	}
    18. }

    案例效果展示：


     

    三，总结:

    1. 快速开发：Element框架提供了丰富的组件和样式库，可以快速构建漂亮、一致的界面。开发人员无需从头开始编写每个组件的样式和交互逻辑，大大节省了开发时间。

    2. 响应式设计：Element框架支持响应式布局，自动适应不同的屏幕尺寸和设备类型。这意味着你的应用程序可以在桌面、平板和移动设备上以一致的方式运行，提供更好的用户体验。

    3. 可定制性：尽管Element框架提供了一套美观的默认主题和组件样式，但你也可以根据自己的需求进行定制。你可以自定义样式、颜色和布局来匹配你的品牌或项目风格。

    4. 生态系统丰富：Element框架生态系统庞大，有很多第三方的插件和扩展可供选择。这些插件和扩展可以帮助你快速实现一些高级功能和特效，提升开发效率。

    需要注意的事项包括：

    1. 版本兼容性：确保使用的Element框架版本与你的项目兼容。不同版本之间可能存在一些API变化或bug修复，需要注意及时更新。

    2. 组件选择：了解Element框架提供的组件，并选择合适的组件来满足你的需求。不要过度依赖框架提供的组件，有时可能需要自定义组件来满足特定的需求。

    3. 性能优化：Element框架虽然功能强大，但有时可能会影响页面加载速度和性能。在使用框架时要注意代码优化，减少不必要的资源加载和渲染，提高应用程序的性能。

    总结起来，学习和使用Element框架可以带来快速开发、响应式设计、可定制性和丰富的生态系统等好处。同时，在版本兼容性、组件选择和性能优化等方面需要注意。希望这些信息对你有帮助！如果有其他问题，请随时问我。

  • 相关阅读:
    数据库及程序日常开发命名实践【四期】
    二分答案裸题（加一点鸽巢原理）
    Nginx服务配置文档
    MySQL按小时分组统计日志记录数量
    数论1---整除
    Docker 部署SpringBoot项目，使用外部配置文件启动项目
    【标准解读】物联网安全的系统回顾
    Java面经整理
    导入Maven项目遇到的一些问题及解决
    R语言时间序列数据可视化: 使用plot函数可视化单序列时间序列数据、多序列时间序列数据并指定不同时间序列的线条类型（lty）
  • 原文地址：https://blog.csdn.net/m0_73647713/article/details/133345121