AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2023-10-23 51
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SPA项目之主页面--数据表格的增删改查

一.增删改查

1.样式准备

<template>
  <div class="books" style="padding: 20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="open">增加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="书籍编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书籍类别">
      </el-table-column>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span class="demonstration">完整功能</span>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close='clear'>
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书籍编号" :label-width="formLabelWidth">
          <el-input v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
          <el-select v-model="book.booktype" placeholder="请选择书籍类型">
            <el-option v-for="t in types" :label="t.name" :value="t.name" key="'key'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dosuib">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

2.增加

为了代码的简洁性封装了一个clear的方法

clear() {
        this.dialogFormVisible = false;
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }

后面会使用到

dosuib() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '编辑窗体') {
            let url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            };
            this.axios.post(url, params).then(r => {
              console.log(r)
              this.clear();
              this.query({});
            }).catch(e => {
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      clear() {
        this.dialogFormVisible = false;
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
        this.title = '新增窗体';
      },

3.删除

del(idx, row) {
        this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {
            id:row.id
          }).then(r => {
            console.log(r);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query({});
          }).catch(e => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

4.修改

open(idx, row) {
        this.dialogFormVisible = true;
        if (row) {
          this.title = '编辑窗体';
          this.book.bookname = row.bookname;
          this.book.price = row.price;
          this.book.booktype = row.booktype;
          this.book.id = row.id;
        }
      },

5.查询

query(params) {
        let url = this.axios.urls.BOOK_LIST;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r)
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {
        })
      },
onSubmit() {
        let params = {
          bookname: this.bookname
        }
        this.query(params);
      },
      handleSizeChange(r) {
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        this.query(params);
      },
      handleCurrentChange(p) {
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        this.query(params);
      }
    },

#所有代码

<template>
  <div class="books" style="padding: 20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="open">增加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="书籍编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书籍类别">
      </el-table-column>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span class="demonstration">完整功能</span>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close='clear'>
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书籍编号" :label-width="formLabelWidth">
          <el-input v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
          <el-select v-model="book.booktype" placeholder="请选择书籍类型">
            <el-option v-for="t in types" :label="t.name" :value="t.name" key="'key'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dosuib">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        total: 0,
        page: 1,
        title: '新增',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        types: [],
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        },
        rules: {
          bookname: [{
              required: true,
              message: '请输入书籍名称',
              trigger: 'blur'
            },
            {
              min: 4,
              max: 11,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      del(idx, row) {
        this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {
            id:row.id
          }).then(r => {
            console.log(r);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query({});
          }).catch(e => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      dosuib() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '编辑窗体') {
            let url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            };
            this.axios.post(url, params).then(r => {
              console.log(r)
              this.clear();
              this.query({});
            }).catch(e => {
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      clear() {
        this.dialogFormVisible = false;
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
        this.title = '新增窗体';
      },
      open(idx, row) {
        this.dialogFormVisible = true;
        if (row) {
          this.title = '编辑窗体';
          this.book.bookname = row.bookname;
          this.book.price = row.price;
          this.book.booktype = row.booktype;
          this.book.id = row.id;
        }
      },
      query(params) {
        let url = this.axios.urls.BOOK_LIST;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r)
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {
        })
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }
        this.query(params);
      },
      handleSizeChange(r) {
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        this.query(params);
      },
      handleCurrentChange(p) {
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        this.query(params);
      }
    },
    created() {
      this.query({});
      this.types = [{
          id: 1,
          name: '爽文',
        },
        {
          id: 2,
          name: '伦理',
        },
        {
          id: 3,
          name: '仙侠',
        },
        {
          id: 4,
          name: '玄幻',
        },
      ]
    }
  }
</script>
<style>
</style>
-

url

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

二.表单验证

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

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='clear'>
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书籍编号" :label-width="formLabelWidth">
          <el-input v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
          <el-select v-model="book.booktype" placeholder="请选择书籍类型">
            <el-option v-for="t in types" :label="t.name" :value="t.name" key="'key'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dosuib">确 定</el-button>
      </div>
    </el-dialog>

