00:01
接下来我们调试一下品牌新增功能,首先我们点击新增,弹出我们新增对话框,我们在这儿输入品牌的一些信息,品牌的logo地址呢,我们上节课已经调整好了,我们只需要选中一个图片,我们在这一块呢,Logo地址就会发生变化,那么再来输一个品牌的名字,比如我们聚焦小米,那只要我们输了,基于双向绑定,我们这个数据呢也会发生变化,包括我们的介绍信息以及显示状态,特别是这个显示状态,我们做成了一个开关,当我们关闭那就是false,打开就是处,但是我们真正的显示状态在数据库里边存的是零一,所以我们先来修改一下这块的代码,在显示状态Switch里边激活的值和没有激活的值,我们以前改过,只需要用两个属性,一个叫active value,那我们激活以后,我们就显示一,这是我们进行显示而。
01:01
不激活的状态呢,那就是零,我们直接把它复制过来,冒号就是动态绑定,动态绑定一个值,这个值呢直接写在这儿,不激活就是零,激活就是一来保存一下,看一下现在的效果。以前呢,还是true false,我现在点开到来。找到我们的这个品牌的新增修改组件,我们展开data form,那现在来看一下数status现在是零,我们打开那就是一关闭那就是零,好像我们这个品牌名呢。我们就叫小米,包括图片,我们来选择一个。我们让它显示介绍,我们来写上小米,小米。检索首字母,比如我们就叫米排序字段,那就应该是一个整数,我们现在来写一个零,填写完成以后来点击确定。发现这一块呢,操作成功,我们这一块就已经有小米的内容了,而我们在品牌logo地址这一块,我们显示的是整个logo地址的文本信息,我们应该将它做成一个图片进行显示,所以来到我们表格组件里边,我们将某一列要进行自定义显示,来找到表格table,我们找到我们自定义显示的列。
02:21
这有一个自定义列模板,我们要自定义显示某一列,我们只需要在这一列上来写一个template,拿到这一列scope内容,我们进行自定义显示,我们复制,把它放到我们品牌的列表,我们这个table table,我们以前自定义显示过一个开关。在这我们现在呢,要自定义显示我们品牌的logo,我们将它复制过来,Auto shift f代码来整理一下,现在我们在这一块呢,Time里边我们就显示一个图片就行了,那图片的地址,那就是这一行我们要显示的这个logo地址,而这个图片呢,我们使用element里边的图片显示组片下边有一个image图片,有各种不同效果的,比如我们就用中间的content,第一个呢是填充整个图片,第二个我们在容器中就包含咱们这个图片,我们要复制一下,只需要来写一个EL image复制。
03:20
复制,那image呢,我们src就是图片的路径地址,这个路径地址我们就要从scope中获取,Scope里边我们要取到这一行里边的logo信息,那我们就可以来写scope点肉,我们当前所在行点肉点这个logo,它呢就是我们图片地址,而且我们填充的方式我们也可以改一下,填充方式呢,我们改成content在这儿呢,复制过来,包括宽高,我们也给它调整一下,比如宽100,高80。保存,那现在来看一下我们整个表格的效果。刷新。
04:00
在这里呢,没有显示出品牌,看一下控制台,控制台里边有一个叫EL image。我们这个image啊,他说我们没有把这个组件正确的注入过来,但实际上我们在项目里边已经导入了element UI,并且已经使用非常多组件了,那可能就是这个脚手架当时没有将EL image注入进来,我们可以看一下效果,在我们这个项目里边有一个慢点GS在这里边我们发现已经import导入了element UI,它是使用ant符,那ant符那就是在src整个目录下,SRCSRC下边呢,有一个element UI,对,那它导入进来了,它导的是inex GS点进来,那这个GS里边呢,它帮我们导了view,而且导了element UI里边,我们看import导入了非常多的组件,从element UI里边,那可能就是这里边它没有写导入image组件,那我们怎么导入这个组件呢?参照element UI的这个文档,在文档里边呢,我们有一个安装,我们是使用NPM安装。
05:07
我们要配合web pack之类的,我们可以看一下快速上手引入element,在这呢,我们只需要导入element UI,使用view use element UI,那就用了element UI里边的所有内容了,当然我们也可以按需引入。我们需要element UI的什么组件,我们就用什么组件,比如这一块的例子,它在这呢只导入了elementi button和select组件,而剩下的这些组件呢,还有很多它的写法是will use,那就跟我们这一块的写法是一样的,那么再把其他更多的组件都导进来,那其实它这有一个完整的,我们直接一复制,这里边有image。我们来看一下这里面有没有image,我们在这来搜索一下image。这有三个结果,我们再看这儿呢,我们发现它导入了image,那没问题,我们就将整个这一块的内容,它在这使用的这么多组件,我们全部给它复制过来。
06:10
Import复制好。我们将这一块的import先删掉,包括下边的。一直删到里边,我们直接CV。这就是element UI的完整组件,我们来保存一下,但是我们发现这呢有三个问题,就是我们现在引的这个版本的element UI,没有这三个组件,一个是bank top,一个是casy,开这个panel,还有这个配置head,那我们就把这三个删掉。这三个删掉,包括呢,将前面影的这三个也就删掉了,保存。现在就可以了,我们来测试一下我们页面最终的效果,现在问题说我们这个property or method,比如说我们这个属性或者方法content是没有定义的,那也就是在我们brand品牌这一块,我们的填充方式,诶这个冒号它是动态绑定一个这个变量,那我们就不用冒号了,它的这个填充方式就是这个content,我们来保存一下,直接把值给它写死,现在来看一下页面效果刷新。
07:16
在这呢,有一个加载失败,小米它失败的原因,我们来看一下数据库有没有数据打开我们的SQ yo,我们来连接上,我们看保存起来的数据库里边品牌在小米这一块打开。这一块呢,确实有图片地址,我们复制一下,我们在这儿访问一下,我们这个图片地址回车也是可以访问到的,而我们这加载失败的原因来打开代码,同样的冒号src,我们要写一个logo,我写了一个log,好。保存一下,那现在来刷新页面。诶,我们小米的这一块呢,图片是加载出来了,只是它没有显示完全,这是我们EL。
08:01
Image填充效果的问题,我们可以使用content包含图片,也可以使用file让整个图片填充满我们的EL image保存来看一下效果。这一块呢,我们来刷新一下,它这儿还是没有显示,那我们可以使用这个原生的image组件吧,把它先注掉,我们使用原生的image也是没问题的image,然后呢,我们写src,它的这个地址,那就是scope roll logo,而这个地址呢,是动态绑定我们当前这一行的logo变量,那它的这个宽高我们给它写死定死好保存。现在我们的页面效果没问题,这是我们的新增,包括我们来点击修改,我们测试一下,点击修改呢,这些所有信息都会回显,包括这一块的图片,那不喜欢呢,我们还可以换掉,把它删掉,我重新换一个。我们换一个这个黑颜色的。
09:01
好,现在我来再来点击确定。还是操作成功,那这个图片呢,也换了,那默认生成的新增和修改都是没问题的,以及修改的回显。那么在这还应该关注一个功能,当来点击新增录入数据的时候,如果我们有些数据不写,我去来确定,那么我们在这会提示这些错误信息,这是我们前端的表单验证功能,这表单验证呢,现在都是做默认的,也就是不能为空,但我们如果乱填,比如我们检索首字母,既然是首字母只能有一个字母,我们在这儿填一段话,那这也是没问题的,所以啊,我们前端一定要在给后台提交所有数据之前做一个前端校验,而这个校验呢,就是基于表单的数据校验,这个功能呢,我们参照element UI里边来找到form表单,打开它里边呢有一个叫表单的验证,这个验证呢。
10:01
我们来看一下它的用法。点开。想要进行表单验证其实非常简单,只需要通过Rose这个属性传入每一个约定的校验规则,它就可以自动进行校验。比如我们这个EL form里边除了绑定model,就是表单里边每一项的数据从哪来?它还绑定了一个冒号Rose,它用Rose属性规定了我们这个校验规则。我们一直往下翻看一下这个roses的定义,下面呢,有一个roses roses是这么来定义的。首先是我们属性名,要校验的属性名,接下来是一个数组,数组里面填写我们每一个校验规则,每一个属性可以有多种校验规则,那第一个校验规则require true,那就是这个是必须的message来填写,如果校验失败以后提示哪个错误消息,那么在这呢就提示请输入活动名称,还有这个tri,那就是触发什么时候触发我们这个校验规则,这也就是失去焦点的时候我们来触发,我们这name有多种校验规则,Region也有校验规则,而我们这一块默认的校验规则来看一下在品牌的新增或删除。
11:13
我们在这儿新增或修改。我们整个e form除了规定data form,它是我们这个model数据,也规定了roses,我们的校验规则data row data row里边呢,我们规定了name,它是品牌名不能为空的,这些呢,我们都默认只是规定了不能为空的情况,但实际上我们在这儿进行添加的时候,首字母就只能是一个字母。排序字段也必须是一个数字,而且从零开始,那这自定义校验规则我们要怎么写呢?来到组件里边来参照,我们也可以拥有自定义校验规则,如何拥有?我们来点开还是定义这些校验规则,只不过在定义校验规则的时候,我们来看一下return Rose在定义校验规则的时候,每一个属性的校验规则我们可以写一个叫va,也就是校验器,我们可以使用某一个校验器,比如vali pass这个Y类的pass呢,我们定义的是一个方法,校验器的方法有三个传参,一个是入校验规则。
12:16
第二个是V6,我们当前接收到的输入的值,第三个是call bank校验成功失败以后的回调,我们只需要给每一个属性规定上自己的校验器就行了。那来到我们这。我们的校验器主要是first letter以及sortt这个字段,那我们就默认的这个我就不用了,我来使用我们的校验器来校验器用wi规定一下校验器触发哪个方法,这个方法呢,我们data这个方法里边,前面是return,在return之前我们来定义上这个触发方法,或者我们直接将这个方法用箭头函数呢,我们写在这里,这也是可以的,我们直接写在它内部,那这个方法呢,传入三个参数,这三个参数我们来复制过来,入value call bank。
13:07
那该怎么用,我们在这填充上我们的内容,我们这个校验方法啊,主要来看他填的这个Y6值对不对,我们再来做一个判断,If,如果我们填写的这个value值等等于空串,它是一个空的,就像我们这一块一样,它是一个空的,我们就可以call back,调用回调函数,给它传一个错误,错误信息是什么,我们就可以写上,好,我来复制过来,如果它是空的。我们给他返回。首字母,首字母必须填写,这是第一个,第二个情况,如果他填的这些首字母没有在我们英文字母的范围内。那我们还要给他提示,我们必须符合A到Z这些英文字母要求,那我们就可以使用正则表达式来做这件事情。比如我们在这来写一个else if,我们拿一段正则来做一个匹配。
14:07
这个正则呢,间括号我们必须啊,以A到Z开始,或者大写字母的A到Z都行,至此呢也结束,那就是这么一个小正则,直接点一个text,我们用这段正则呢,测试一下我们这个value值是不是正确的,如果是正确的那就没什么问题,如果这个返回的是false,那非false,那就是true这一块是处了,那说明这个正则校验有问题,我们就给它call back。口半课堂返回首字母必须。是咱们A到Z或者A到Z之间,这是两个失败情况,那成功怎么办呢?这两个失败情况,那成功呢,我们就直接可以给他call back。我们不传new error,不传错误信息,那这就是成功了。那else call bank,这是我们的first letter,同样的,我们的thought排序字段。
15:07
也应该是一个自定义校验的过程,我们把这个拿过来。同样的,我们来写上箭头函数,我们来给它自定义校验要用这三个参数。然后我们也是这么一堆判断,如果是为空了,那自然out shift f返回的就是必须填写。比如我们这个排序字段,排序字段必须填写,当然这个填写呢,我们可以给他一个默认值,比如我们在这赋值的时候排序,如果大家不填默认,就给它一个零,包括受status显示不显示,那默认都是一,然后呢,我们在这还要求它必须是一个数字,那这个数字的验证我们可以使用正则表达式,也可以使用另外一种方式,我们可以参照element的表单校验,正好它这有一个检查年龄的这个属性,这个年龄它想要是一个数字,我们可首先可以在V-model绑定的时候,使用修饰符告诉我U这一块接收一个数字,把它转成数字,好,我把这个复制过来。
16:18
我们也可以加上我们的修饰符,我们先让排序接收一个数字,接收完数字以后呢,我们在这儿进行判断,如果这个数字不是一个整数,那还是有问题的,所以我们在这来判断这个数字,怎么判断呢?我们使用number is,我来复制一下。我们直接进入我们的if判断数字,如果这个数字呢不是一个整数,我们给他说排序字段,排序必须是一个整数,必须是一个整数。并且呢,它还得大于零,所以我们在这儿如果它不是一个数字,或者它不大于零都是有问题的,我们直接Y6,第2Y6小于零,必须是一个大于。
17:09
等于。零的这个整数,否则呢,就是符合我们条件来保存一下,看一下页面效果。现在我们来点击新增。我们写了自定义校验,比如我们写了一个负一,我们跳上来,我们在这儿呢,触发校验,说我们必须是一个大于零的整数,那如果我们不填,我们出去,那么就会提示必须填写,包括首字母,我们填一个正确的,那填两个,那提示我们必须在A和C之间,而且得是一一个字母,大家可以完善这个提示,你不能填随便另外一个字符。那有了前端校验以后,我们就能保证从我们这个后台管理系统前端页面传给我们服务器的数据是正确的,但是我们还要加上服务端校验,即使我们将这些数据全提交给服务器,如果服务器不校验也会很危险,比如我绕过这个前端项目。
18:11
我知道你会发什么请求去来保存数据,我直接用postman,我来提交,那postman这一块数据,那就是自己想怎么输怎么输,那就会有很大的危险,所以我们说后来在我们做所有业务来做保存、更新等等这些操作的时候,我们要接收前端传来的东西,我们一定要在我们服务端也要进行校验,那下一节课呢,我们就来结合上我们服务端的后端校验,完成我们整个新增功能以及修改功能的双端校验,前端加后端一起校验。
我来说两句