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

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

2023-10-23 44
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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数据库
项目数据数据库
数据表格数据库
匿瘾
目录
相关文章
数据库小能手
|
16天前
|
存储 人工智能 Cloud Native
云栖重磅｜从数据到智能：Data+AI驱动的云原生数据库
在9月20日2024云栖大会上，阿里云智能集团副总裁，数据库产品事业部负责人，ACM、CCF、IEEE会士（Fellow）李飞飞发表《从数据到智能：Data+AI驱动的云原生数据库》主题演讲。他表示，数据是生成式AI的核心资产，大模型时代的数据管理系统需具备多模处理和实时分析能力。阿里云瑶池将数据+AI全面融合，构建一站式多模数据管理平台，以数据驱动决策与创新，为用户提供像“搭积木”一样易用、好用、高可用的使用体验。
数据库小能手
82 1
云栖重磅｜从数据到智能：Data+AI驱动的云原生数据库
江湖有缘
|
18天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
江湖有缘
58 4
国产数据实战之docker部署MyWebSQL数据库管理工具
数据库小能手
|
15天前
|
关系型数据库 分布式数据库 数据库
云栖大会｜从数据到决策：AI时代数据库如何实现高效数据管理？
在2024云栖大会「海量数据的高效存储与管理」专场，阿里云瑶池讲师团携手AMD、FunPlus、太美医疗科技、中石化、平安科技以及小赢科技、迅雷集团的资深技术专家深入分享了阿里云在OLTP方向的最新技术进展和行业最佳实践。
数据库小能手
35 4
科技云报道
|
23天前
|
人工智能 Cloud Native 容灾
云数据库“再进化”，OB Cloud如何打造云时代的数据底座？
云数据库“再进化”，OB Cloud如何打造云时代的数据底座？
科技云报道
48 2
想飞的雪糕
|
24天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇（三）：运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件，模拟了 MongoDB 的核心功能，允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制，MiniMongo 与服务器端的 MongoDB 实现实时数据同步，确保数据一致性，支持发布/订阅模型和响应式数据源，适用于实时聊天、项目管理和协作工具等应用场景。
想飞的雪糕
36 0
听风de歌
|
9天前
|
SQL 关系型数据库 MySQL
go语言数据库中mysql驱动安装
【11月更文挑战第2天】
听风de歌
23 4
路卿老师
|
7天前
|
SQL 关系型数据库 MySQL
12 PHP配置数据库MySQL
路老师分享了PHP操作MySQL数据库的方法，包括安装并连接MySQL服务器、选择数据库、执行SQL语句（如插入、更新、删除和查询），以及将结果集返回到数组。通过具体示例代码，详细介绍了每一步的操作流程，帮助读者快速入门PHP与MySQL的交互。
路卿老师
22 1
m1a6
|
1月前
|
存储 关系型数据库 MySQL
Mysql(4)—数据库索引
数据库索引是用于提高数据检索效率的数据结构，类似于书籍中的索引。它允许用户快速找到数据，而无需扫描整个表。MySQL中的索引可以显著提升查询速度，使数据库操作更加高效。索引的发展经历了从无索引、简单索引到B-树、哈希索引、位图索引、全文索引等多个阶段。
m1a6
61 3
Mysql(4)—数据库索引
土木林森
|
16天前
|
监控 关系型数据库 MySQL
数据库优化：MySQL索引策略与查询性能调优实战
【10月更文挑战第27天】本文深入探讨了MySQL的索引策略和查询性能调优技巧。通过介绍B-Tree索引、哈希索引和全文索引等不同类型，以及如何创建和维护索引，结合实战案例分析查询执行计划，帮助读者掌握提升查询性能的方法。定期优化索引和调整查询语句是提高数据库性能的关键。
土木林森
82 1
众所周知
|
18天前
|
关系型数据库 MySQL Linux
在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤，包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。
本文介绍了在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤，包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。同时，文章还对比了编译源码安装与使用 RPM 包安装的优缺点，帮助读者根据需求选择最合适的方法。通过具体案例，展示了编译源码安装的灵活性和定制性。
众所周知
60 2

热门文章

最新文章

  • 1
    RDS入门——Excel文件转存到RDS数据库实践
  • 2
    干货分享 ｜ 揭秘下一代云数据库引擎MyBase for MySQL
  • 3
    SQLServer数据库日志清理 清除sqlserver2005日志 - sk
  • 4
    使用xtrabackup备份innodb引擎的数据库
  • 5
    数据库安全之权限与角色
  • 6
    服务器增加内存后无法重启数据库的问题及解决
  • 7
    Android Sqlite数据库版本升级管理初探
  • 8
    Sqlserver与access数据库sql语法十大差异
  • 9
    DbVisualizer 数据库连接工具：添加数据库驱动方法。dbvis搜索不到驱动文件夹下的驱动解决方法
  • 10
    如何通过ASP文件来增加数据库表中的字段
  • 1
    关系型数据库Oracle并行查询的实现方式
    301
  • 2
    关系型数据库Oracle并行查询的应用场景
    74
  • 3
    关系型数据库Oracle并行查询的基本概念
    101
  • 4
    现代数据库系统的性能优化策略与实践
    84
  • 5
    关系型数据库Oracle并行执行
    90
  • 6
    关系型数据库Oracle并行度（Degree of Parallelism, DOP）
    172
  • 7
    关系型数据库Oracle并行查询
    108
  • 8
    高并发场景下，到底先更新缓存还是先更新数据库？
    67
  • 9
    【最佳实践】MySQL数据库迁移到PXC集群
    95
  • 10
    关系型数据库Oracle GoldenGate
    39

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 使用DAS实现数据库SQL优化
  • MySQL基础-学生管理系统数据库设计
  • 自建数据库迁移到云数据库
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • 快速体验PolarDB开源数据库
    • 下一篇
    阿里云OSS设置跨域访问