2.定义规则

rules: {
          bookname: [{
              required: true,
              message: '请输入书籍名称',
              trigger: 'blur'
            },
            {
              min: 4,
              max: 11,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }]
        }
      }
    },

关键词：
增删改查数据库
表格数据库
spa数据库
项目数据数据库
数据表格数据库
匿瘾
目录
相关文章
蓝色流星1000
|
2月前
|
存储 监控 数据处理
flink 向doris 数据库写入数据时出现背压如何排查？
本文介绍了如何确定和解决Flink任务向Doris数据库写入数据时遇到的背压问题。首先通过Flink Web UI和性能指标监控识别背压，然后从Doris数据库性能、网络连接稳定性、Flink任务数据处理逻辑及资源配置等方面排查原因，并通过分析相关日志进一步定位问题。
蓝色流星1000
179 61
二流小码农
|
1天前
|
SQL 关系型数据库 API
HarmonyOs开发：关系型数据库封装之增删改查
每个方法都预留了多种调用方式，比如使用callback异步回调或者使用Promise异步回调，亦或者同步执行，大家在使用的过程中，可以根据自身业务需要进行选择性调用，也分别暴露了成功和失败的方法，可以针对性的判断在执行的过程中是否执行成功。
二流小码农
23 13
技术自由圈/原疯狂创客圈
|
4天前
|
存储 Java easyexcel
招行面试：100万级别数据的Excel，如何秒级导入到数据库？
本文由40岁老架构师尼恩撰写，分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备，在面试中展示强大的技术实力。针对百万级数据的Excel导入难题，尼恩推荐使用阿里巴巴开源的EasyExcel框架，并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案，实现高效的数据处理。此外，文章还提供了完整的代码示例和配置说明，帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题，提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
技术自由圈/原疯狂创客圈
36 3
小宋1021
|
7天前
|
前端开发 JavaScript 数据库
获取数据库中字段的数据作为下拉框选项
获取数据库中字段的数据作为下拉框选项
小宋1021
35 5
游客54bz4h3flp7ai
|
2月前
|
关系型数据库 MySQL 数据库
GBase 数据库如何像MYSQL一样存放多行数据
GBase 数据库如何像MYSQL一样存放多行数据
游客54bz4h3flp7ai
41 2
数据库小能手
|
2月前
|
关系型数据库 分布式数据库 数据库
云栖大会｜从数据到决策：AI时代数据库如何实现高效数据管理？
在2024云栖大会「海量数据的高效存储与管理」专场，阿里云瑶池讲师团携手AMD、FunPlus、太美医疗科技、中石化、平安科技以及小赢科技、迅雷集团的资深技术专家深入分享了阿里云在OLTP方向的最新技术进展和行业最佳实践。
数据库小能手
83 4
栈江湖
|
8天前
|
存储 Oracle 关系型数据库
数据库传奇：MySQL创世之父的两千金My、Maria
《数据库传奇：MySQL创世之父的两千金My、Maria》介绍了MySQL的发展历程及其分支MariaDB。MySQL由Michael Widenius等人于1994年创建，现归Oracle所有，广泛应用于阿里巴巴、腾讯等企业。2009年，Widenius因担心Oracle收购影响MySQL的开源性，创建了MariaDB，提供额外功能和改进。维基百科、Google等已逐步替换为MariaDB，以确保更好的性能和社区支持。掌握MariaDB作为备用方案，对未来发展至关重要。
栈江湖
32 3
栈江湖
|
8天前
|
安全 关系型数据库 MySQL
MySQL崩溃保险箱：探秘Redo/Undo日志确保数据库安全无忧！
《MySQL崩溃保险箱：探秘Redo/Undo日志确保数据库安全无忧！》介绍了MySQL中的三种关键日志：二进制日志（Binary Log）、重做日志（Redo Log）和撤销日志（Undo Log）。这些日志确保了数据库的ACID特性，即原子性、一致性、隔离性和持久性。Redo Log记录数据页的物理修改，保证事务持久性；Undo Log记录事务的逆操作，支持回滚和多版本并发控制（MVCC）。文章还详细对比了InnoDB和MyISAM存储引擎在事务支持、锁定机制、并发性等方面的差异，强调了InnoDB在高并发和事务处理中的优势。通过这些机制，MySQL能够在事务执行、崩溃和恢复过程中保持
栈江湖
32 3
栈江湖
|
8天前
|
SQL 关系型数据库 MySQL
数据库灾难应对：MySQL误删除数据的救赎之道，技巧get起来！之binlog
《数据库灾难应对：MySQL误删除数据的救赎之道，技巧get起来！之binlog》介绍了如何利用MySQL的二进制日志（Binlog）恢复误删除的数据。主要内容包括： 1. **启用二进制日志**：在`my.cnf`中配置`log-bin`并重启MySQL服务。 2. **查看二进制日志文件**：使用`SHOW VARIABLES LIKE &#39;log_%&#39;;`和`SHOW MASTER STATUS;`命令获取当前日志文件及位置。 3. **创建数据备份**：确保在恢复前已有备份，以防意外。 4. **导出二进制日志为SQL语句**：使用`mysqlbinlog`
栈江湖
44 2
AIweker
|
22天前
|
关系型数据库 MySQL 数据库
Python处理数据库：MySQL与SQLite详解 | python小知识
本文详细介绍了如何使用Python操作MySQL和SQLite数据库，包括安装必要的库、连接数据库、执行增删改查等基本操作，适合初学者快速上手。
AIweker
156 15

