[Elemento-UI] CUD (agregar, eliminar, modificar) y verificación de formulario (código fuente adjunto)

News 2023-10-05 06:34:17 views: null

Tabla de contenido

1. Introducción

1. Introducción

2. Función

2.CUD

1. Agregar modificaciones

1.1 Agregar ventana emergente

1.2 Definir variables

1.3 Método de definición

1.4 Código completo

2. Eliminar

2.1 Método de definición

3. Verificación del formulario

1. Agregar reglas

2. Definir reglas

3. Enviar evento

4. Código de interfaz completo

1. Introducción

1. Introducción

        Agregar, eliminar y modificar son tres operaciones comúnmente utilizadas en programación de computadoras y administración de bases de datos . El uso de operaciones de adición, eliminación y modificación puede ayudarnos a administrar y mantener datos en el sistema o base de datos para garantizar la precisión, integridad y coherencia de los datos. . Son operaciones muy comunes en programación y gestión de bases de datos y ayudan a mejorar la flexibilidad y mantenibilidad del sistema .

Lo que hacen:

  1. Agregar : Al agregar operaciones, se pueden agregar nuevos datos o funciones al sistema o base de datos. Esto es importante para ampliar las capacidades y funcionalidad del sistema. Por ejemplo, en un sistema de gestión del desempeño de los estudiantes, se puede agregar información nueva de los estudiantes mediante la operación de agregar.
  2. Eliminar : la operación de eliminación elimina datos o funciones innecesarios del sistema o la base de datos. Esto es importante para limpiar y mantener la coherencia de los datos. Por ejemplo, en una base de datos de un centro comercial en línea, los productos eliminados de la lista o caducados se pueden eliminar de la base de datos mediante una operación de eliminación.
  3. Modificar (Actualizar) : Las operaciones de modificación pueden actualizar o cambiar datos o funciones existentes en el sistema o base de datos. Esto puede ayudar a mantener la precisión y la integridad de los datos. Por ejemplo, en un sistema de gestión de información de empleados, la información salarial de los empleados se puede actualizar mediante operaciones de modificación.

2. Función

        Element UI es una biblioteca de componentes de escritorio basada en Vue.js que proporciona un amplio conjunto de componentes de interfaz de usuario, incluidas tablas, formularios, cuadros de diálogo, etc., para crear rápidamente aplicaciones web modernas.

 Las funciones principales de agregar, eliminar y modificar operaciones en Element UI son las siguientes:

  1. Agregar : en Element UI, puede usar componentes de formulario y componentes de diálogo para agregar datos. Los componentes del formulario nos permiten recopilar datos ingresados ​​por el usuario y agregarlos a una base de datos o servidor mediante una acción de envío. A través del componente de diálogo, podemos mostrar una ventana emergente para recopilar datos ingresados ​​por el usuario y luego agregarlos al sistema.
  2. Eliminar : en Element UI, puede utilizar componentes de tabla y componentes de diálogo para realizar la función de eliminación de datos. A través del componente de tabla, podemos mostrar los datos existentes en el sistema y proporcionar un botón de eliminación para que el usuario lo opere. Cuando el usuario hace clic en el botón de eliminar, puede aparecer un cuadro de diálogo para confirmar la operación de eliminación y los datos serán eliminado de la base de datos o del servidor después de la confirmación.
  3. Modificación (Actualización) : en Element UI, puede utilizar componentes de formulario y componentes de diálogo para implementar funciones de modificación de datos. A través del componente de formulario, podemos mostrar los datos existentes en el sistema y proporcionar botones de edición para que los usuarios los operen. Cuando el usuario hace clic en el botón de edición, puede aparecer un cuadro de diálogo para mostrar la interfaz de edición de datos y los datos se actualizarán. a la base de datos después de que el usuario envía la modificación o en el servidor.

        Las operaciones de adición, eliminación y modificación pueden ayudarnos a administrar y mantener datos en Element UI. Ya sea agregando nuevos datos, eliminando datos antiguos o modificando datos existentes, se puede implementar rápidamente a través de los componentes y funciones proporcionados por Element UI y proporciona una interfaz de usuario amigable y una experiencia interactiva. Esto ayuda a acelerar el desarrollo y mejora la disponibilidad del sistema y la facilidad de uso .

2.CUD

1. Agregar modificaciones

Antes de esto, necesitamos escribir nuestro código back-end para que podamos realizar operaciones posteriores.

1.1 Agregar ventana emergente

