前端vue增删改查思路（连接后台数据） |
您所在的位置：网站首页 › 前端数据接口怎么写程序的代码 › 前端vue增删改查思路（连接后台数据） |
前端vue增删改查思路（连接后台数据）
|
前端vue做增删改查，它使用到的技术栈是vue+element+es6. 我们先来看一下项目功能页面
点击查询，这里可以做作物名的查询 以草莓为例
点击新增，会有一个弹出框，左上角显示【新增】信息
在新增框中填写信息，点击确定，保存成功后会有一个提示信息 【操作成功】 点击修改
修改成功后也会有提示信息
点击查看 这里把确定按钮隐藏，表单内容不可显示
点击删除 它会有一个提示框，让您确定您是否要进行删除的操作 您点击取消，返回作物表页面
点击确定，有一个操作成功的提示语
我们使用的编辑器是vscode，文件代码分为三部分。html/js/css 我们重点关注（html）部分和js部分 import是引入对象，vue的代码都写在export default里面 export default{ }好，我们先来写一下这个静态页面 先写这个输入框，查询按钮、新增按钮、批量删除,这里把多选框的代码也写上 关于操作下面的样式 fixed="right" 关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position的absolute属性来定位该层，你会发现absolute属性并不能达到你想要的css效果，。这时，就需要要用到fixed属性来定位该层了，当然，你如果不想用fixed属性的话，你是可以使用JavaScript语句来代替的。 然后写表格（作物名/排序号/操作（查看，修改，删除）） 第一步 手动添加一个el-table-column，设type属性为selection即可；然后在标签里添加一个多选的触发事件 在data里声明多选的数组 dataListSelections: [] data () { return { searchForm: { name: '' }, dataList: [], dataListSelections: [] } },然后写那个脚标页面 @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的话，这个组件就不会显示。
当然为了实现这个功能，我们需要先给定一个默认值 addOrUpdateVisible: false data () { return { searchForm: { name: '' }, dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, addOrUpdateVisible: false } },然后我们完成触发的方法 新建： 新建删除 ： 修改查看： 查看完成新建的按钮,想要弹窗显示的时候将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) }) },然后我们在组件里面，组件中的主体是在里面的，通过:visible.sync="dialogFormVisible"绑定一个boolean值来完成对于dialog的显示，然后:title="title"完成对于弹窗的题目的设定 这里是一个三目运算方法 什么是三目运算：(布尔表达式 ? 值0:值1;) crop-add-or-update.vue 调用init方法时候，把visible=true打开，this…填写信息后重置表单，防止有之前填的信息残留 init (id, disabled) { this.dataForm.id = '' this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() }) }然后我们写表单里的内容 然后通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参 Slot的通俗理解 是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置） Disabled这里是查看的功能的。如果是查看，这个按钮就不显示。 点击取消之后这个按钮消失 取消 确定然后在的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 body部分加规则 :rules="dataRule" data里写声明 data () { return { disabled: false, visible: false, dataForm: { id: 0, cropName: '', orderNum: ''}, dataRule: { cropName: [ {required: true, message: '名称不能为空', trigger: 'blur'} ] } } },// 表单提交 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值来判断 { 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) }) },在crop-add-or-update.vue中data里先把disabled:false打开 data () { return { disabled: false, visible: false, dataForm: { id: 0, cropName: '', orderNum: ''}, } },在init 方法里打开 this.disabled = disabled init (id, disabled) { this.disabled = disabled this.dataForm.id = id || ''然后再在表单里加不可编辑的状态 :disabled="disabled" 删除在js中写多选触发事件的方法 // 多选 selectionChangeHandle (val) { this.dataListSelections = val },我们在按钮中写批量删除和删除的点击事件，以及批量删除按钮的显示条件 批量删除： 批量删除删除： 删除触发删除的方法 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(() => { }) } } }
最后一个写查询 查询 data () { return { searchForm: { name: '' }, |
【本文地址】