vue增删改查思路

稿子:

大家好,我是青豆恩,今天我给大家讲解一下前端
vue做增删改查。它使用到的技术栈是vue+element+es6
我们先来看一下页面,点击查询可以查询到想要的信息
点击新增会有一个弹出框,点击修改也是,点击查看就会
有一个不可编辑的弹出框。点击删除可以删除一条信息。

我们使用的编辑器是vscode,文件代码分为三部分。
<template></template>
<script>
export default{
}
</script>
我们重点关注<template>(html)部分和js部分
import是引入对象,export暴露自身vue示例对象主要代码写在
export default的暴露对象下

好,我们先来写一下这个静态页面

先写这个输入框,查询按钮、新增按钮、批量删除

然后写表格(作物名/排序号/操作(查看,修改,删除))

然后写那个脚标 页面

  <el-pagination

      @size-change="sizeChangeHandle"   

      @current-change="currentChangeHandle"

      :current-page="pageIndex"

      :page-sizes="[10, 20, 50, 100]"

      :page-size="pageSize"

      :total="totalPage"

      layout="total, sizes, prev, pager, next, jumper">

    </el-pagination>

@size-change="sizeChangeHandle"

使用了size-change事件来处理页码大小

@current-change="currentChangeHandle"

使用了current-change事件来处理当前页变动时候触发的事件

:page-sizes="[10, 20, 50, 100]"

page-sizes接受一个整型数组,数组元素为展示的选择每页显示个数的选项,[100, 200, 300, 400]表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。

然后在data里声明一下

data () {

      return {

        searchForm: {

          name: ''

        },

        dataList: [],

        pageIndex: 1,

        pageSize: 10,

        totalPage: 0

      }

    },

这里的pageIndex: 1,是一进入页面默认在第一页

pageSize: 10,是默认一页显示10条

totalPage: 0,初始化时候已经填写的信息为0条

现在我们要让每页数和当前页成动态

  // 每页数

      sizeChangeHandle (val) {

        this.pageSize = val

        this.pageIndex = 1

        this.getDataList()

      },

      // 当前页

      currentChangeHandle (val) {

        this.pageIndex = val

        this.getDataList()

      },

@select-change是element封装的复选框选择事件,

selectChangeHandle是你自己自定义的方法名称,

用来接收change事件,val这个参数是element组件抛出来给你的

把val赋值给。

然后获取到后台数据

// 获取数据列表

      getDataList () {

        this.$http({

          url: '/pesticide/crop/list',

          method: 'get',

          params: {

            'page': this.pageIndex,

            'limit': this.pageSize,

            'name': this.searchForm.name

          }

        }).then(({data}) => {

          if (data && data.code === 0) {

            this.dataList = data.page.records

            this.totalPage = data.page.total

          } else {

            this.dataList = []

            this.totalPage = 0

          }

        })

      },

这时候点击事件的时候页面就会重新获取数据了

我们首先先写新增的功能

点击新增会有一个弹窗,这个弹窗涉及到页面的转换

同时删除和查看也会有弹窗

首先我们需要引入el-dialog这个组件

根据具体的路径完成一个组件页面的引入,并且取名为AddOrUpdate,然后根据规则定义一个组件,按照驼峰的形势AddOrUpdate转换成组件的名字。

import AddOrUpdate from './crop-add-or-update'

在components里注册声明这个组件

 components: {

      AddOrUpdate

    },

在template标签里面添加一个组件

为了是这个页面的组件能够成功显示我们需要使用v-if,如果是v-if的结果是false的话,这个组件就不会显示。

<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

当然为了实现这个功能,我们需要先给定一个默认值

addOrUpdateVisible: false

data () {

      return {

        searchForm: {

          name: ''

        },

        dataList: [],

        pageIndex: 1,

        pageSize: 10,

        totalPage: 0,

        addOrUpdateVisible: false

      }

    },

然后我们完成触发的方法,

<el-button type="primary" @click="addOrUpdateHandle()" size="small">新建</el-button>

删除 :

<el-button v-if="isAuth('pesticide:crop:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>

查看:

 <el-button v-if="isAuth('pesticide:crop:info')" type="text" size="small" @click="showDetails(scope.row.id)">查看</el-button>

完成新建的按钮,想要弹窗显示的时候将dialog的v-if设置为true即可,即addOrUpdateVisible设置为true,this.$nextTick(()这是Vue生命周期中的钩子函数的其中之一,在显示的时候加以操作,然后就是this.$refs.addOrUpdate.init(id)使用this.$refs.组件名.组件方法(参数),组件名称是在设定的时候通过ref="addOrUpdate"设定组件的名称变成refs的直接使用。

addOrUpdateHandle( id) {

this.addOrUpdateVisible = true

this.$nextTick(() => {

this.$refs.addOrUpdate.init(id )

})

}

 showDetails (id) {

        this.addOrUpdateVisible = true

        this.$nextTick(() => {

          this.$refs.addOrUpdate.init(id, true)

        })

      },

然后我们在组件里面,组件中的主体是在<el-dialog :visible.sync="dialogFormVisible" :title="title">里面的,通过:visible.sync="dialogFormVisible"绑定一个boolean值来完成对于dialog的显示,然后:title="title"完成对于弹窗的题目的设定

这里是一个三目运算方法

什么是三目运算:(布尔表达式 ? 值0:值1;)

 <el-dialog

    :title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"

    :close-on-click-modal="false"

    :visible.sync="visible">

</el-dialog>

调用init方法时候,把visible=true打开,this…填写信息后重置表单,防止有之前填的信息残留

init (id, disabled) {

        this.dataForm.id = ''

        this.visible = true

        this.$nextTick(() => {

          this.$refs['dataForm'].resetFields()

        })

      },

然后我们写表单里的内容

<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">

      <el-form-item label="作物名" prop="cropName">

        <el-input v-model="dataForm.cropName" :disabled="disabled" placeholder="作物名"></el-input>

      </el-form-item>

      <el-form-item label="排序号" prop="orderNum">

        <el-input v-model="dataForm.orderNum" :disabled="disabled" placeholder="排序号"></el-input>

      </el-form-item>

    </el-form>

然后通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参

Slot的通俗理解

是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置)