Primero, vaya a nuestro componente | Sitio web oficial de Element y busque nuestro componente emergente. También lo proporcioné a continuación.

<el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
<!--    弹窗-->
    <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="书籍类型" :label-width="formLabelWidth">
          <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="editSubmit">确 定</el-button>
      </div>
    </el-dialog>

1.2 Definir variables

data() {
    return {
      // 是否打开弹窗
      dialogFormVisible: false,
      // 弹窗标题
      title: '新增页面',
      // 定义数组接收数据
      book:
        {id: '', bookname: '', price: '', booktype: ''}
      ,
      // 类型
      types: [],
      // 输入框长度
      formLabelWidth: '100px',

    }
  }

1.3 Método de definición

 // 初始化方法
    clear() {
      this.dialogFormVisible = false;
      this.title = '新增页面';
      this.book = {
        id: '',
        bookname: '',
        price: '',
        booktype: ''
      }
    }
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      if (row) {
        this.title = '编辑页面';
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
      }

    }
    // 增加修改提交
    editSubmit() {

      //表单验证
      this.$refs['book'].validate((valid) => {
        if (valid) {
          //验证通过执行增加修改方法

          let params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
          }

          //获取后台请求书籍数据的地址
          let url = this.axios.urls.BOOK_ADD;

          if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
            url = this.axios.urls.BOOK_EDIT;
          }
          this.axios.post(url, params).then(r => {
            this.clear();//关闭窗口
            this.query({});//刷新
          }).catch(e => {

          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });

    }
  created() {
    this.types = [{id: 1, name: '玄幻'},
      {id: 2, name: '计算机'},
      {id: 3, name: '散文'},
      {id: 4, name: '古典'},
      {id: 5, name: '文学'},
      {id: 6, name: '教育'},
      {id: 7, name: '悬疑'},]
//初始化查询的方法
    this.query({})
  }

1.4 Código completo

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <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-button type="primary" plain @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit-outline" type="primary"
                     @click="handleEdit(scope.$index, scope.row)">编 辑
          </el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
            除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--    弹窗-->
    <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="书籍类型" :label-width="formLabelWidth">
          <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="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      bookname: '',
      tableData: [],
      rows: 10,
      total: 0,
      page: 1,
      // 是否打开弹窗
      dialogFormVisible: false,
      // 弹窗标题
      title: '新增页面',
      // 定义数组接收数据
      book:
        {id: '', bookname: '', price: '', booktype: ''}
      ,
      // 类型
      types: [],
      // 输入框长度
      formLabelWidth: '100px',
    }
  },
  methods: {
    // 初始化方法
    clear() {
      this.dialogFormVisible = false;
      this.title = '新增页面';
      this.book = {
        id: '',
        bookname: '',
        price: '',
        booktype: ''
      }
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      if (row) {
        this.title = '编辑页面';
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
      }

    },
    // 增加修改提交
    editSubmit() {

      let params = {
        id: this.book.id,
        bookname: this.book.bookname,
        price: this.book.price,
        booktype: this.book.booktype
      }

      //获取后台请求书籍数据的地址
      let url = this.axios.urls.BOOK_ADD;

      if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
        url = this.axios.urls.BOOK_EDIT;
      }
      this.axios.post(url, params).then(r => {
        this.clear();//关闭窗口
        this.query({});//刷新
      }).catch(e => {

      });

    },
    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
      }
      // console.log(params)
      this.query(params);
    },
    query(params) {
      //获取后台请求书籍数据的地址
      let url = this.axios.urls.BOOK_BOOKLIST;
      this.axios.get(url, {
        params: params
      }).then(d => {
        this.tableData = d.data.rows;
        this.total = d.data.total;
      }).catch(e => {

      });

    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      console.log(params)
      this.query(params);
      this.bookname = ''
    }
  },
//初始化调用
  created() {
    this.types = [{id: 1, name: '玄幻'},
      {id: 2, name: '计算机'},
      {id: 3, name: '散文'},
      {id: 4, name: '古典'},
      {id: 5, name: '文学'},
      {id: 6, name: '教育'},
      {id: 7, name: '悬疑'},]
    this.query({})
  }
}
</script>

<style>
</style>

2. Eliminar

2.1 Método de definición

  
  // 删除
    handleDelete(index, row) {
      console.log(index, row)
      let url = this.axios.urls.BOOK_DEL;
      this.axios.post(url, {id: row.id}).then(d => {
        this.query({})
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      }).catch(e => {
        this.$message('已取消');
      });
    }

