• SPA项目之主页面--数据表格的增删改查

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    接下来看看由辉辉所写的关于Vue+ElementUI的相关操作吧

    目录

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    一.增删改查

    1.样式准备

    2.编码

    ①增

    代码

    效果

    ②删

    代码

    效果

    ③改

    代码

    效果

    ④查

    代码

    效果

    二.表单验证

    1.在表单中使用验证规则

    2.定义验证规则

    3..触发表单验证

    一.增删改查

    1.样式准备

    2.  
    3.  
    4.  
    5. <style>
    6. style>

    2.编码

    ①增

    代码

    1. myshow() {
    2.         this.dialogFormVisible = false;
    3.         this.title = '新增窗体';
    4.         this.book = {
    5.           id: '',
    6.           bookname: '',
    7.           price: '',
    8.           booktype: ''
    9.         }
    10.       },
    11.  open(index, row) {
    12.         this.dialogFormVisible = true;
    13.         if (row) {
    14.           this.title = '编辑窗体';
    15.           this.book.id = row.id,
    16.             this.book.bookname = row.bookname,
    17.             this.book.price = row.price,
    18.             this.book.booktype = row.booktype
    19.         }
    20.       },
    21.       sure() {
    22.         /* 表单验证 */
    23.         this.$refs['book'].validate((valid) => {
    24.           if (valid) {
    25.             let url = this.axios.urls.BOOK_ADD;
    26.             if (this.title == '编辑窗体') {
    27.               url = this.axios.urls.BOOK_UPD;
    28.             }
    29.             let params = {
    30.               id: this.book.id,
    31.               bookname: this.book.bookname,
    32.               price: this.book.price,
    33.               booktype: this.book.booktype
    34.             }
    35.             this.axios.post(url, params).then(r => {
    36.               console.log(r);
    37.               this.myshow();
    38.               this.select({});
    39.             }).catch(e => {
    40.  
    41.             })
    42.           } else {
    43.             console.log('error submit!!');
    44.             return false;
    45.           }
    46.         });
    47.       },
    效果

    ②删

    代码
    1.  del(idx, row) {
    2.         this.$confirm('此操作将永久删除该行数据, 是否继续??', '提示', {
    3.           confirmButtonText: '确定',
    4.           cancelButtonText: '取消',
    5.           type: 'warning'
    6.         }).then(() => {
    7.           let url = this.axios.urls.BOOK_DEL;
    8.           this.axios.post(url, {id:row.id}).then(r => {
    9.             console.log(r);
    10.             this.$message({
    11.               type: 'success',
    12.               message: '删除成功!'
    13.             });
    14.             this.select({});
    15.           }).catch(e => {
    16.  
    17.           })
    18.         }).catch(() => {
    19.           this.$message({
    20.             type: 'info',
    21.             message: '已取消删除'
    22.           });
    23.         });
    24.       },
    效果

    ③改

    代码
    1. myshow() {
    2.         this.dialogFormVisible = false;
    3.         this.title = '新增窗体';
    4.         this.book = {
    5.           id: '',
    6.           bookname: '',
    7.           price: '',
    8.           booktype: ''
    9.         }
    10.       },
    11.  open(index, row) {
    12.         this.dialogFormVisible = true;
    13.         if (row) {
    14.           this.title = '编辑窗体';
    15.           this.book.id = row.id,
    16.             this.book.bookname = row.bookname,
    17.             this.book.price = row.price,
    18.             this.book.booktype = row.booktype
    19.         }
    20.       },
    21.       sure() {
    22.         /* 表单验证 */
    23.         this.$refs['book'].validate((valid) => {
    24.           if (valid) {
    25.             let url = this.axios.urls.BOOK_ADD;
    26.             if (this.title == '编辑窗体') {
    27.               url = this.axios.urls.BOOK_UPD;
    28.             }
    29.             let params = {
    30.               id: this.book.id,
    31.               bookname: this.book.bookname,
    32.               price: this.book.price,
    33.               booktype: this.book.booktype
    34.             }
    35.             this.axios.post(url, params).then(r => {
    36.               console.log(r);
    37.               this.myshow();
    38.               this.select({});
    39.             }).catch(e => {
    40.  
    41.             })
    42.           } else {
    43.             console.log('error submit!!');
    44.             return false;
    45.           }
    46.         });
    47.       },
    效果

    ④查

    代码
    1. select(params) {
    2.         let url = this.axios.urls.BOOK_LIST;
    3.         this.axios.get(url, {
    4.           params: params
    5.         }).then(r => {
    6.           console.log(r);
    7.           this.tableData = r.data.rows;
    8.           this.total = r.data.total;
    9.         }).catch(e => {
    10.  
    11.  
    12.         })
    13.       },
    14.       onSubmit() {
    15.         let params = {
    16.           bookname: this.bookname
    17.         }
    18.  
    19.         this.select(params)
    20.       },
    21.       handleSizeChange(num) { //当前所展示的数据条数值发生变化时所触发的事件
    22.         console.log("展示的条数是" + num)
    23.         let params = {
    24.           bookname: this.bookname,
    25.           rows: num,
    26.           page: this.page
    27.         }
    28.         this.select(params)
    29.       },
    30.  
    31.       handleCurrentChange(p) { //当前所展示的页码发生变化
    32.         console.log("当前是第" + p + "页")
    33.         let params = {
    34.           bookname: this.bookname,
    35.           rows: this.rows,
    36.           page: p
    37.         }
    38.         this.select(params)
    39.       },
    效果

    所有代码

    2.  
    3. <script>
    4.   export default {
    5.     data() {
    6.       return {
    7.         bookname: '',
    8.         tableData: [],
    9.         rows: 10,
    10.         page: 1,
    11.         total: 0,
    12.         title: '',
    13.         formLabelWidth: '100px',
    14.         dialogFormVisible: false,
    15.         types: [],
    16.         book: {
    17.           id: '',
    18.           bookname: '',
    19.           price: '',
    20.           booktype: ''
    21.         },
    22.         rules: {
    23.           bookname: [{
    24.             required: true,
    25.             message: '请输入书籍名称',
    26.             trigger: 'blur'
    27.           }],
    28.           price: [{
    29.             required: true,
    30.             message: '请输入书籍价格',
    31.             trigger: 'blur'
    32.           }],
    33.           booktype: [{
    34.             required: true,
    35.             message: '请选择书籍类型',
    36.             trigger: 'blur'
    37.           }]
    38.         },
    39.       }
    40.     },
    41.     methods: {
    42.       select(params) {
    43.         let url = this.axios.urls.BOOK_LIST;
    44.         this.axios.get(url, {
    45.           params: params
    46.         }).then(r => {
    47.           console.log(r);
    48.           this.tableData = r.data.rows;
    49.           this.total = r.data.total;
    50.         }).catch(e => {
    51.  
    52.  
    53.         })
    54.       },
    55.       onSubmit() {
    56.         let params = {
    57.           bookname: this.bookname
    58.         }
    59.  
    60.         this.select(params)
    61.       },
    62.       handleSizeChange(num) { //当前所展示的数据条数值发生变化时所触发的事件
    63.         console.log("展示的条数是" + num)
    64.         let params = {
    65.           bookname: this.bookname,
    66.           rows: num,
    67.           page: this.page
    68.         }
    69.         this.select(params)
    70.       },
    71.  
    72.       handleCurrentChange(p) { //当前所展示的页码发生变化
    73.         console.log("当前是第" + p + "页")
    74.         let params = {
    75.           bookname: this.bookname,
    76.           rows: this.rows,
    77.           page: p
    78.         }
    79.         this.select(params)
    80.       },
    81.       myshow() {
    82.         this.dialogFormVisible = false;
    83.         this.title = '新增窗体';
    84.         this.book = {
    85.           id: '',
    86.           bookname: '',
    87.           price: '',
    88.           booktype: ''
    89.         }
    90.       },
    91.       open(index, row) {
    92.         this.dialogFormVisible = true;
    93.         if (row) {
    94.           this.title = '编辑窗体';
    95.           this.book.id = row.id,
    96.             this.book.bookname = row.bookname,
    97.             this.book.price = row.price,
    98.             this.book.booktype = row.booktype
    99.         }
    100.       },
    101.       sure() {
    102.         /* 表单验证 */
    103.         this.$refs['book'].validate((valid) => {
    104.           if (valid) {
    105.             let url = this.axios.urls.BOOK_ADD;
    106.             if (this.title == '编辑窗体') {
    107.               url = this.axios.urls.BOOK_UPD;
    108.             }
    109.             let params = {
    110.               id: this.book.id,
    111.               bookname: this.book.bookname,
    112.               price: this.book.price,
    113.               booktype: this.book.booktype
    114.             }
    115.             this.axios.post(url, params).then(r => {
    116.               console.log(r);
    117.               this.myshow();
    118.               this.select({});
    119.             }).catch(e => {
    120.  
    121.             })
    122.           } else {
    123.             console.log('error submit!!');
    124.             return false;
    125.           }
    126.         });
    127.       },
    128.       del(idx, row) {
    129.         this.$confirm('此操作将永久删除该行数据, 是否继续??', '提示', {
    130.           confirmButtonText: '确定',
    131.           cancelButtonText: '取消',
    132.           type: 'warning'
    133.         }).then(() => {
    134.           let url = this.axios.urls.BOOK_DEL;
    135.           this.axios.post(url, {id:row.id}).then(r => {
    136.             console.log(r);
    137.             this.$message({
    138.               type: 'success',
    139.               message: '删除成功!'
    140.             });
    141.             this.select({});
    142.           }).catch(e => {
    143.  
    144.           })
    145.         }).catch(() => {
    146.           this.$message({
    147.             type: 'info',
    148.             message: '已取消删除'
    149.           });
    150.         });
    151.       },
    152.     },
    153.  
    154.  
    155.  
    156.  
    157.     created() {
    158.       this.select({})
    159.       this.types = [{
    160.         id: 1,
    161.         name: "爽文"
    162.       }, {
    163.         id: 2,
    164.         name: "爱情"
    165.       }, {
    166.         id: 3,
    167.         name: "谍战"
    168.       }, {
    169.         id: 4,
    170.         name: "古装"
    171.       }]
    172.     }
    173.   }
    174. script>
    175.  
    176. <style>
    177. style>

    url配置

    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_MENU_TREE': '/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. }

    二.表单验证

    1.在表单中使用验证规则

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

    2.定义验证规则

    1. rules: {
    2.           bookname: [{
    3.             required: true,
    4.             message: '请输入书籍名称',
    5.             trigger: 'blur'
    6.           }],
    7.           price: [{
    8.             required: true,
    9.             message: '请输入书籍价格',
    10.             trigger: 'blur'
    11.           }],
    12.           booktype: [{
    13.             required: true,
    14.             message: '请选择书籍类型',
    15.             trigger: 'blur'
    16.           }]
    17.         },

    3..触发表单验证

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

    好啦，今天的分享就到这了，希望能够帮到你呢！😊😊 

  • 相关阅读:
    ewebeditor编辑器漏洞
    用CSS的@property 定义变量
    高级算法复习
    Kotlin中的委托、属性委托和延迟加载
    机器学习-sklearn-高斯混合模型-学习笔记
    Java 大神面试经验
    【Python学习】—Python基础语法（五）
    iOS 16.2 的7个惊人变化
    Spring 事务编程实践
    全局后置路由守卫（afterEach）
  • 原文地址：https://blog.csdn.net/m0_74315688/article/details/133343457