vue-element-admin 增删改查(五)

此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!

一、添加和修改

注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和await;第三父向子传递数据props和子向父传递数据$emit();

1.添加数据

(1)请求地址:/article/category利用post传递数据

(2)编写api:注意add的url地址用的 反单引号,可以在url后面进行组合数据,这个知识点在编辑和删除你会看到详细的解释。

vue-element-admin 增删改查(五)_第1张图片

(3)编写方法

首先新建一个组件,里面的代码同样是从elementUI中复制过来的表单,下面会根据详细步骤解析elementUI标签中属性的意思。

vue-element-admin 增删改查(五)_第2张图片

在category/index.vue中进行引用,注意组件要首字母大写,不是必须的,但是最好规范一些。

vue-element-admin 增删改查(五)_第3张图片

引用完毕之后进行修改edit.vue组件:解析::title动态绑定的title名称;:visible.sync布尔类型,控制模态框的显示与否;:before-close是一个方法,关闭模态框;:rules表单验证;ref=相当于id=;:model表单的数据;prop=关闭模态框时清除数据要用到,这个在elementUI中有解释,自己去看文档;v-model绑定的具体数值;:label绑定的数据,要做默认选中效果;@click执行的方法

vue-element-admin 增删改查(五)_第4张图片

由于是父组件向子组件传递数据,所以在子组件中要用props进行接收,然后在上面进行动态绑定;注意:所有接受的变量要定义type和default,声明类型和默认值;此处小知识点,子组件向父组件传递值用$emit();

vue-element-admin 增删改查(五)_第5张图片

表单验证:在子组件中返回rules,也就是开头:rules="rules";注意:这里的rules是个object,里面需要验证的字段是个array,数组中每个value都是object,详细的验证方法在elementUI中有体现,自己去看。

vue-element-admin 增删改查(五)_第6张图片

此处定义的handleClose、onSubmit、submit方法;注意:在submit中有编辑和添加方法,用的同一个,所以有if判断;this.$refs['form'].resetFields()相当于jquey中$('#form').resetFields()清空数据;async、await和promise区别,自己去百度,这里只说明async和await是es6新语法,相当于api.add(this.formData).then((res) => {//TODO});这里可能有同学会有疑问,this.closeForm()这个方法在哪?他是父组件传递过来的Funciton,在下文中会解释到。

vue-element-admin 增删改查(五)_第7张图片vue-element-admin 增删改查(五)_第8张图片

开始操作父组件index.vue,在data中返回edit对象,然后把里面的值绑定到组件标签中;解析:title就是title;visible是否显示模态框;formData传递过去的数据,由于是添加功能,所以formData是空的,编辑就需要传递了;closeForm传递一个方法,用来关闭模态框

vue-element-admin 增删改查(五)_第9张图片vue-element-admin 增删改查(五)_第10张图片

到这里,添加功能就已经实现了,仔细去看我上面的截图,一定要注意我说的点,如果你比着写发现不对,一定要仔细对比。当对比不出来的时候,留言告诉我。

vue-element-admin 增删改查(五)_第11张图片

2.修改数据

(1)请求地址:/article/category/{id} 查询数据用get,这里的请求类型用的是restful请求方式,restful包含:get、post、put、patch、delete;/article/category 修改数据用put 

(2)编写api:由于修改需要先查到数据,然后再进行传递和渲染,所以在api中有一个查询数据方法,也就是getById()

vue-element-admin 增删改查(五)_第12张图片

(3)编写方法

在index.vue父组件中编辑方法为handleEdit(),同样这里用到了async和await,然后先请求到了当前id返回的值,然后传递到edit.vue子组件中。

vue-element-admin 增删改查(五)_第13张图片vue-element-admin 增删改查(五)_第14张图片

这里的if判断,判断传递过来的formData的id值是否为空,有值说明是编辑,无值说明是添加。if判断就在这里进行的体现价值,因为我们添加和编辑用的同一个组件,所以if显得至关重要。

vue-element-admin 增删改查(五)_第15张图片

仔细去看代码,去理解我的思路,为什么某些地方是这样写而不是那样写,一定要注意。哪里有看不明白的一定要留言进行讨论,我看到会第一时间回复。最终的效果:

vue-element-admin 增删改查(五)_第16张图片

二、删除

(1)请求地址:/article/category/{id} 删除用的是delete请求类型

(2)编写api:在强调一遍,url用的反单引号

vue-element-admin 增删改查(五)_第17张图片

(3)编写方法:因为删除用不到子组件了,所以删除都在index.vue中进行的

vue-element-admin 增删改查(五)_第18张图片

这里用到了elementUI中的$confirm方法,去文档中复制使用即可,方法的话就不再详细解释了,前面几篇文章已经解释过了。api.delete(id).then((res) => {//TODO})

vue-element-admin 增删改查(五)_第19张图片

最终效果:点击删除,显示提示,传递id进行删除。

vue-element-admin 增删改查(五)_第20张图片

 

你可能感兴趣的:(vue,nodejs,vue,es6,node.js)