Disabled这里是查看的功能的。如果是查看,这个按钮就不显示。

点击取消之后这个按钮消失

 <span slot="footer" class="dialog-footer">

      <el-button @click="visible = false">取消</el-button>

      <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button>

    </span>

然后在<script>的data里加上

新建和编辑使用同一个页面,常常需要初始化data数据。

data () {

      return {

        disabled: false,

        visible: false,

        dataForm: {

          id: 0,

          cropName: '',

          orderNum: ''},

        dataRule: {

          cropName: [

            {required: true, message: '名称不能为空', trigger: 'blur'}

          ]

        }

      }

    },

然后我们开始写dataFormSubmit方法

页面加载后对表单进行验证 $("#表单id名").validate({}) 然后我们在表单里写一些校验,并且在data中写datarule

<el-form  :rules="dataRule" >

 // 表单提交

      dataFormSubmit () {

        this.$refs['dataForm']

          .validate((valid) => {

// valid为true说明校验通过

            if (valid) {

              this.$http({

//这里又是一个三目表达式,如果是新增,就进入save这个方法,如果为修改,就进入uodate这个方法,这是后台用来区分是新增的还是编辑的。

Save和update是后台传的字段

                url: `/pesticide/crop/${!this.dataForm.id ? 'save' : 'update'}`,

                method: 'post',

                data: this.dataForm

              }).then(({data}) => {

                if (data && data.code === 0) {

                  this.$message({

                    message: '操作成功',

                    type: 'success',

                    duration: 1500

                  })

//我们完成数据库的新增以后的操作,将dialog显示为false,使用this.$emit('refreshDataList')返回之前的页面,我们之前在父组件中也定义了这个@refreshDataList="getDataList"

                  this.visible = false

                  this.$emit('refreshDataList')

                }

              })

            }

          })

      }

修改功能:

通过有没有传id值来判断

:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"

如果有值的话就进入

 init (id, disabled) {

        this.disabled = disabled

        this.dataForm.id = id || ''

        this.visible = true

        this.$nextTick(() => {

          this.$refs['dataForm'].resetFields()

          if (this.dataForm.id) {

            this.$http({

              url: `/pesticide/crop/info/${this.dataForm.id}`,

              method: 'get'

            }).then(({data}) => {

              if (data && data.code === 0) {

                this.dataForm = data.crop

              }

            })

          }

        })

      },

查看功能

因为传了一个true

 // 查看详情

      showDetails (id) {

        this.addOrUpdateVisible = true

        this.$nextTick(() => {

          this.$refs.addOrUpdate.init(id, true)

        })

      },

在data里先把disabled:false打开

data () {

      return {

        disabled: false,

        visible: false,

        dataForm: {

          id: 0,

          cropName: '',

          orderNum: ''},

      }

    },

init (id, disabled) {

        this.disabled = disabled

        this.dataForm.id = id || ''

然后再在表单里加不可编辑的状态

   <el-form-item label="作物名" prop="cropName">

        <el-input v-model="dataForm.cropName" :disabled="disabled" placeholder="作物名"></el-input>

      </el-form-item>

      <el-form-item label="排序号" prop="orderNum">

        <el-input v-model="dataForm.orderNum" :disabled="disabled" placeholder="排序号"></el-input>

      </el-form-item>

删除

<el-button v-if="isAuth('pesticide:crop:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>

      </el-form-item>

  <el-button v-if="isAuth('pesticide:crop:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>

 deleteHandle (id) {

//Id有值就放进一个数组里,否则就抽取选中复选框的数组里的id,这个map循环最终返回来的还是数组的格式

        let ids = id ? [id] : this.dataListSelections.map(item => {

          return item.id

        })

//如果点确定,就执行if方法,如果点取消,就什么也不执行

        this.$confirm('确定对所选项进行[删除]操作?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          this.$http({

            url: '/pesticide/crop/delete',

            method: 'post',

            data: ids

          }).then(({data}) => {

            if (data && data.code === 0) {

              this.$message({

                message: '操作成功',

                type: 'success',

                duration: 1500

              })

              this.getDataList()

            }

          })

        }).catch(() => {

        })

      }

    }

  }

      

最后一个写查询

 <el-form-item>

        <el-input v-model="searchForm.name" placeholder="请输入作物名" clearable></el-input>

      </el-form-item>

      <el-form-item>

        <el-button @click="getDataList()">查询</el-button>

 data () {

      return {

        searchForm: {

          name: ''

        },

上一篇:C# ASP.NET 读取EXCEL 单元格 读取 空值 不显示


下一篇:MVC MVVM Knockout 常遇问题总结