热门文章

最新文章

  • 1
    MySQL数据库下载安装教程（Windows&Linux）
  • 2
    达梦数据库字段类型 varchar 转 text
  • 3
    Python处理数据库：MySQL与SQLite详解 | python小知识
  • 4
    使用 Spring Boot 执行数据库操作：全面指南
  • 5
    PolarDB 分布式版 V2.0，安全可靠的集中分布式一体化数据库管理软件
  • 6
    在云上轻松部署达梦数据库
  • 7
    活动实践 | 自建数据库迁移到云数据库
  • 8
    MySQL导入.sql文件后数据库乱码问题
  • 9
    数据库数据恢复—MYSQL数据库文件损坏的数据恢复案例
  • 10
    数据库数据恢复—ORACLE常见故障的数据恢复方案
  • 1
    云原生一体化数据库技术是一个具有潜力的领域
    118
  • 2
    构建高性能数据库的秘诀
    99
  • 3
    新一代数据库技术：融合AI的智能数据管理系统
    336
  • 4
    新一代数据库技术：融合人工智能与分布式系统的未来前景
    360
  • 5
    使用 Python 访问数据库的基本方法
    75
  • 6
    数据库解决方案
    107
  • 7
    mysql 设置环境变量与未设置环境变量连接数据库的区别
    172
  • 8
    服务器Linux系统配置mysql数据库主从自动备份
    226
  • 9
    SQLite数据库介绍以及安装
    113
  • 10
    sprinboot+vue集成neo4j图数据库
    185

    • 相关课程

    更多
  • 数据库的前世今生
  • 数据库核心概念
  • 从传统数据库到云数据库演进
  • 数据库常见问题排查
  • 数据库及SQL/MySQL基础
  • 高校精品课-西安交通大学 -数据库理论与技术

    • 相关电子书

    更多
  • DTCC 2022大会集锦《云原生一站式数据库技术与实践》
  • 阿里云瑶池数据库精要2022版
  • 2022 DTCC-阿里云一站式数据库上云最佳实践

    • 相关实验场景

    更多
  • 使用DAS实现数据库SQL优化
  • 自建数据库迁移到云数据库
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • 快速体验PolarDB开源数据库
  • 使用交互方式创建数据表
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)