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

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

2023-10-23 28
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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数据库
项目数据数据库
增删改查数据库
数据表格数据库
匿瘾
目录
相关文章
花开富贵111
|
3天前
|
文字识别 负载均衡 算法
视觉智能开放平台产品使用合集之人脸数据库已创建超过1000个人脸数据，怎么开通更多人脸数据库
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台，这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API，快速将视觉智能功能集成到自己的应用或服务中，而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
花开富贵111
14 3
冲冲冲c
|
2天前
|
SQL 关系型数据库 数据管理
数据管理DMS产品使用合集之归档数据至其它MySQL数据库时，如何指定目的库
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能，助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
冲冲冲c
13 1
码农阿豪
|
3天前
|
Java 数据库 Maven
自己本地模拟内存数据库增删改查
自己本地模拟内存数据库增删改查
码农阿豪
3 0
米诺斯
|
3天前
|
Linux 数据库
Linux安装达梦数据库达梦数据
Linux安装达梦数据库达梦数据
米诺斯
10 0
游客zn7mvnkypuy76
|
3天前
|
SQL 存储 Oracle
老程序员分享：petshop详解之二：PetShop数据访问层之数据库访问设计
老程序员分享：petshop详解之二：PetShop数据访问层之数据库访问设计
游客zn7mvnkypuy76
4 0
爱你三千遍斯塔克
|
4天前
|
前端开发 JavaScript 小程序
Navicat使用导入向导批量插入数据到数据库
Navicat使用导入向导批量插入数据到数据库
爱你三千遍斯塔克
6 0
以山向海
|
3天前
|
存储 关系型数据库 MySQL
关系型数据库mysql二进制日志点在时间恢复
【6月更文挑战第21天】
以山向海
17 4
以山向海
|
3天前
|
存储 SQL 关系型数据库
关系型数据库mysql二进制日志辅助备份
【6月更文挑战第21天】
以山向海
14 2
以山向海
|
4天前
|
存储 关系型数据库 MySQL
关系型数据库mysql回滚日志（Undo Log）
【6月更文挑战第20天】
以山向海
14 3
以山向海
|
4天前
|
SQL 运维 关系型数据库
关系型数据库mysql二进制日志（Binary Log, Binlog）
【6月更文挑战第20天】
以山向海
17 3

热门文章

最新文章

  • 1
    查询提速11倍、资源节省70%，阿里云数据库内核版 Apache Doris 在网易日志和时序场景的实践
  • 2
    【MySQL-10】数据库函数-案例演示【字符串/数值/日期/流程控制函数】（代码演示＆可cv代码）
  • 3
    Doris和Greenplum数据库简单对比
  • 4
    Doris数据库安装插件流程
  • 5
    RAG：AI大模型联合向量数据库和 Llama-index，助力检索增强生成技术
  • 6
    SQL数据库基础语法-增删改
  • 7
    MongoDB非关系型数据库实战
  • 8
    【C 言专栏】C 语言与数据库的连接与操作
  • 9
    【MySQL-1】理解关系型数据库＆数据的数据模型
  • 10
    如何做数据库自动化运维
  • 1
    使用Navicat Premium 12进行数据库定期自动备份(定时任务)--图文详解
    76
  • 2
    数据库索引的作用和优点缺点
    20
  • 3
    SpringBoot启动时设置不加载数据库
    57
  • 4
    activiti工作流数据库表介绍
    45
  • 5
    卸载云服务器上的 MySQL 数据库
    95
  • 6
    什么是 SAP HANA 内存数据库 的 Delta Storage
    43
  • 7
    关于 SAP ABAP REPOSRC 数据库表在 HANA 中的 DDL Definition
    39
  • 8
    SAP ABAP CDS View 源代码存储的数据库表揭秘和其他相关数据库表介绍试读版
    37
  • 9
    Redis 服务器指南：高性能内存数据库的完整使用指南
    87
  • 10
    迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
    24

    • 相关课程

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

    • 相关电子书

    更多
  • 2022 DTCC-阿里云一站式数据库上云最佳实践
  • 云时代的数据库技术趋势
  • 超大型金融机构国产数据库全面迁移成功实践

    • 相关实验场景

    更多
  • PolarDB for AI：在数据库中通过SQL实现AI能力
  • 云原生HTAP数据库，让你的交易和分析一库搞定
  • SQLServer数据库的创建
  • 使用交互方式创建数据表
  • 手把手教你把IoT传感器数据存储到数据库
  • WorkBench操作云上数据库
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）