3. Verificación del formulario

1. Agregar reglas

Debe agregar :model="book" :rules="rules" ref="book" al formulario en elementui . :model y ref deben ser iguales.

      <el-form :model="book" :rules="rules" ref="book">

Agregue atributos de accesorios dentro de <el-form-item>

2. Definir reglas

      //表单验证
      rules: {
        //定义验证格式
        bookname: [
          {required: true, message: '请输入书籍名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入书籍价格', trigger: 'change'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        booktype: [
          {required: true, message: '请输入书籍类型', trigger: 'blur'}
        ]
      }

3. Enviar evento

Agréguelo al evento enviado


 this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

formName: el nombre en el formato: model="book" o ref="book"

    // 增加修改提交
    editSubmit() {

      //表单验证
      this.$refs['book'].validate((valid) => {
        if (valid) {
          //验证通过执行增加修改方法

          let params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
          }

          //获取后台请求书籍数据的地址
          let url = this.axios.urls.BOOK_ADD;

          if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
            url = this.axios.urls.BOOK_EDIT;
          }
          this.axios.post(url, params).then(r => {
            this.clear();//关闭窗口
            this.query({});//刷新
          }).catch(e => {

          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });


    }

Cuando se requieran sus reglas, ejecute su método de agregar y modificar, u otros métodos.

4. Código de interfaz completo

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <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-button type="primary" plain @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit-outline" type="primary"
                     @click="handleEdit(scope.$index, scope.row)">编 辑
          </el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
            除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--    弹窗-->
    <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book" :rules="rules" ref="book">
        <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="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      bookname: '',
      tableData: [],
      rows: 10,
      total: 0,
      page: 1,
      // 是否打开弹窗
      dialogFormVisible: false,
      // 弹窗标题
      title: '新增页面',
      // 定义数组接收数据
      book:
        {id: '', bookname: '', price: '', booktype: ''}
      ,
      // 类型
      types: [],
      // 输入框长度
      formLabelWidth: '100px',
      //表单验证
      rules: {
        //定义验证格式
        bookname: [
          {required: true, message: '请输入书籍名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入书籍价格', trigger: 'change'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        booktype: [
          {required: true, message: '请输入书籍类型', trigger: 'blur'}
        ]
      },

    }
  },
  methods: {
    // 初始化方法
    clear() {
      this.dialogFormVisible = false;
      this.title = '新增页面';
      this.book = {
        id: '',
        bookname: '',
        price: '',
        booktype: ''
      }
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      if (row) {
        this.title = '编辑页面';
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
      }

    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row)
      let url = this.axios.urls.BOOK_DEL;
      this.axios.post(url, {id: row.id}).then(d => {
        this.query({})
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      }).catch(e => {
        this.$message('已取消');
      });
    },
    // 增加修改提交
    editSubmit() {

      //表单验证
      this.$refs['book'].validate((valid) => {
        if (valid) {
          //验证通过执行增加修改方法

          let params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
          }

          //获取后台请求书籍数据的地址
          let url = this.axios.urls.BOOK_ADD;

          if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
            url = this.axios.urls.BOOK_EDIT;
          }
          this.axios.post(url, params).then(r => {
            this.clear();//关闭窗口
            this.query({});//刷新
          }).catch(e => {

          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });


    },
    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
      }
      // console.log(params)
      this.query(params);
    },
    query(params) {
      //获取后台请求书籍数据的地址
      let url = this.axios.urls.BOOK_BOOKLIST;
      this.axios.get(url, {
        params: params
      }).then(d => {
        this.tableData = d.data.rows;
        this.total = d.data.total;
      }).catch(e => {

      });

    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      console.log(params)
      this.query(params);
      this.bookname = ''
    }
  },
  created() {
    this.types = [{id: 1, name: '玄幻'},
      {id: 2, name: '计算机'},
      {id: 3, name: '散文'},
      {id: 4, name: '古典'},
      {id: 5, name: '文学'},
      {id: 6, name: '教育'},
      {id: 7, name: '悬疑'},]
    this.query({})
  }
}
</script>

<style>
</style>

Eso es todo por compartir, ¡gracias a todos por discutir en el área de comentarios! ! !

Supongo que te gusta

Origin blog.csdn.net/weixin_74383330/article/details/133343463
Recomendado
Clasificación
Diario
Más
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)

Code World

© 2018 codetd.com