• SPA项目开发之CRUD+表单验证

    目录

    一、表单验证

    效果

    二、crud（增删改查）

    Articles.vue

    新增效果

     编辑效果

     删除效果

    一、表单验证

    所需表单

    2. 		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
    3. 			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
    4. 				<el-form-item label="文章标题" prop="title">
    5. 					<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题">el-input>
    6. 				el-form-item>
    7. 				<el-form-item label="文章内容" prop="body">
    8. 					<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容">el-input>
    9. 				el-form-item>
    10. 			el-form>
    11. 			<div slot="footer" class="dialog-footer">
    12. 				<el-button size="small" @click="closeDialog">取消el-button>
    13. 				<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存el-button>
    14. 			div>
    15. 		el-dialog>

     表单验证的规则（校验） 都放入Articles.vue

    1. data() {
    2. 			return {
    3. 				listData: [],
    4. 				formInline: {
    5. 					page: 1,
    6. 					rows: 10,
    7. 					title: ''
    8. 				},
    9. 				total: 0,
    10. 				title: '',
    11. 				editFormVisible: false,
    12. 				editForm: {
    13. 					title: '',
    14. 					body: '',
    15. 					id: 0
    16. 				},
    17. 				rules: {
    18. 					title: [{
    19. 							required: true,
    20. 							message: '请输入活动名称',
    21. 							trigger: 'blur'
    22. 						},
    23. 						{
    24. 							min: 3,
    25. 							max: 5,
    26. 							message: '长度在 3 到 5 个字符',
    27. 							trigger: 'blur'
    28. 						}
    29. 					],
    30. 					body: [{
    31. 						required: true,
    32. 						message: '请输入活动名称',
    33. 						trigger: 'blur'
    34. 					}]
    35. 				}
    36. 			};
    37. 		},

    效果：

    二、crud（增删改查）

    Articles.vue

    1. <template>
    2.   <div>
    3.     <el-form :inline="true" :model="formInline" class="user-search">
    4.       <el-form-item label="搜索：">
    5.         <el-input
    6.           size="small"
    7.           v-model="formInline.title"
    8.           placeholder="输入文章标题"
    9.         >el-input>
    10.       el-form-item>
    11.       <el-form-item>
    12.         <el-button
    13.           size="small"
    14.           type="primary"
    15.           icon="el-icon-search"
    16.           @click="search"
    17.           >搜索
    18.         >
    19.         <el-button
    20.           size="small"
    21.           type="primary"
    22.           icon="el-icon-plus"
    23.           @click="handleEdit()"
    24.           >添加
    25.         >
    26.       el-form-item>
    27.     el-form>
    28.     
    29.     <el-table
    30.       size="small"
    31.       :data="listData"
    32.       element-loading-text="拼命加载中"
    33.       style="width: 100%;"
    34.     >
    35.       <el-table-column align="center" type="selection" min-width="1">
    36.       el-table-column>
    37.       <el-table-column sortable prop="id" label="文章ID" min-width="1">
    38.       el-table-column>
    39.       <el-table-column sortable prop="title" label="文章标题" min-width="3">
    40.       el-table-column>
    41.       <el-table-column sortable prop="body" label="文章内容" min-width="5">
    42.       el-table-column>
    43.       <el-table-column align="center" label="操作" min-width="6">
    44.         <template slot-scope="scope">
    45.           <el-button size="mini" @click="doEdit(scope.$index, scope.row)"
    46.             >编辑
    47.           >
    48.           <el-button
    49.             size="mini"
    50.             type="danger"
    51.             @click="deleteUser(scope.$index, scope.row)"
    52.             >删除
    53.           >
    54.         template>
    55.       el-table-column>
    56.     el-table>
    57.     
    58.     <el-pagination
    59.       style="margin-top: 20px;"
    60.       @size-change="handleSizeChange"
    61.       @current-change="handleCurrentChange"
    62.       :current-page="formInline.page"
    63.       :page-sizes="[10, 20, 30, 50]"
    64.       :page-size="100"
    65.       layout="total, sizes, prev, pager, next, jumper"
    66.       :total="total"
    67.     >
    68.     el-pagination>
    69.  
    70.     
    71.     <el-dialog
    72.       :title="title"
    73.       :visible.sync="editFormVisible"
    74.       width="30%"
    75.       @before-close="closeDialog"
    76.     >
    77.       <el-form
    78.         label-width="120px"
    79.         :model="editForm"
    80.         :rules="rules"
    81.         ref="editForm"
    82.       >
    83.         <el-form-item label="文章标题" prop="title">
    84.           <el-input
    85.             size="small"
    86.             v-model="editForm.title"
    87.             auto-complete="off"
    88.             placeholder="请输入文章标题"
    89.           >el-input>
    90.         el-form-item>
    91.         <el-form-item label="文章内容" prop="body">
    92.           <el-input
    93.             size="small"
    94.             v-model="editForm.body"
    95.             auto-complete="off"
    96.             placeholder="请输入文章内容"
    97.           >el-input>
    98.         el-form-item>
    99.       el-form>
    100.       <div slot="footer" class="dialog-footer">
    101.         <el-button size="small" @click="closeDialog">取消el-button>
    102.         <el-button
    103.           size="small"
    104.           type="primary"
    105.           class="title"
    106.           @click="submitForm('editForm')"
    107.           >保存
    108.         >
    109.       div>
    110.     el-dialog>
    111.   div>
    112. template>
    113.  
    114. <script>
    115. export default {
    116.   data() {
    117.     return {
    118.       listData: [],
    119.       title: "",
    120.       editFormVisible: false,
    121.       formInline: {
    122.         page: 1,
    123.         rows: 10,
    124.         title: ""
    125.       },
    126.       editForm: {
    127.         title: "",
    128.         body: "",
    129.         id: 0
    130.       },
    131.       rules: {
    132.         title: [
    133.           {
    134.             required: true,
    135.             message: "请输入文章标题",
    136.             trigger: "blur"
    137.           },
    138.           {
    139.             min: 3,
    140.             max: 5,
    141.             message: "长度在 3 到 5 个字符",
    142.             trigger: "blur"
    143.           }
    144.         ],
    145.         body: [
    146.           {
    147.             required: true,
    148.             message: "请选择文字内容",
    149.             trigger: "blur"
    150.           }
    151.         ]
    152.       },
    153.       total: 0
    154.     };
    155.   },
    156.   methods: {
    157.     handleSizeChange(rows) {
    158.       this.formInline.page = 1;
    159.       this.formInline.rows = rows;
    160.       this.search();
    161.     },
    162.     handleCurrentChange(page) {
    163.       this.formInline.page = page;
    164.       this.search();
    165.     },
    166.     closeDialog() {
    167.       //关闭对话框
    168.       this.clearData();
    169.     },
    170.     handleEdit() {
    171.       //添加
    172.       this.editFormVisible = true;
    173.       this.title = "新增窗体";
    174.     },
    175.     doEdit(index, row) {
    176.       this.editForm.id = row.id;
    177.       this.editForm.title = row.title;
    178.       this.editForm.body = row.body;
    179.       this.editFormVisible = true;
    180.       this.title = "编辑窗体";
    181.     },
    182.     clearData() {
    183.       this.title = "";
    184.       this.editForm.id = 0;
    185.       this.editForm.title = "";
    186.       this.editForm.body = "";
    187.       this.editFormVisible = false;
    188.     },
    189.     deleteUser(index, row) {
    190.       // //删除
    191.       // let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    192.       // this.axios
    193.       //   .post(url, { id: row.id })
    194.       //   .then(response => {
    195.       //     //console.log(response);
    196.       //  this.$message({
    197.       //           message: response.data.msg,
    198.       //           type: 'success'
    199.       //         });
    200.       //     this.clearData();
    201.       //     this.search();
    202.       //   })
    203.       //   .catch(function(error) {
    204.       //     console.log(error);
    205.       //   });
    206.       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    207.         confirmButtonText: "确定",
    208.         cancelButtonText: "取消",
    209.         type: "warning"
    210.       })
    211.         .then(() => {
    212.           this.$message({
    213.             type: "success",
    214.             message: "删除成功!"
    215.           });
    216.           let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    217.           this.axios
    218.             .post(url, { id: row.id })
    219.             .then(response => {
    220.               //console.log(response);
    221.               this.clearData();
    222.               this.search();
    223.             })
    224.             .catch(function(error) {
    225.               console.log(error);
    226.             });
    227.         })
    228.         .catch(() => {
    229.           this.$message({
    230.             type: "info",
    231.             message: "已取消删除"
    232.           });
    233.         });
    234.     },
    235.     submitForm(formName) {
    236.       //验证
    237.       this.$refs[formName].validate(valid => {
    238.         if (valid) {
    239.           let url;
    240.           if (this.editForm.id == 0) {
    241.             url = this.axios.urls.SYSTEM_ARTICLE_ADD;
    242.           } else {
    243.             url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    244.           }
    245.           // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
    246.  
    247.           this.axios
    248.             .post(url, this.editForm)
    249.             .then(response => {
    250.               //console.log(response);
    251.               // this.$message({
    252.               //   message: response.data.msg,
    253.               //   type: 'success'
    254.               // });
    255.               this.clearData();
    256.               this.search();
    257.             })
    258.             .catch(function(error) {
    259.               console.log(error);
    260.             });
    261.         } else {
    262.           console.log("error submit!!");
    263.           return false;
    264.         }
    265.       });
    266.     },
    267.     doSearch(params) {
    268.       let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    269.       // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
    270.  
    271.       this.axios
    272.         .post(url, params)
    273.         .then(response => {
    274.           console.log(response);
    275.           this.listData = response.data.result;
    276.           this.total = response.data.pageBean.total;
    277.         })
    278.         .catch(function(error) {
    279.           console.log(error);
    280.         });
    281.     },
    282.     search() {
    283.       this.doSearch(this.formInline); //按照条件进行查询
    284.     }
    285.   },
    286.   created() {
    287.     this.doSearch({});
    288.   }
    289. };
    290. script>
    291.  
    292. <style>style>

    新增效果

     编辑效果

     

     删除效果

    id为169的就没有了 

  • 相关阅读:
    新型高强度铝合金焊条
    暑假加餐|有钱人和你想的不一样(第20天)+改进的多目标差分进化算法在电力系统环境经济调度中的应用（Python代码实现）
    Systrace系列11 —— Triple Buffer 解读
    ARM_LIB_HEAP 与 RTT_HEAP的区别
    Arduino Cloud 现已支持乐鑫 ESP32-S2、S3 和 C3
    springBoot组件注册
    【马士兵】Python基础--07
    go学习笔记
    阿里内部2400页的Java面试手册开源啦，突袭大厂面试？
    1335_FreeRTOS中xQueueReceiveFromISR函数的实现
  • 原文地址：https://blog.csdn.net/weixin_62735525/article/details/126834969